CabloyJS 4.30.1 内置了异步加载并执行 Go Wasm 模块的机制

CabloyJS 是一款自带工作流引擎的 Node.js 全栈框架，面向开发者的低代码开发平台。实现了真正意义的“一次开发，到处运行”的跨端跨平台理念。只需一套代码，即可同时实现B端中后台管理系统和C端前台应用。只需一套代码，即可同时跨端PC和Mobile，并且Mobile端是接近原生体验

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

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

1. 准备工作

安装go环境
创建CabloyJS项目
安装test-party演示套件

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!"
}

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/ $ 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-vendor/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模块的实例

3.2 一步执行