看看CabloyJS是如何异步加载并执行go wasm模块的
创始人
2024-05-30 19:18:59
0

介绍

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 mainimport ("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() {// 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);
},
  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 wasmconst 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
名称说明
actionModule模块名称,此处为a-wasmgo
actionComponent模块提供的组件,此处为sdk
name需要调用的方法名称,此处有以下可选值:go/loadWasm/run
  • item
名称说明
sourcewasm模块的url地址,此处为wasmDemo,指向'../assets/wasm/demo.wasm'

相关链接

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

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

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

相关内容

热门资讯

将安卓系统数据导入ios系统,... 你是不是也有过这样的经历:手机里存满了珍贵的照片、联系人、应用数据,突然有一天,你决定换一台iPho...
雷霆战机 安卓最低系统,系统要... 你有没有听说过这款超级酷炫的飞行游戏——雷霆战机?没错,就是那个让你一上手就停不下来的刺激游戏!今天...
电脑独立安装安卓系统,探索电脑... 电脑独立安装安卓系统:探索未来的可能性在当今这个数字化时代,电脑已经不仅仅是一个用来打字的工具,它更...
树莓派虚拟安卓系统,打造便携式... 你有没有想过,用树莓派来运行安卓系统?听起来是不是有点酷炫?想象一个迷你的小树莓派,竟然能变身成为一...
安卓系统如何安装tk,安卓系统... 你有没有想过,你的安卓手机里装个tk,生活是不是能变得更有趣呢?别急,别急,我来给你详细说说怎么操作...
安卓计步数系统,健康生活新伙伴 你有没有发现,每天手机里那个默默无闻的安卓计步数系统,竟然悄悄地记录了你走过的每一步?今天,就让我带...
安卓原生系统真的好吗,究竟是否... 你有没有想过,安卓原生系统到底是不是那个传说中的“好”?咱们今天就来聊聊这个话题,看看这个系统到底有...
安卓2.3系统开机画面,复古与... 亲爱的读者,你是否还记得那些充满怀旧情怀的安卓2.3系统开机画面?那个曾经陪伴我们度过无数时光的小图...
哪个安卓管理系统好,安卓管理系... 你有没有想过,手机里那么多应用,管理起来是不是有点头疼?别急,今天就来给你揭秘哪个安卓管理系统好,让...
安卓系统取消流量监控,告别流量... 你知道吗?最近安卓系统来了一次大动作,取消了对流量的监控!这可真是让人眼前一亮的消息呢。想象以前每次...
安卓导航如何备份系统,安卓导航... 你有没有想过,如果你的安卓导航系统突然崩溃了,你会怎么办?别急,今天就来给你支个招,教你如何轻松备份...
小米安卓4.0系统下载,深度解... 你有没有想过,你的小米手机是不是也能来个“大变身”?没错,就是升级到安卓4.0系统!想象你的手机瞬间...
自动鉴别平板安卓系统,自动鉴别... 你有没有想过,你的平板电脑里那些安卓系统,其实都是经过一番“智慧”的筛选和鉴别才来到你面前的呢?没错...
bose能连安卓系统,开启无线... 你有没有想过,家里的音响设备也能跟上科技潮流,和你的安卓手机无缝连接呢?没错,今天就要来聊聊这个神奇...
安卓x是什么系统,探索新一代智... 你有没有听说最近安卓界又出了个新花样——安卓X系统?没错,就是那个我们平时手机里常用的安卓系统,这次...
安卓系统怎么提升网速,五大技巧... 你是不是也和我一样,在使用安卓手机时,总是觉得网速不够快,有时候刷个网页都慢得让人抓狂?别急,今天就...
机车安卓系统重装,轻松恢复系统... 你那台机车安卓系统是不是突然间卡壳了,运行速度慢得像蜗牛爬?别急,今天就来给你详细说说怎么给机车安卓...
华为手机更改安卓系统,探索安卓... 你知道吗?最近华为手机界可是掀起了一阵不小的波澜呢!没错,就是那个我们熟悉的华为,竟然悄悄地更改了安...
安卓系统低版微信,揭秘微信新版... 你有没有发现,有时候手机里的微信版本有点儿“老气横秋”呢?别急,今天就来聊聊这个让人有点头疼的安卓系...
安卓系统安装apple pay... 你有没有想过,即使你的手机是安卓系统,也能享受到Apple Pay的便捷支付体验呢?没错,就是那个曾...