微信小程序调用 WebAssembly 烹饪指南

我们都是在夜里崩溃过的俗人,所幸终会天亮。明天就是新的开始,我们会变得与昨天不同。

一、Rust 导出 wasm

参考 wasm-bindgen 官方指南 https://wasm.rust-lang.net.cn/wasm-bindgen/introduction.html

wasm-bindgen,这是一个 Rust 库和 CLI 工具,它可以促进 wasm 模块和 JavaScript 之间的高级交互。

1、创建一个 wasm 项目

# 使用模板生成
# cargo generate --git https://gitee.com/tgodfather/wasm-pack-template
cargo generate --git https://github.com/rustwasm/wasm-pack-template

2、添加 js-sys 依赖

cargo add js-sys 

3、修改 lib.rs

定义三个外部函数,它们分别对应于 JavaScript 中的 console.logconsole.error 和 wx.showModal。通过使用 wasm_bindgen,这些函数可以在 Rust 代码中被调用,从而实现与 JavaScript 的交互。

#[wasm_bindgen]
extern "C" {#[wasm_bindgen(js_namespace = console)]fn log(s: &str);#[wasm_bindgen(js_namespace = console)]fn error(s: &str);#[wasm_bindgen(js_namespace = wx)]fn showModal(param: &Object);
}

使用 rust 分别调用这三个函数,导出为 wasm 函数,

#[wasm_bindgen]
pub fn rs_log() {log("log");
}#[wasm_bindgen]
pub fn rs_error() {log("error");
}#[wasm_bindgen]
pub fn rs_show_modal() {// 创建一个 JavaScript 对象let options = Object::new();// 设置对象的属性Reflect::set(&options,&JsValue::from_str("title"),&JsValue::from_str("提示"),).unwrap();Reflect::set(&options,&JsValue::from_str("content"),&JsValue::from_str("这是一个模态弹窗"),).unwrap();// 创建回调函数let success_callback = Closure::wrap(Box::new(|res: JsValue| {let confirm = Reflect::get(&res, &JsValue::from_str("confirm")).unwrap().as_bool().unwrap_or(false);let cancel = Reflect::get(&res, &JsValue::from_str("cancel")).unwrap().as_bool().unwrap_or(false);if confirm {log("用户点击确定");} else if cancel {log("用户点击取消");}}) as Box<dyn FnMut(_)>);// 将回调函数添加到对象中Reflect::set(&options,&JsValue::from_str("success"),success_callback.as_ref().unchecked_ref(),).unwrap();// 为了避免回调被回收,必须调用 `forget`success_callback.forget();// 调用 JavaScript 的 `showModal` 函数showModal(&options);
}

补充:小程序官方弹窗示例代码,

wx.showModal({title: '提示',content: '这是一个模态弹窗',success (res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}
})

4、编译打包 wasm

wasm-pack build --target web

可以看到在 pkg 目录下生成了我们需要用到的 mywasm_bg.wasm、mywasm.js 。

二、对应小程序相关改动(Rust)

对于微信小程序,直接编译打包后的包无法直接调用,所以还需要进行一些代码修改。

WXWebAssembly | 微信开放文档

1、新增目录

新增 workers 目录:与 pages 同级,创建 workers 目录,用于存放 .wasm 文件

workers 目录只存放 mywasm_bg.wasm,便于把.wasm打包进去,以及分包打包

新增 pages/worker 目录:用于进行打包文件的调用

pages/worker目录只存放 .js ,这个文件包含了一些调用 .wasm 文件的方法

2、修改 mywasm.js 胶水代码

#改动点1、注释原 __wbg_load 方法逻辑,替换使用以下代码async function __wbg_load(module, imports) {if (typeof Response === 'function' && module instanceof Response) {const bytes = await module.arrayBuffer();return await instantiateArrayBuffer(bytes, imports);} else {return await instantiateArrayBuffer(module, imports);}
}
# 改动点2、手动指定 WebAssembly 模块的路径// 手动指定 WebAssembly 模块的路径
const wasmModulePath = '/workers/mywasm_bg.wasm';async function instantiateArrayBuffer(binaryFile, imports) {return WXWebAssembly.instantiate(wasmModulePath, imports).then(function(instance) {return instance;}).catch(function(reason) {console.error('Failed to asynchronously prepare wasm: ' + reason);throw reason;});
}
# 改动点3、手动指定 WebAssembly 模块的路径if (typeof module_or_path === 'undefined') {// module_or_path = new URL('mywasm_bg.wasm',//   import.meta.url);module_or_path =  wasmModulePath;}if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {// 需要使用 wx.request 替代 fetch      // module_or_path = fetch(module_or_path);module_or_path =  wasmModulePath;}

