フルスタックプログラマ新しいおもちゃ錆(6)最初のWASMプログラム

コードの最初の

https://gitee.com/lightsever/rust_study/tree/master/wasm_hello01

 

webassemblyすばやく繭に挽く耳の内側に、細部に行く必要はありません。

rustwasm Firefoxの自分のおもちゃは、私たちがさあ飛ぶので、錆、実験を行うことを続けてみましょう。

環境インストール

さび環境をインストールした後、まだwasmキットを必要とします

貨物wasmパックをインストールします

そして、あなたはすぐにこのwasmを使用することができますプロジェクトテンプレートを作成する場合

貨物が発生--git https://github.com/rustwasm/wasm-pack-template

WASMプロジェクト

以下を生成するためのプログラムコード

画像

#[Wasm_bindgen]は、この関数はいずれかを使用、または使用のjsからそれを引き継ぐようにしたいのJSに輸出され、錆を伝えることです。

当然のことながら、アラートはそれでJSから引き継ぐことです

挨拶は、JSを呼び出すことです

 

私たちは、HelloWorld、それはここで変更することはないだろうか

 

このプロジェクトは、貨物ドキュメント生成wasmでコンパイルされていません

プロジェクトディレクトリに使用します

wasmパックのビルド

画像

このような成功をコンパイルするWasm

画像

このプロジェクトは、簡単に使用するが、使用のWebPACKのパッケージに、自分のグルーコードを生成し、NPMパッケージを生成しました。

私はNPM私はもうこれに従事していない、熟練していません。

主な隠された謎は、私たちが実際には彼の事を実行する必要があり、受け入れられません。

JSプロジェクト

私は、TSは、彼のプロジェクトを遂行使用し、彼はグルーコードを生成したプロジェクトで使用することはできませんサイトにそう直接、NPMパッケージである、我々は変更する必要があります。

あなたはすべてのWASMで混乱少しかもしれ?どのようにjsのコードを書きましたか?WASMが完全にJSを交換しないためです。彼は初期化する必要があり、あなたはWASMに失われた機能の一部をインポートする、することができますか対応していないものを他WASMまたJSはWASMの関数を呼び出す必要がある、または他のWASMハンは行うことはできません。

つまり、メインの入り口は初期化され、作業され、この作業は1回することができ、その後、サイト全体の論理はwasmで完成しました。

画像

最初は、この文書は、我々は3点の修正を行う必要があり、接着剤のJSです

1.まず、

wasmとしてインポート* ...

JSを伝えることです、この行を削除wasmからモジュールをインポートし、それがパッケージャを置き換えられます、そして我々はWebPACKのにしたくありません

2.その後、輸出の下の2行はあり

constキーワードをエクスポートおよび削除

画像

JS関数はwasmグルーコードにここに導入され、機能JS wasmのグルーコードを導出しています。

同様に、それは実際には、パッケージシステムのようなものです

さて、以上の変更

しかし、このwasmから来ますか?

JSのメンバーのWeb環境をすべてのグローバル変数は、窓あるので、私達はちょうどどこに行くために彼を与えることができます

そして、定義.d.tsを接着

画像

パッケージ定義ファイルとなっている宣言するために変更され、輸出は、それの使用に依存することはできません。

私たちのapp.tsを書きます

画像

TSとの愛、あなたはこのほとんどのJSを使用します

 

1.ロードwasmファイルarraybuffer

 

オブジェクトwasmの2例

小さなトリックは、私たちが直接窓に差し込む、または手動で辞書JS機能接着wasmインポートを構築する必要があります。グローバルオブジェクトのすべてのメンバーは、Windowsで、私たちはグルーコードを生成rustwasmヘルプがグローバルに定義されているので、直接スローウィンドウ完成事に。

 

割り当て3.グローバルwasmオブジェクトは、ここではこのに入ったダイレクトウィンドウ[「WASM」]です。

 

4.エントリ関数呼び出しwasm

 

我々のコードに従い、錆は、ハローピーターを警告する必要があります。

画像

プルデンシャルいじめっ子私。

エントリー機能と初期化機能は、一度従事しないでしょう終えました。

たびに、我々は変化に変更する必要がありますので、我々は、WebPACKのと糊ファイル使用状況rustwasmプリセットを使用していないので、長い将来の世代のwasmなどとして、当然のことながら、あります。しかし、我々は実際には非常に機械的な変化であります

1.jsファイル、行全体を削除するの輸入を持っています

、輸出の先頭に、ファイルを2.jsエクスポートおよびconstキーワードを削除

3.d.tsファイルは、輸出の初めに、宣言を置き換え

戻る自動的にそれを行うためのスクリプトを書くため。

 

今日のhelloworldして、ゲームを書き、それが遠くではありません。

おすすめ

転載: www.cnblogs.com/crazylights/p/12122068.html