如何将字符串值从 JavaScript 传入 Wasm/Rust 本文所用的所有资源都可以在 https://github.com/second-state/wasm-learning/tree/master/browser/hello 中找到
-
运行在 WebAssembly 虚拟机内部的字节码程序 -
调用 WebAssembly 程序的主机应用程序
《WebAssembly 中的字符串》会让你对字符串有更深的了解
-
主机应用程序是用 JavaScript 编写的，在 Web 浏览器中运行。它在 WebAssembly 函数调用之间传递字符串。 -
WebAssembly 字节码程序是用 Rust 编写的。它以 Rust String 结构的形式接收和返回字符串。
教程的源代码在这里。
设置
wasm-pack。它将 Rust 源代码编译成一个 WebAssembly 字节码程序，然后生成一个 JavaScript 模块，该模块可以与 WebAssembly 程序交互。生成的代码负责输入/输出数据的编码和管理, 这使得 JavaScript 开发者更容易调用 WebAssembly 函数。
wasm-pack工具。
# 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
# Install wasm-pack tools
$ curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
Rust 写的 WebAssembly 程序
cargo项目。由于这个程序是从主机应用程序调用的，而不是作为独立的可执行文件运行，因此我们将创建一个
hello 项目。
$ cargo new --lib hello
$ cd hello
Cargo.toml 文件，添加一个
[lib] 部分。它会告诉编译器在哪里可以找到库的源代码，以及如何生成字节码输出。这里我们还需要一个
wasm-bindgen 的依赖项。实用的
wasm-pack 为 Rust WebAssembly 程序生成 JavaScript 绑定。
[lib]
name = "hello_lib"
path = "src/lib.rs"
crate-type =["cdylib"]
[dependencies]
wasm-bindgen = "0.2.50"
src/lib.rs的内容。实际上，我们可以在这个库文件中定义多个外部函数，并且所有这些函数都可以通过 WebAssembly 在主机 JavaScript 应用程序中使用。
#[wasm_bindgen] 标签指示构建工具在 Rust / WebAssembly 和 JavaScript 模块中生成通信接口。
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn say(s: String) -> String {
let r = String::from("hello ");
return r + &s;
}
$ wasm-pack build --target web
.wasm文件是 WebAssembly 字节码程序，
.js 文件是JavaScript模块。
pkg/hello_lib_bg.wasm
pkg/hello_lib.js
JavaScript 主机
hello_lib.js 模块，可以非常容易地写 JavaScript 来调用 WebAssembly 函数。在
import 之后， WebAssembly
say() 函数现在成了一个同名的JavaScript 函数。完整的网页源文件在这里。
<script type="module">
import init, { say } from './hello_lib.js';
async function run() {
await init();
var buttonOne = document.getElementById('buttonOne');
buttonOne.addEventListener('click', function() {
var input = $("#nameInput").val();
alert(say(input));
}, false);
}
run();
</script>
hello_lib_bg.wasm 程序是由
hello_lib.js 模块加载, 将HTML 文件
hello_lib.js 和
hello_lib_bg.wasm 文件放在网络服务器上，现在得到了一个在输入任何名称都能 "say hello" 的网页了。
下一步是什么呢？
本文分享自微信公众号 - WebAssembly 中文社区（webassemblywasm）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
