一、参考资料

参考官方技术文档 https://rustwasm.github.io/

二、安装脚手架 cargo-generate

# cargo-generate 用于快速生成 WASM 项目的脚手架（类似 create-react-app）
cargo install cargo-generate

三、下载安装 wasm-pack.exe 打包工具 

 双击安装之后在 Cargo 根路径下多出一个 wasm-pack.exe 

四、创建一个 WASM 项目

# 使用模板生成
cargo generate --git https://github.com/rustwasm/wasm-pack-template# 使用文档 GitHub - cargo-generate/cargo-generate: cargo, make me a project# templates on github
cargo generate --git https://github.com/username-on-github/mytemplate.git# or just
cargo generate username-on-github/mytemplate# templates on other git platforms
cargo generate gl:username-on-gitlab/mytemplate
cargo generate bb:username-on-bitbucket/mytemplate# this scheme is also available for github
cargo generate gh:username-on-github/mytemplate# for a complete list of arguments and options
cargo help generate

 在项目目录下运行 wasm-pack build 命令，即可编译出 WASM 模块。wasm-pack 会在项目的 pkg 目录下生成 .wasm 文件和相关的 js 胶水代码。

wasm-pack build --target web

五、创建一个Vue项目 

# VueCli，弃用
# vue create -m cnpm webdemo
# 使用 Vite
cnpm create vite@latest

六、引用 wasm 模块

<script setup lang="ts">
import { onMounted, ref } from 'vue'import init, { greet } from '../../pkg/mydemo.js'defineProps<{ msg: string }>()const count = ref(0)onMounted(async () => {await init()greet()
})

将 pkg 复制到前端根目录下。 

七、运行测试

八、 序列化与出入参

> js-sys 用于将 Rust 类型 => JS 类型
> wasm_bindgen 中的 JsValue 用于将 JS 类型 => Rust 类型

// 示例一
#[wasm_bindgen]
pub extern "C" fn gen_pubKey(seed: &[u8]) -> Uint8Array {let (privKey, pubKey) = ed25519::keypair(&seed);unsafe { Uint8Array::view(&pubKey) }
}// 示例二
extern crate serde_json;
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;#[macro_use]
extern crate serde_derive;
#[wasm_bindgen]
pub fn test(array: JsValue) {let elements: Vec<u32> = array.into_serde().unwrap();
}// 示例三
pub extern "C" fn greet(a: &str) -> String {format!("Hello, {}!", a)
}
#[export_name = "greet"]
pub extern "C" fn __wasm_bindgen_generated_greet(arg0_ptr: *const u8,arg0_len: usize,
) -> *mut String {let arg0 = unsafe {let slice = ::std::slice::from_raw_parts(arg0_ptr, arg0_len);::std::str::from_utf8_unchecked(slice)};let _ret = greet(arg0);Box::into_raw(Box::new(_ret))
}// 示例四
#[wasm_bindgen]
pub fn get_printers() -> js_sys::Array {let list = js_sys::Array::new();let printers = printers::get_printers();for printer in printers.clone() {list.push(&js_sys::JsString::from(printer.name));}list
}
// 示例五
extern crate serde_json;
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
#[macro_use]
extern crate serde_derive;
#[derive(Serialize, Deserialize)]
pub struct Element {name: String,id: String,parent_id: String,
}#[wasm_bindgen]
pub fn test(js_objects: &JsValue) {let elements: Vec<Element> = js_objects.into_serde().unwrap();
}

九、WASM 安全性【OS 资源访问限制】

WASM 想要执行 WindowOS 的一些脚本，抛出平台不支持异常；

WASM 是运行于浏览器当中，而浏览器本身设计为没有权限访问OS资源，这是出于安全考虑。
通过设计，WebAssembly模块运行所在的环境与基础主机系统的本机功能完全隔离（或沙盒化）。这意味着默认情况下，Wasm模块被设计为仅执行纯计算。
因此，通常无法从WASM访问“ OS”级资源，例如文件描述符，网络套接字，系统时钟和随机数。但是，在许多情况下，Wasm模块需要执行的工作不仅仅是执行纯计算。它们必须与本机“ OS”功能交互。 因此一群天才们提出了使用 WASI 操作 OS 资源，并且能够独立在浏览器之外运行，下一篇文章再做一个Rust + WASI 的 DEMO。