二维码在线识别（在线识别二维码的工具和方法）

　　最近做一个项目，要通过扫一扫查询对应的信息，由于现在已经有一部分二维码已被生成，为了兼顾已生成的二维码，所以需要使用网页的扫一扫功能去完成项目。

　　项目使用技术栈：vue2

　　热心的同事帮我已经找好了网页扫一扫 DEMO，给我说已经测试过了，Andriod 和 IOS 都可以正常使用。

　　使用 QRScanner 插件

　　其原理是通过

　　navigator.mediaDevices.getUserMedia 来获取用户的摄像头使用权限：

　　使用自己的 苹果11 测试完全正常，放置服务器上，让同事扫码的时候，真的是异常百态！存在的问题：

　　1、网页必须使用浏览打开，不可以使用微信内置浏览器。如果是微信打开，会提示 “对不起，未识别到扫描设备”。

　　2、有些手机，摄像头一直是前置摄像头，通过 facingMode 设置无效：

　　3、非手机内置浏览器，如：QQ、UC、百度等浏览器APP内，会存在找不到扫瞄设备。

　　4、最重要的是用户体验差。用户需要在浏览器打开，授权之后，才能进行扫码。

　　5、开发需要调试的设备较多。

　　navigator.mediaDevices.getUserMedia 兼容性差。

　　官方文档：

　　https://www.npmjs.com/package/vue-qr

　　该插件不仅支持 vue2 ，还支持 vue3 。功能强大，能够生成二维码，还能够扫描、识别二维码，解析二维码。

　　git 地址：

　　https://github.com/MuGuiLin/QRCode有一个 HTML 版本。有一个 vue.js 版本。

　　测试地址：Demo：

　　https://muguilin.github.io/QRCode

　　存在问题：

　　1、网页必须使用浏览打开，不可以使用微信内置浏览器。如果是微信打开，会提示 “对不起，未识别到扫描设备”。

　　2、非手机内置浏览器，如：QQ、UC、百度等浏览器APP内，会存在找不到扫瞄设备。

　　3、最重要的是用户体验差。用户需要在浏览器打开，授权之后，才能进行扫码。

　　我把测试地址发到公司群，让同事帮我测试的时候，我发现程序员测试都说没问题，非程序员基本都是直接使用微信，点击扫一扫的时候，统一都是：“ 对不起，未识别到扫描设备 ”。转念一想，扫一扫好像是给开发同事做的。

　　转换思路，让用户在微信内直接点进去之后就可以进行扫码！所以选择 微信网页开发 -> 调用微信扫一扫。

　　优点：

　　1、用户使用方便，直接可以使用微信扫码。

　　2、开发方便，不用再考虑兼容安卓和ios的各种浏览器。

　　实现步骤：1、引入

　　引入方式1：

　　index.html 入口文件处引入 js 插件

　　在 wx 使用页面处，可以直接通过 window.wx 引用。

　　引入方式2：

　　npm install weixin-js-sdk

　　在需要使用的页面处，引入 wx 模块：import wx from ‘weixin-js-sdk’2、配置

　　3、调用方法

　　具体的实现步骤以及可能遇到的问题都总结到《手把手教你调用微信扫一扫！三分钟包会》，需要的自行查阅。