文章详情 - 宏推科技

一、参考资料

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

二、安装脚手架 cargo-generate


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

New Image

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

New Image

双击安装之后在 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

New Image

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

New Image

wasm-pack build --target web

New Image

五、创建一个Vue项目


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

New Image

六、引用 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()
})

New Image

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

七、运行测试

New Image

八、序列化与出入参


> 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 的一些脚本，抛出平台不支持异常；

New Image

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

New Image