最近做一個項目，要通過掃一掃查詢對應的信息，由於現在已經有一部分二維碼已被生成，為了兼顧已生成的二維碼，所以需要使用網頁的掃一掃功能去完成項目。
項目使用技術棧：vue2
方案一、js 原生
熱心的同事幫我已經找好了網頁掃一掃 DEMO，給我說已經測試過了，Andriod 和 IOS 都可以正常使用。
使用 QRScanner 插件
其原理是通過
navigator.mediaDevices.getUserMedia 來獲取用戶的攝像頭使用權限：
navigator.mediaDevices.getUserMedia(constraints) .then(res => { }) .catch(err => { })
使用自己的 蘋果11 測試完全正常，放置服務器上，讓同事掃碼的時候，真的是異常百態！存在的問題：
1、網頁必須使用瀏覽打開，不可以使用微信內置瀏覽器。如果是微信打開，會提示 “對不起，未識別到掃描設備”。
2、有些手機，攝像頭一直是前置攝像頭，通過 facingMode 設置無效：
{ facingMode: { exact: "environment" } }
3、非手機內置瀏覽器，如：QQ、UC、百度等瀏覽器APP內，會存在找不到掃瞄設備。
4、最重要的是用戶體驗差。用戶需要在瀏覽器打開，授權之后，才能進行掃碼。
5、開發需要調試的設備較多。
navigator.mediaDevices.getUserMedia 兼容性差。
方案二、vue-qr 插件
官方文檔：
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 插件
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
在 wx 使用頁面處，可以直接通過 window.wx 引用。
引入方式2：
npm install weixin-js-sdk
在需要使用的頁面處，引入 wx 模塊：import wx from 'weixin-js-sdk'
- 2、配置
wx.config({ debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 appId: '', // 必填，公眾號的唯一標識 timestamp: , // 必填，生成簽名的時間戳 nonceStr: '', // 必填，生成簽名的隨機串 signature: '',// 必填，簽名 jsApiList: [] // 必填，需要使用的JS接口列表 });
- 3、調用方法
wx.scanQRCode({ needResult: 0, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果， scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有 success: function (res) { var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果 } });
具體的實現步驟以及可能遇到的問題都總結到《手把手教你調用微信掃一掃！三分鍾包會》，需要的自行查閱。