评论

微信小程序WXWebAssembly相关问题整理

微信对WebAssembly确实支持

微信小程序WXWebAssembly相关问题整理

1、微信对WebAssembly的支持情况见官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/performance/wasm.html

官方文档没有示例,没有代码片段

我写了一个代码片段,仅供大家参考

https://developers.weixin.qq.com/s/c2c3U6m37RIp

该代码片段成功导入了wasm文件,并且利用导出的add函数,计算了1+2 = 3

2、WebAssembly的官方文档

https://webassembly.org/

中文版

https://www.wasm.com.cn/


3、 emscripten

https://emscripten.org/

我解释下, emscripten可以简单理解为是一个编译器,可以将其他语言的脚本编译为对应的wasm文件

所以逻辑编写完之后,要安装 emscripten的环境,并且用对应的脚本来完成这个编译的工作

由于该技术是最近新推出的,所以官方不断更新,最近的版本是 3.1.37,

4、如何编译生成一个wasm文件

如下图所示,我安装的版本是3.1.28

编写对应的c++ helloworld文件,执行编译脚本

生存了一个js和一个wasm文件

5、

导入到小程序会发现报错

报错内容为

TypeError: WebAssembly.instantiate(): Import #0 module="wasi_snapshot_preview1" error: module is not an object or function

备注

这仅仅是一个基础的示例代码,引入了头文件 stdio.h,导入小程序就报错了

6、是否有成功的wasm导入

具体见代码片段

https://developers.weixin.qq.com/s/c2c3U6m37RIp

相关的c文件如下所示,没有引入任何头文件,就可以成功了。

7、总结

其实目前微信对WebAssembly确实支持,但是支持的很有限。

最后一次编辑于  2023-05-10  
点赞 0
收藏
评论

9 个评论

  • 最后的记忆
    最后的记忆
    02-04

    只要使用其他库的函数就会报错。。。这是为什么? 哪怕math.h里的都不行... 我也是醉了。

    02-04
    赞同
    回复
  • Sargy
    Sargy
    2023-05-10

    小程序引入wasm文件的优雅代码编写方式

    https://juejin.cn/post/7187279730264473656

    2023-05-10
    赞同
    回复
  • Sargy
    Sargy
    2023-05-10

    https://developer.mozilla.org/zh-CN/docs/WebAssembly/JavaScript_interface/instantiate

    WebAssembly.instantiate() 允许你编译和实例化 WebAssembly 代码。


    2023-05-10
    赞同
    回复
  • Sargy
    Sargy
    2023-05-10

    wasm的胶水js该如何修改以适配WXWebAssembly?? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000ca895518d6870211df985c56000

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    提问者认为该回答有用

    你好。解决办法有几个:

    1. C++代码里尽量不要引用内置库,比如上面的 #include <stdio.h> 。这样的好处是可以减少emcc生成的胶水代码的量
    2. emcc编译时选择精简的编译模式,避免emcc编译时自动引入了一些不需要的库
    3. 最后手动修改胶水代码,以适配小程序环境,比如 WebAssembly 适配为 WXWebAssembly
    4. 如果C++代码足够纯净,只用来做运算的话,那理论上emcc编译后主要产物是wasm文件,胶水js里只有很少的代码量


    2023-05-10
    赞同
    回复
  • Sargy
    Sargy
    2023-05-10
    emcc test.c -Os -s WASM=1 -s SIDE_MODULE=1 -o test.wasm
    
    

    emcc就是Emscripten编译器,test.c是我们的输入文件,-Os表示这次编译需要优化,-s WASM=1表示输出wasm的文件,因为默认的是输出asm.js,-s SIDE_MODULE=1表示就只要这一个模块,不要给我其他乱七八糟的代码,-o test.wasm是我们的输出文件。

    编译成功之后,当前目录下就会生成test.wasm

    2023-05-10
    赞同
    回复
  • Sargy
    Sargy
    2023-05-10

    参考文档

    http://webassembly.org.cn/getting-started/developers-guide/

    在使用 emcc 命令时,要带着 -s WASM=1 参数(不然,默认将会编译成asm.js)。


    2023-05-10
    赞同
    回复
  • Sargy
    Sargy
    2023-05-10

    可以导入成功,并导出add函数的小程序代码片段

    https://developers.weixin.qq.com/s/E2vRo6mp7qIj

    2023-05-10
    赞同
    回复
  • Sargy
    Sargy
    2023-05-10

    微信小程序当前是否支持WebAssembly?? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0000625f4dccc89bc28a6bdda5f400

    2023-05-10
    赞同
    回复
  • Sargy
    Sargy
    2023-05-10

    以下脚本可以只生成wasm文件

    emcc ./hello.cpp -Os -s WASM=1 -s SIDE_MODULE=1 -o ./hello202305091736.wasm


    2023-05-10
    赞同
    回复
登录 后发表内容