3、调用 wasm

import init,{ rs_log ,rs_error,rs_show_modal}  from '../worker/mywasm.js';
  onLoad: async function () {try {await init();// 使用 wasmModule 中的导出函数rs_log();rs_error();rs_show_modal();} catch (e) {console.error('Failed to load WASM module:', e);}}

4、运行效果

从控制台日志输出可以看到,wasm 导出的函数运行成功。

三、C/C++  导出 wasm

1、创建一个 hellojs.cpp

#include <stdio.h>
#include <emscripten/emscripten.h>int main(int argc, char ** argv) {printf("Hello World\n");
}#ifdef __cplusplus
extern "C" {
#endifint EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) {printf("我的函数已被调用\n");
}#ifdef __cplusplus
}
#endif

2、使用 emcc 编译打包

 # emcc -o hellojs.html hellojs.cpp -O3 -s WASM=1 -s NO_EXIT_RUNTIME=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']" --shell-file html_template/shell_minimal.htmlemcc -o hellojs.html hellojs.cpp -O3 -s WASM=1 -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']" --shell-file html_template/shell_minimal.html

成功生成我们所需要的 hellojs.js、hellojs.wasm 文件。 

四、对应小程序相关改动(C++)

1、新增目录

新增 workers 目录:与 pages 同级,创建 workers 目录,用于存放 .wasm 文件

workers 目录只存放 mywasm_bg.wasm,便于把.wasm打包进去,以及分包打包

新增 pages/worker 目录:用于进行打包文件的调用

pages/worker目录只存放 .js ,这个文件包含了一些调用 .wasm 文件的方法

2、修改 hellojs.js 胶水代码

