在 Rust 中創建一個簡單的 WebAssembly 應用程序，然後從 JavaScript 調用這個程序。
本文所涉及的所有代碼可以在 https://github.com/second-state/wasm-learning/tree/master/browser/triple 中找到。
系列教程
1.
2.
在本教程中，我們將創建一個非常簡單但很完整的 WebAssembly 應用程序。
Webassembly 應用程序通常由兩部分組成。
- 運行在 WebAssembly 虛擬機內部以執行計算任務的字節碼程序
- 提供 UI、networking、數據庫，以及調用 WebAssembly 程序以執行關鍵計算任務或業務邏輯的主機應用程序
在本教程中，主機應用程序是用 JavaScript 編寫的，並在 web 瀏覽器中運行。 Webassembly 字節碼程序是用 Rust 編寫的。
現在，先讓我們看看 Rust 程序是如何編寫的。
在 Rust 中的 WebAssembly 程序
在這個例子中，Rust 程序將輸入數字簡單地增加了三倍並返回結果。 首先將 WebAssembly 工具安裝到 Rust 編譯器。
<code># Install Rust
$ sudo apt-get update
$ sudo apt-get -y upgrade
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$ source $HOME/.cargo/env
/<code>
<code># Install WebAssembly tools
$ rustup target add wasm32-wasi
$ rustup override set nightly
$ rustup target add wasm32-wasi --toolchain nightly
/<code>
接下來，創建一個新的 cargo 項目。 由於這個程序是從主機應用程序調用的，而不是作為獨立的可執行文件運行，因此我們將創建一個 lib 項目。
<code>$ cargo new --lib triple
$ cd triple
/<code>
編輯 Cargo.toml 文件以添加[lib]節。 它會告訴編譯器在哪裡可以找到庫的源代碼，以及如何生成字節碼輸出。
<code>[lib]
name = "triple_lib"
path = "src/lib.rs"
crate-type =["cdylib"]
/<code>
下面是 Rust 程序 src/lib.rs 的內容. 實際上，你可以在這個庫文件中定義多個外部函數，並且所有這些函數都可以通過 WebAssembly 在 JaveScript 主機上使用。
<code>#[no_mangle]
pub extern fn triple(x: i32) -> i32 {
return 3 * x;
}
/<code>
接下來你可以用下面的命令行編譯 Rust 的源代碼到WebAssembly的字節碼中。
<code>$ cargo +nightly build --target wasm32-wasi --release
/<code>
WebAssembly 字節碼文件是 target/wasm32-wasi/release/triple_lib.wasm
JavaScript 主機
我們使用 JavaScript 加載 WebAssembly 字節碼程序並調用它的函數。 由於大多數瀏覽器已經支持 WebAssembly， JavaScript 實際上可以作為一個網頁運行。
無須贅述，下面是 JavaScript 模塊的相關部分，用於加載、導出和調用 WebAssembly 函數。 完整的網頁源文件在這裡。
<code>
/<code>
可以看到 JavaScript 代碼加載了 WebAssembly 虛擬機的 triple_lib.wasm 文件， 導出其外部函數，然後根據需要調用這些函數。
將這個 HTML 文件和 triple_lib.wasm 文件放在web 服務器上，你就可以訪問網頁，在網頁上輸入的任何數字會自動乘以三。
那麼字符串呢
現在你注意到了，這個例子並不是一個 hello world。 WebAssembly函數計算數字，但不會像 hello world 那樣操作字符串。
這是為什麼呢？ 我們將在下一個教程中回答這個問題，並給出一個真實的 hello world 示例。
閱讀更多 WASM愛好者 的文章
