WebAssembly(1)-入门

2022-08-29

Word count: 919 | Reading time≈ 4 min

WebAssembly相关入门。
在圈子里经常听说webassembly，也听到很多人不同的解释，但这究竟是什么，总得亲自体验下，才会深有体会。

1. 概述

目前该技术主要是和js进行交互，如果个人方向在rust上，则仅需要关注下rust部分的应用即可。
WebAssembly（wasm）是一种简单的机器模型和具有广泛规范的可执行格式。它被设计成可移植的、紧凑的，并且以或接近本机速度执行。说白了就是：简而言之，它是一种将用一种编程语言编写的代码转换为浏览器可理解的机器代码的技术。让在浏览器上能够高效执行一些复杂程序
WebAssembly有两种表示相同结构的格式：
1. .wat 文本格式（WebAssembly Text）使用S表达式，和Lisp家族的语言有些类似；
2. .wasm二进制格式，级别较低，直接供wasm虚拟机使用，它在概念上类似于ELF和Mach-O。
线性存储器：WebAssembly有一个非常简单的内存模型。wasm模块可以访问单个的线性内存（本质就是数组），此内存可以按照页大小（64K）的倍数增长，但是不能缩小。
wasm并没有对其宿主环境做出任何假设，但是到目前为止，主要还是与js相关。

2. 方式一实现HelloWorld

很基本的方式实现，用于体验

# 安装wasm-pack
cargo install wasm-pack

# 安装npm（本案例暂时不需要）
npm install npm@latest -g

# 创建工程
cargo new --lib mywasm

Cargo.toml中加入依赖：

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

src/lib.rs中：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern{
    pub fn alert(s:&str);
}
#[wasm_bindgen]
pub fn greet(name:&str){
    alert(&format!("Hello,My wasm! I'm {}!",name));
}

项目根目录编译：

1	wasm-pack build --target web

在项目根目录下创建index.html，调用wasm，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello-wasm example</title>
  </head>
  <body>
    <script type="module">
      import init, {greet} from "./pkg/hello_wasm.js";
      init()
        .then(() => {
          greet("WebAssembly")
        });
      </script>
  </body>
</html>

运行server：

1	python3 -m http.server

测试：
浏览器输入：http://localhost:8000

3. 方式二实现HelloWorld

官方标准方式实现，利用模板实现，更加符合工程需要

安装：

1
2
3

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
cargo install cargo-generate
npm install npm@latest -g

注意，在macos环境下，执行：cargo install cargo-generate，八成会报：openssl错误。这种时候就不要再强制去按着报错解决问题了。直接去github下载已经编译好的：cargo-generate 下载后，将解压出来的cargo-generate二进制文件放到你的.cargo/bin/目录下

下载模板（macos系统会提示权限安全异常，用mac的应该都知道咋处理，不知道的自己百度吧）

1	cargo generate --git https://github.com/rustwasm/wasm-pack-template

Cargo.toml中加入如下，否则编译的时候会很难通过：

[package.metadata.wasm-pack.profile.dev]
wasm-opt = false

[package.metadata.wasm-pack.profile.release]
wasm-opt = false

进去根目录，开始编译

1	wasm-pack build

将wasm放入网页

1 2	npm init wasm-app www cd www

打开package.json，添加如下代码

{
  // ...
  "dependencies": {                     // Add this three lines block!
    "wasm-game-of-life": "file:../pkg"
  },
  "devDependencies": {
    //...
  }
}

修改index.js如下

1
2
3

//import * as wasm from "hello-wasm-pack";
import * as wasm from "wasm-game-of-life";
wasm.greet();

启动测试：

1 2	npm install npm run start

浏览器输入：
http://localhost:8080

总结

本文已编辑完毕

参考

[1] Wasm官方文档