我是这样异步加载并执行 go wasm 模块的，帮看好使不？

介绍

CabloyJS 提供了一个内置模块a-wasmgo，将 go wasm 模块的异步加载运行机制进行了封装，使我们可以非常方便的在 CabloyJS 项目中引入 go wasm ，从而支持更多的业务场景开发

下面，我们以测试模块test-party为例，演示引入 go wasm 模块并运行需要哪几个步骤

效果演示

• 请直接打开此演示页面：https://test.cabloy.com/#!/test/party/wasm_go

1. 准备工作

1. 安装 go 环境：参见 https://go.dev/doc/install

2. 创建 CabloyJS 项目：参见 https://cabloy.com/zh-cn/articles/guide-quick-start.html

3. 安装 test-party 演示套件：参见 https://store.cabloy.com/zh-cn/articles/test-party.html

2. 开发一个 go wasm 模块

2.1 go 源码

src/suite-vendor/test-party/modules/test-party/front/src/assets/wasm/demo.go

package main import ( "fmt" "syscall/js" ) func main() { fmt.Println("Hello, World!") alert := js.Global().Get("alert") alert.Invoke("alert!") } 

1. fmt.Println：在控制台输出一个字符串

2. js.Global().Get(“alert”)：获取网页中的 window.alert 方法

3. alert.Invoke：执行 alert 方法

2.2 编译 wasm

进入源码所在目录，将demo.go编译为demo.wasm

$ cd src/suite-vendor/test-party/modules/test-party/front/src/assets/wasm/ $ GOOS=js GOARCH=wasm go build -o demo.wasm demo.go 

• 更详细说明，请参见 go 官方文档：https://github.com/golang/go/wiki/WebAssembly

3. 加载并运行 wasm

测试模块test-party提供了一个演示页面，页面路径为：http://localhost:9092/#!/test/party/wasm_go

该页面提供了两个加载并运行 wasm 的方法：

3.1 两步执行

src/suite/test-party/modules/test-party/front/src/pages/wasm_go.jsx

import wasmDemo from '../assets/wasm/demo.wasm'; ... async onPerformRun1() { // go let action = { actionModule: 'a-wasmgo', actionComponent: 'sdk', name: 'go', }; const go = await this.$meta.util.performAction({ ctx: this, action }); // load wasm action = { actionModule: 'a-wasmgo', actionComponent: 'sdk', name: 'loadWasm', }; const item = { source: wasmDemo }; const wasmResult = await this.$meta.util.performAction({ ctx: this, action, item }); // run await go.run(wasmResult.instance); }, 

1. 内置模块a-wasmgo是异步模块，提供了一个sdk组件，用于封装异步加载并运行 wasm 的逻辑。因此需要通过调用performAction方法异步加载a-wasmgo模块，并调用其中的方法

2. 第一步，调用performAction取得go实例

3. 第二步，调用performAction异步加载demo.wasm模块

4. 调用go.run执行 wasm 模块的实例

3.2 一步执行

src/suite/test-party/modules/test-party/front/src/pages/wasm_go.jsx

import wasmDemo from '../assets/wasm/demo.wasm'; ... async onPerformRun2() { // load&run wasm const action = { actionModule: 'a-wasmgo', actionComponent: 'sdk', name: 'run', }; const item = { source: wasmDemo }; await this.$meta.util.performAction({ ctx: this, action, item }); }, 

1. 调用performAction时，直接传入demo.wasm模块，从而一次完成加载与运行的逻辑

附：performAction 说明

• action

• item

相关链接

• 文档：https://cabloy.com/

• 演示：https://test.cabloy.com/

• GitHub 源码仓库: https://github.com/zhennann/cabloy