厲害了網頁掃碼，所有方法都給你總結到這了！趕緊收藏

前端人發表於2022-04-02
網頁

最近做一個專案，要通過掃一掃查詢對應的資訊，由於現在已經有一部分二維碼已被生成，為了兼顧已生成的二維碼，所以需要使用網頁的掃一掃功能去完成專案。

專案使用技術棧：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 時，掃碼返回的結果
 }
});

 

具體的實現步驟以及可能遇到的問題都總結到《手把手教你呼叫微信掃一掃！三分鐘包會》，需要的自行查閱。

相關文章