Progressive Web App (PWA) 二维码扫描器

Posted 2023-02-16

【中文标题】Progressive Web App (PWA) 二维码扫描器

【英文标题】：Progressive Web App (PWA) QR Code Scanner

【发布时间】：2019-02-14 18:40:46

【问题描述】：

我想在我的渐进式 Web 应用程序（也是 PWA）中使用 QR Code Scanner。

用法：想象有一家商店，里面有很多商品和产品的二维码。每当用户扫描二维码时，我都想将商品添加到购物车中。

问题：是否有任何组件可以实现它？怎么样？

【问题讨论】：

您可以添加任何详细信息，例如：使用的代码，遇到的错误问题吗？ How do I ask a good question?，How to create a Minimal, Complete, and Verifiable example。向社区展示您的尝试。当您使用它时，您可以查看许多 GitHub 存储库作为您的应用程序的参考。在这里查看一些：QR Code Scanner 和 pwa-qr-code-scanner。

许多框架在 android 版本上运行良好。 ios 12 版本在集成二维码扫描器方面存在一些问题。有人有这方面的更新吗？

【参考方案1】：

我认为这些项目可以帮助你：

二维码扫描仪

网址：https://github.com/code-kotis/qr-code-scanner

支持的浏览器：Google Chrome、Firefox、Opera（桌面版和移动版）、Microsoft Edge（（Insider Preview build）），现在也支持 iOS

pwa-qr-code-scanner

网址：https://github.com/Minishlink/pwa-qr-code-scanner

支持的浏览器：Google Chrome、Firefox、Microsoft Edge

【讨论】：

嗨@Geoffrey，非常感谢您的建议，我在 Adroid 和 iOS 上尝试了您提到的两个版本。我特别喜欢第一个，因为它适用于两者，但由于某种原因，当我将它与低性能 Android 手机一起使用时，它告诉我“Chrome 删除了该页面的一些内容，因为它使用了太多内存”。你知道我该如何解决吗？

嗨@daniel，不幸的是，我认为二维码扫描器将无法在所有设备上运行，特别是如果它是低成本设备。也许您可以在某些设备上禁用此功能或显示弹出窗口向用户解释为什么此功能不起作用。你也可以试试这个谷歌网站来帮助你解决内存问题并优化它：developers.google.com/web/tools/chrome-devtools/memory-problems希望这些信息对你有所帮助。

@GeoffreyLalloué 使用此代码我可以扫描 aadhar 卡 QR 码吗？我尝试使用此应用进行扫描，但它没有扫描它

【参考方案2】：

我找到了 zxing-js （斑马线库）真的非常有用且非常灵活，甚至比他们的 ngx-scanner 还要好

在这里您可以找到包含大量示例

的库

https://github.com/zxing-js/library

【参考方案3】：

这个并不落后，它是开源的。

https://github.com/jbialobr/JsQRScanner

【参考方案4】：

我刚刚使用 Dynamsoft javascript 条形码 SDK 创建了一个简单的 PWA 项目。如果你不介意它是一个商业 SDK，你可以尝试一下：https://github.com/dynamsoft-dbr/javascript-barcode/tree/6.x/examples/pwa。

这是我的截图：

手机

桌面

或者，您可以使用开源项目 ZXing。我已经向 GitHub 提交了一些示例：https://github.com/yushulx/zxing-cpp-emscripten。将 zxing.js 集成到您的 PWA 项目中以扫描二维码非常容易。

【讨论】：

请说明您是否以任何方式链接到上述商业 SDK。所有者？员工？关系？否则我认为你符合关于解释的规则，而不仅仅是链接。

@Yunnosch 显然我是 Dynamsoft 的员工。不然怎么把源代码提交到repo？

效果很好，但是太贵了！

太贵了...