# 改动1、在文件的最底部添加
module.exports = {Module: Module
}
# 改动2、注释代码
if(ENVIRONMENT_IS_WORKER) {// scriptDirectory=self.location.href}
# 改动3、修改instantiateArrayBuffer函数// function instantiateArrayBuffer(binaryFile, imports, receiver) {
//     return getBinaryPromise(binaryFile).then(binary=>WebAssembly.instantiate(binary, imports)).then(receiver, reason=> {
//             err(`failed to asynchronously prepare wasm: ${reason}`); abort(reason)
//         })
// }
function instantiateArrayBuffer(binaryFile, imports, receiver) {return WXWebAssembly.instantiate('/workers/hellojs.wasm', imports).then(function(instance) {return instance;}).then(receiver, function(reason) {err('failed to asynchronously prepare wasm: ' + reason);// Warn on some common problems.if (isFileURI(wasmBinaryFile)) {err('warning: Loading from a file URI (' + wasmBinaryFile + ') is not supported in most browsers. See https://emscripten.org/docs/getting_started/FAQ.html#how-do-i-run-a-local-webserver-for-testing-why-does-my-program-stall-in-downloading-or-preparing');}abort(reason);})
}
# 改动4、将js文件中的所有WebAssembly修改为WXWebAssemblyfunction abort(what) {Module["onAbort"]?.(what);what="Aborted("+what+")";err(what);ABORT=true;EXITSTATUS=1;what+=". Build with -sASSERTIONS for more info.";//var e=new WebAssembly.RuntimeError(what);var e=new WXWebAssembly.RuntimeError(what);throw e
}function instantiateAsync(binary, binaryFile, imports, callback) {if( !binary&&typeof WXWebAssembly.instantiateStreaming=="function" && !isDataURI(binaryFile)&& !isFileURI(binaryFile)&& !ENVIRONMENT_IS_NODE&&typeof fetch=="function") {return fetch(binaryFile, {credentials:"same-origin"}).then(response=> {var result=WXWebAssembly.instantiateStreaming(response, imports); return result.then(callback, function(reason) {err(`wasm streaming compile failed: ${reason}`); err("falling back to ArrayBuffer instantiation"); return instantiateArrayBuffer(binaryFile, imports, callback)})})
}return instantiateArrayBuffer(binaryFile, imports, callback)
}

3、调用 wasm

# 引入文件
const hellojs_wasm = require('../worker/hellojs');
onReady() {const moudule = hellojs_wasm.Module// moudule._myFunction(1,"");moudule.ccall("myFunction", // name of C functionnull, // return typenull, // argument typesnull,); // arguments},

4、运行效果

从控制台日志输出可以看到,wasm 导出的函数运行成功。 

五、参考资料

基于 Rust 的 Wasm 开发探索与实践_rust wasm-CSDN博客

基于 Rust 的 Wasm/Wasi 开发探索与实践(Linux开发环境)_wasi安装-CSDN博客

基于 Emscripten + OpenXLSX 实现浏览器操作 Excel_使用webassembly在浏览器端操作excel-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/65712.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自动驾驶3D目标检测综述(六)

停更了好久终于回来了&#xff08;其实是因为博主去备考期末了hh&#xff09; 这一篇接着&#xff08;五&#xff09;的第七章开始讲述第八章的内容。第八章主要介绍的是三维目标检测的高效标签。 目录 第八章 三维目标检测高效标签 一、域适应 &#xff08;一&#xff09;…

计算机毕业设计hadoop+spark+hive图书推荐系统 豆瓣图书数据分析可视化大屏 豆瓣图书爬虫 知识图谱 图书大数据 大数据毕业设计 机器学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

极品飞车6的游戏手柄设置

极品飞车&#xff0c;既可以用键盘来控制车辆的前进、后退、左转、右转、加速与减速&#xff0c;也可以使用游戏手柄来操作车辆的运行。需要注意的是&#xff0c;极品飞车虽然支持手柄&#xff0c;但是仅支持常见的北通、罗技还有部分Xbox系列的手柄&#xff0c;至于其他的PS4手…

【VBA】EXCEL - VBA 创建 Sheet 表的 6 种方法,以及注意事项

目录 1. 创建一个新工作表&#xff0c;并将其添加到工作簿的末尾 2. 创建一个新工作表&#xff0c;并命名它 3. 创建一个新工作表&#xff0c;并将其插入到指定位置 4. 检查是否已有同名工作表&#xff0c;避免重复创建 5. 创建多个工作表 6. 基于现有模板创建新工作表 …

html文件通过script标签引入外部js文件,但没正确加载的原因

移动端H5应用&#xff0c;html文件通过script标签引入外部js文件&#xff0c;但没正确加载&#xff0c;在移动设备上难以排查。通过PC浏览器打开&#xff0c;发现js被阻止了&#xff1a;blocked:mixed-content。 原因在于&#xff1a; “blocked:mixed - content” 是浏览器的…

虚拟机Centos下安装Mysql完整过程(图文详解)

目录 一. 准备工作 1. 设置虚拟机静态IP 2. 卸载Mysql 3. 给CentOS添加rpm源 二. 安装MySQL 1. 安装mysql服务 2. 启动mysql服务 3. 开启MySQL开机自启动 4. 查看mysql服务状态 5. 查看mysql初始密码 6. 登录mysql &#xff0c;修改密码 7. 允许外部访问MySQL数据库…

ulimit命令与nginx的联系

华子目录 ulimit使用ulimit命令查看当前限制设置特定限制常用的资源类型临时和永久设置 ulimit与nginx的联系ulimit对Nginx的影响Nginx配置中的相关参数 ulimit 在Linux系统中&#xff0c;ulimit命令用于获取和设置用户级别的资源使用限制。这些限制可以控制诸如可以打开的文件…

初识具身智能

具身智能是智能科学的一个基础问题&#xff0c;在过去的5.4亿年以来&#xff0c;地球上所有生物都是通过身体和环境交互、进化逐步产生的。通俗地讲&#xff0c;具身智能体以第一人称视角身临其境地从环境交互中理解外部世界的本质概念&#xff0c;被认为是通向通用人工智能的重…

【机器人】机器人的数学模型:符号表示、位形空间、状态空间、工作空间

定义 机器人是一种可重复编程的多功能机械臂&#xff0c;他们通过可变程控运动来执行如移动材料、零件、工具或者特种设备等多种任务。 ——美国机器人协会&#xff08;RIA&#xff09; 1.1 机器人的数学模型 1.1.1 机器人的符号表示 机械臂&#xff1a;关节joint 连杆link …

VITUREMEIG | AR眼镜 算力增程

根据IDC发布的《2024年第三季度美国AR/VR市场报告》显示&#xff0c;美国市场AR/VR总出货量增长10.3%。其中&#xff0c;成立于2021年的VITURE增长速度令人惊艳&#xff0c;同比暴涨452.6%&#xff0c;成为历史上增长最快的AR/VR品牌。并在美国AR领域占据了超过50%的市场份额&a…

PY_11_01

前言 PY_11_01 抄就行了&#x1f47b; 一、代码步骤 抄就行了&#x1f47b; def fact(n):if n1:return 1else:return n*fact(n-1)while True:minput(请输入一个正整数m:)if not m.isdigit() or int(m)0:print(输入错误&#xff0c;请重新输入&#xff01;)else:mint(m)brea…

Richardson-Lucy (RL) 算法的卷积形式推导

Richardson-Lucy 算法从模糊图像中恢复原始图像。Richardson-Lucy 方法假设观测图像的噪声服从泊松分布&#xff0c;是一种极大似然估计方法。 1. 问题定义 假设我们有一个原始图像 f ( x , y ) f(x,y) f(x,y)&#xff0c;通过一个已知的点扩散函数 h ( x , y ) h(x,y) h(x,y…

网线直连模式下,ubuntu虚拟机与zynq开发板互ping

目的&#xff1a;想要使用网线将windows网口与zynq开发板网口直连&#xff0c;可以实现通过nfs&#xff08;network file system)挂载在ubuntu中的根文件系统&#xff0c;从而运行linux&#xff0c;方便linux的驱动开发。 参考文章&#xff1a; 领航者 ZYNQ 之嵌入式 Linux 开…

深入了解 Zookeeper:原理与应用(选举篇)

在上一篇关于 Zookeeper 的介绍中&#xff0c;我们知晓了它在分布式系统中的关键地位以及核心的工作原理框架。今天&#xff0c;重点来深入探究一下 Zookeeper 集群是如何实现领导者选举这一至关重要的环节的。 一、选举触发时机 集群启动时&#xff1a;当一个全新的 Zookeep…

金仓数据库对象访问权限的管理

基础知识 对象的分类 数据库的表、索引、视图、缺省值、规则、触发器等等&#xff0c;都称为数据库对象&#xff0c;对象分为如下两类: 模式(SCHEMA)对象:可以理解为一个存储目录&#xff0c;包含视图、索引、数据类型、函数和操作符等。非模式对象:其他的数据库对象&#x…

C++并发:线程管控

1 线程基本管控 每个C程序都含有至少一个线程&#xff0c;即运行main()的线程&#xff0c;它由C运行时系统启动。随后程序可以发起更多线程&#xff0c;它们以别的函数作为入口。这些新线程连同起始线程并发运行。当main()返回时&#xff0c;程序就会退出&#xff1b;同样&…

网络爬虫性能提升:requests.Session的会话持久化策略

网络爬虫面临的挑战 网络爬虫在运行过程中可能会遇到多种问题&#xff0c;包括但不限于&#xff1a; IP被封禁&#xff1a;频繁的请求可能会被网站的反爬虫机制识别&#xff0c;导致IP被封。请求效率低&#xff1a;每次请求都需要重新建立TCP连接&#xff0c;导致请求效率低下…

基于华为atlas的车辆车型车牌检测识别

整体分为2个部分&#xff0c;也就是2个模型&#xff0c;车辆检测、车型检测、车牌检测这3个功能是一个基于yolov5的模型实现&#xff0c;车牌识别是基于PaddleOCR中的PP-OCRv3的模型实现。 车辆检测数据集制作&#xff1a; 车辆检测、车型检测、车牌检测的数据集主要从coco数…

打破视障壁垒,百度文心快码无障碍版本助力视障IT从业者就业无“碍”

有AI无碍 钟科&#xff1a;被黑暗卡住的开发梦 提起视障群体的就业&#xff0c;绝大部分人可能只能想到盲人按摩。但你知道吗&#xff1f;视障人士也能写代码。 钟科&#xff0c;一个曾经“被黑暗困住”的人&#xff0c;他的世界&#xff0c;因为一场突如其来的疾病&#xff0c…

pytorch torch.utils.checkpoint模块介绍

torch.utils.checkpoint 是 PyTorch 中用于实现 梯度检查点(gradient checkpointing)的模块。它通过在反向传播中 重新计算 前向传播的某些部分,以显著减少激活值的显存占用。 梯度检查点的核心原理 在前向传播中,不是保存每一层的激活值,而是保存输入和部分中间结果。在…