這是我第一次公眾號開發，本以為看着微信官方文檔直接復制粘貼就好了，沒想到是我天真了，爬過一個坑又入一個坑！就這么一個簡單的事，竟然搞了一下午，所以寫了這篇文章，希望可以幫到大家！
第一步：引入 weixin-js-sdk
- 方式1：靜態 html 引入
直接在 html 文件內，使用 script 引入：
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- 方式二：vue 單頁面
// 可以在主入口文件 index.html 內引入 <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> // 使用頁面通過 window.wx 方式訪問 wx 模塊
或者
// 安裝 npm install weixin-js-sdk //引入 import wx from 'weixin-js-sdk'
第二步：權限驗證配置
wx.config({ debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 appId: 'xxxx', // 必填，公眾號的唯一標識 timestamp: 'xx', // 必填，生成簽名的時間戳 nonceStr: 'xx', // 必填，生成簽名的隨機串 signature: 'xx',// 必填，簽名 jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表 });
timestamp,nonceStr,signature 重要信息請根據自己的公眾號信息去獲取。需要注意的是 debug 調試的時候，設置為 true ，會自動彈出配置成功或失敗信息，調試時可以借助它。
第三步：調用掃一掃接口
我們在需要的按鈕處，點擊事件處開始調用掃碼接口，如：
scaneMethod() { var ua = navigator.userAgent.toLowerCase() var isWeixin = ua.indexOf('micromessenger') !== -1 if (!isWeixin) { alert('請用微信打開連接，才可使用掃一掃') } window.wx.scanQRCode({ needResult: 1, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果， scanType: ['qrCode', 'barCode'], // 可以指定掃二維碼還是一維碼，默認二者都有 success: function (res) { // 掃碼成功，跳轉到二維碼指定頁面（res.resultStr為掃碼返回的結果） // location.href = res.resultStr; var scan = res.resultStr alert(scan) } }, error: function (res) { if (res.errMsg.indexOf('function_not_exist') > 0) { alert('當前版本過低，請進行升級') } }, }) }
做了一個判斷處理，檢查只有微信瀏覽器，其他瀏覽器不可以調用：
var isWeixin = ua.indexOf('micromessenger') !== -1 if (!isWeixin) { alert('請用微信打開連接，才可使用掃一掃') }
第四步：真機測試
先聲明一下，我的項目是 vue 單頁面。
真機測試的時候，一直在提示：
errMsg:config:invalid signature
中文叫做簽名無效。
查找原因是因為我的簽名獲取來和官方 微信 js 接口簽名校驗工具獲取來的數據不一樣，很明顯獲取的簽名有問題，是因為我的 url 配置和前端調起接口的 url 不一致造成的。
第五步：蘋果手機測試
蘋果手機真機測試，提示錯誤信息為：
the permission value is offline verifying
翻譯為中文：權限值正在脫機驗證
這個錯誤原因是 config 沒有正確執行。
又繼續去檢查簽名的問題，最后發現是后台接口字段寫錯了，欲哭無淚，總之還是簽名信息錯誤。
第六步：安卓正常，蘋果點擊無反應
用安卓測試的時候，竟然好了，完美展示掃碼結果，以為要好了。使用 ios 測試的時候，竟然發現點擊的時候沒有任何反應。
找了半天原因，是因為 window.location.href 不同造成的。
alert(window.location.href)測試結果：
安卓：https://hp.******.net/
IOS：https://hp.******.net//
IOS 手機就是因為 url 與簽名配置處的 url 不同，所以導致 config 執行失敗。究其原因是因為我的 vue-router 是 hash 模式。
解決方案：把我的 hash 模式換成 history 模式。記得后台也需要配置 nginx 。
第七步：IOS 掃碼無反應
當 IOS 能調起接口的那一刻，我以為要成功了，哪知道它就是要與 安卓 與眾不同，掃碼之后沒有任何反應，但是如果你快速地連續多掃幾次就會出現結果。
你就說要命不？網上查找了半天，看見有的人說有延時，最后想干脆加個延時算了。
let isAndriod = ua.indexOf('andriod') !== -1
window.wx.scanQRCode({
needResult: 1, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
scanType: ['qrCode', 'barCode'], // 可以指定掃二維碼還是一維碼，默認二者都有
success: function (res) {
// 掃碼成功，跳轉到二維碼指定頁面（res.resultStr為掃碼返回的結果）
// location.href = res.resultStr;
var scan = res.resultStr
if (isAndriod) {
_this.$router.push({ path: '/exam_car', query: { id: scan } })
} else {
setTimeout(() => {
_this.$router.push({ path: '/exam_car', query: { id: scan } })
}, 500)
}
},
error: function (res) {
if (res.errMsg.indexOf('function_not_exist') > 0) {
alert('當前版本過低，請進行升級')
}
},
})
果然加了延時之后就好了。
第八步：掃碼結果處理
可能存在問題：
1、iOS設備掃碼正常，Android設備掃碼后沒反應
2、Android設備掃碼正常，iOS設備掃碼后沒反應
原因：微信開發文檔並沒有說清楚，其實在微信后台可能是維護了2個接口， 或者是對設備類型進行了區別，總之在回調函數中返回的結果封裝對象並不是同一個， 所以這要求我們也進行相應的處理， 不然就會出現上面這種默認奇妙的問題。
IOS 返回結果：
{ err_Info: 'success'， resaultStr: 'XX', errMsg: 'scanQRCode:ok' }
Android 結果：
{ resaultStr: 'XX', errMsg: 'scanQRCode:ok' }
第九步：修改路由
本以為 蘋果安卓手機都能夠正常掃碼，沒問題了。但是領導換需求了，之前是掃碼放到外邊，可以匿名掃。現在要修改成登錄之后才可以掃碼。
我就把路由修改了一下，先在登錄頁登錄成功之后，再進入掃碼頁，后台也同步修改了 url 地址，修改完測試發現：
安卓的一切正常。
蘋果手機壞了！
奔潰了，看看錯誤提示：noPermissionJsApi:[],errMsg:"config:ok"。
確定之后有一個錯誤提示。
errMsg:scanQRCode:the perssion value is offline verifying
一頓百度猛如虎，半天原地打轉轉！
有前邊一次經驗教訓，我就又去找地址的原因。最后發現是竟然 $router.push 的跳轉影響了我的 url ，在 IOS 上的 push 跳轉不能寫入瀏覽器的地址欄，但是安卓可以，導致安卓和 ios 跳轉之后的地址不同，所以 ios 失敗了。
解決辦法：
$router.push('/i')
//修改成了
window.location = window.location.protocol + '//' + window.location.host + '/i'
此時就正常運行了。這下滿足項目要求了，不會再出什么幺蛾子了！
微信官方開發文檔：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4