我想在微信小程序里面集成zxing-wasm，可以直接调用wasm文件吗？

greenking19 commented 1 month ago

（我就不写英文了哈我想web & 小程序都实现扫二维码连续扫码我参考了jsQr、zxing-js、zxing-wasm 我发现

jsQr效率有点低
zxing-js（我在nodejs都跑不起来连demo都没有
zxing-wasm 不得不说效率是真的 fast 🚀!

我现在web使用了vue-qrcode-reader实现了效果很好我现在想在小程序里面使用zxing-wasm，但是小程序构造npm包的时候报错了我想如果可以直接调用wasm就好了，可以直接把数据给wasm计算然后返回结果吗？

Sec-ant commented 1 month ago

WASM 中的代码为了和 JS 侧进行数据交互会一些胶水代码，这部分胶水代码和 .wasm 文件是使用 emscripten 这样的工具构建时一同得到的产物，所以如果你想直接调用的 .wasm 中的函数的话，你还是需要这部分胶水代码中的逻辑，完全自己实现的话工作量可能会比较大。zxing-wasm 这个库是在这部分胶水代码之上又增加了一层封装，主要是做了一些接口数据类型的映射和 WASM 模块的管理。

所以我个人感觉最好先定位小程序构建时具体的报错信息和原因，然后判断一下这部分报错代码是出现在直接作为构建产物的胶水代码内，还是在这个仓库里封装代码中，然后再考虑怎么解决比较好？

greenking19 commented 1 month ago

WASM 中的代码为了和 JS 侧进行数据交互会一些胶水代码，这部分胶水代码和 .wasm 文件是使用 emscripten 这样的工具构建时一同得到的产物，所以如果你想直接调用的 .wasm 中的函数的话，你还是需要这部分胶水代码中的逻辑，完全自己实现的话工作量可能会比较大。zxing-wasm 这个库是在这部分胶水代码之上又增加了一层封装，主要是做了一些接口数据类型的映射和 WASM 模块的管理。

所以我个人感觉最好先定位小程序构建时具体的报错信息和原因，然后判断一下这部分报错代码是出现在直接作为构建产物的胶水代码内，还是在这个仓库里封装代码中，然后再考虑怎么解决比较好？

这是报错的信息

message：发生错误
SyntaxError: parse js file (/zxing-wasm/dist/cjs/full/index.js) failed: Unexpected token (2:12339)
ideVersion: 1.06.2404301
osType: darwin-arm64
time: 2024-05-21 17:21:16

定位到错误了

只需要把源代码一下就可以了

try{return pr.grow(t),ie(),1}catch{}}
//replace 👇🏻
try{return pr.grow(t),ie(),1}catch(err){}}

好像是小程序开发程序构建npm的时候一些校验造成的我现在试试能不能在小程序里面运行zxing-wasm 🤓

greenking19 commented 1 month ago

试了，编译npm可以了。但是跑不了小程序的问题吧（真的难受目前只能在webview去跑zxing-wasm，效率一样很快

Sec-ant commented 1 month ago

这是报错的信息
message：发生错误
SyntaxError: parse js file (/zxing-wasm/dist/cjs/full/index.js) failed: Unexpected token (2:12339)
ideVersion: 1.06.2404301
osType: darwin-arm64
time: 2024-05-21 17:21:16
定位到错误了只需要把源代码一下就可以了
try{return pr.grow(t),ie(),1}catch{}}
//replace 👇🏻
try{return pr.grow(t),ie(),1}catch(err){}}
好像是小程序开发程序构建npm的时候一些校验造成的我现在试试能不能在小程序里面运行zxing-wasm 🤓

这个 optional catch binding 语法是在 es2019 之后支持的，可能是因为小程序运行环境还不支持这个语法，这个解决起来比较容易，如果构建工具支持 babel 的话可以用这个插件 https://babeljs.io/docs/babel-plugin-transform-optional-catch-binding 在构建时转译。

试了，编译npm可以了。但是跑不了小程序的问题吧（真的难受

我不太了解小程序开发，但我查了一下小程序这边的用于加载 .wasm 的接口应该是 WXWebAssembly: https://developers.weixin.qq.com/miniprogram/dev/framework/performance/wasm.html 目前 Emscripten 直接的构建产物肯定是不支持这样的环境的，不过适配起来看上去可能不会很困难：

我有空的话会看看

greenking19 commented 1 month ago

好的谢谢🥳 我现在查一下看看非常感谢你

Sec-ant commented 1 month ago

我发现小程序开发使用的工具链比我预想中的限制要多，所以我现在不太确定这个库是否能够适配小程序了。#107 增加了一个专门给小程序调用的包入口 "miniprogram"，去掉了 optional catch binding 语法，但是像是 WXWebAssembly 等这些都还没有替换，而且我预计为了让它能在小程序环境中运行至少还需要 polyfill 很多接口（Blob, fetch 等等)，欢迎有经验的朋友提交 PR~

greenking19 commented 4 weeks ago

我发现小程序开发使用的工具链比我预想中的限制要多，所以我现在不太确定这个库是否能够适配小程序了。#107 增加了一个专门给小程序调用的包入口 "miniprogram"，去掉了 optional catch binding 语法，但是像是 WXWebAssembly 等这些都还没有替换，而且我预计为了让它能在小程序环境中运行至少还需要 polyfill 很多接口（Blob, fetch 等等)，欢迎有经验的朋友提交 PR~

不好意思，刚看到comment 是的，我觉得限制好多，好像第三方npm包里面带有wasm的话，用微信开发工具构建npm的时候就会报错

greenking19 commented 4 weeks ago

我看到了你发了一个wx版本的，非常感谢！我明天试试看我对wasm经验不是很多，可能提供不了很多帮助

Sec-ant / zxing-wasm

我想在微信小程序里面集成zxing-wasm，可以直接调用wasm文件吗？ #106