网站平台建设呈现全新亮点,海珠网站建设报价,网站的设计制作流程,wordpress几种版本介绍
CabloyJS提供了一个内置模块a-wasmgo#xff0c;将go wasm模块的异步加载运行机制进行了封装#xff0c;使我们可以非常方便的在CabloyJS项目中引入go wasm#xff0c;从而支持更多的业务场景开发
下面#xff0c;我们以测试模块test-party为例#xff0c;演示引入…介绍
CabloyJS提供了一个内置模块a-wasmgo将go wasm模块的异步加载运行机制进行了封装使我们可以非常方便的在CabloyJS项目中引入go wasm从而支持更多的业务场景开发
下面我们以测试模块test-party为例演示引入go wasm模块并运行需要哪几个步骤
效果演示
请直接打开此演示页面https://test.cabloy.com/#!/test/party/wasm_go
1. 准备工作 安装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
2. 开发一个go wasm模块
2.1 go源码
src/suite-vendor/test-party/modules/test-party/front/src/assets/wasm/demo.go
package mainimport (fmtsyscall/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方法
2.2 编译wasm
进入源码所在目录将demo.go编译为demo.wasm
$ cd src/suite-vendor/test-party/modules/test-party/front/src/assets/wasm/
$ GOOSjs GOARCHwasm 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() {// golet action {actionModule: a-wasmgo,actionComponent: sdk,name: go,};const go await this.$meta.util.performAction({ ctx: this, action });// load wasmaction {actionModule: a-wasmgo,actionComponent: sdk,name: loadWasm,};const item { source: wasmDemo };const wasmResult await this.$meta.util.performAction({ ctx: this, action, item });// runawait go.run(wasmResult.instance);
},内置模块a-wasmgo是异步模块提供了一个sdk组件用于封装异步加载并运行wasm的逻辑。因此需要通过调用performAction方法异步加载a-wasmgo模块并调用其中的方法 第一步调用performAction取得go实例 第二步调用performAction异步加载demo.wasm模块 调用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() {// loadrun wasmconst action {actionModule: a-wasmgo,actionComponent: sdk,name: run,};const item { source: wasmDemo };await this.$meta.util.performAction({ ctx: this, action, item });
},调用performAction时直接传入demo.wasm模块从而一次完成加载与运行的逻辑
附performAction说明
action
名称说明actionModule模块名称此处为a-wasmgoactionComponent模块提供的组件此处为sdkname需要调用的方法名称此处有以下可选值go/loadWasm/run
item
名称说明sourcewasm模块的url地址此处为wasmDemo指向../assets/wasm/demo.wasm
相关链接 文档https://cabloy.com/ 演示https://test.cabloy.com/ GitHub源码仓库: https://github.com/zhennann/cabloy
