CabloyJS 提供了一个内置模块a-wasmgo
,将 go wasm 模块的异步加载运行机制进行了封装,使我们可以非常方便的在 CabloyJS 项目中引入 go wasm ,从而支持更多的业务场景开发
下面,我们以测试模块test-party
为例,演示引入 go wasm 模块并运行需要哪几个步骤
安装 go 环境:参见 https://go.dev/doc/install
创建 CabloyJS 项目:参见 https://cabloy.com/zh-cn/articles/guide-quick-start.html
安装 test-party 演示套件:参见 https://store.cabloy.com/zh-cn/articles/test-party.html
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!")
}
fmt.Println:在控制台输出一个字符串
js.Global().Get(“alert”):获取网页中的 window.alert 方法
alert.Invoke:执行 alert 方法
进入源码所在目录,将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
测试模块test-party
提供了一个演示页面,页面路径为:http://localhost:9092/#!/test/party/wasm_go
该页面提供了两个加载并运行 wasm 的方法:
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);
},
内置模块a-wasmgo
是异步模块,提供了一个sdk
组件,用于封装异步加载并运行 wasm 的逻辑。因此需要通过调用performAction
方法异步加载a-wasmgo
模块,并调用其中的方法
第一步,调用performAction
取得go
实例
第二步,调用performAction
异步加载demo.wasm
模块
调用go.run
执行 wasm 模块的实例
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 });
},
performAction
时,直接传入demo.wasm
模块,从而一次完成加载与运行的逻辑名称 | 说明 |
---|---|
actionModule | 模块名称,此处为a-wasmgo |
actionComponent | 模块提供的组件,此处为sdk |
name | 需要调用的方法名称,此处有以下可选值:go/loadWasm/run |
名称 | 说明 |
---|---|
source | wasm 模块的 url 地址,此处为wasmDemo ,指向'../assets/wasm/demo.wasm' |
GitHub 源码仓库: https://github.com/zhennann/cabloy
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.