這是我第一次公眾號(hào)開(kāi)發(fā)，本以為看著微信官方文檔直接復(fù)制粘貼就好了，沒(méi)想到是我天真了，爬過(guò)一個(gè)坑又入一個(gè)坑！就這么一個(gè)簡(jiǎn)單的事，竟然搞了一下午，所以寫(xiě)了這篇文章，希望可以幫到大家！

第一步：引入 weixin-js-sdk

方式1：靜態(tài) html 引入

直接在 html 文件內(nèi)，使用 script 引入：

方式二：vue 單頁(yè)面//可以在主入口文件index.html內(nèi)引入//使用頁(yè)面通過(guò)window.wx方式訪問(wèn)wx模塊

或者

//安裝npminstallweixin-js-sdk//引入importwxfrom'weixin-js-sdk'

第二步：權(quán)限驗(yàn)證配置

wx.config({debug:true,//開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。appId:'xxxx',//必填，公眾號(hào)的唯一標(biāo)識(shí)timestamp:'xx',//必填，生成簽名的時(shí)間戳nonceStr:'xx',//必填，生成簽名的隨機(jī)串signature:'xx',//必填，簽名jsApiList:['scanQRCode']//必填，需要使用的JS接口列表});

timestamp,nonceStr,signature 重要信息請(qǐng)根據(jù)自己的公眾號(hào)信息去獲取。需要注意的是 debug 調(diào)試的時(shí)候，設(shè)置為 true ，會(huì)自動(dòng)彈出配置成功或失敗信息，調(diào)試時(shí)可以借助它。

第三步：調(diào)用掃一掃接口

我們?cè)谛枰陌粹o處，點(diǎn)擊事件處開(kāi)始調(diào)用掃碼接口，如：

scaneMethod(){varua=navigator.userAgent.toLowerCase()varisWeixin=ua.indexOf('micromessenger')!==-1if(!isWeixin){alert('請(qǐng)用微信打開(kāi)連接，才可使用掃一掃')}window.wx.scanQRCode({needResult:1,//默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，scanType:['qrCode','barCode'],//可以指定掃二維碼還是一維碼，默認(rèn)二者都有success:function(res){//掃碼成功，跳轉(zhuǎn)到二維碼指定頁(yè)面（res.resultStr為掃碼返回的結(jié)果）//location.href=res.resultStr;varscan=res.resultStralert(scan)}},error:function(res){if(res.errMsg.indexOf('function_not_exist')>0){alert('當(dāng)前版本過(guò)低，請(qǐng)進(jìn)行升級(jí)')}},})}

做了一個(gè)判斷處理，檢查只有微信瀏覽器，其他瀏覽器不可以調(diào)用：

varisWeixin=ua.indexOf('micromessenger')!==-1if(!isWeixin){alert('請(qǐng)用微信打開(kāi)連接，才可使用掃一掃')}

第四步：真機(jī)測(cè)試

先聲明一下，我的項(xiàng)目是 vue 單頁(yè)面。

真機(jī)測(cè)試的時(shí)候，一直在提示：

errMsg:config:invalid signature

中文叫做簽名無(wú)效。

查找原因是因?yàn)槲业暮灻@取來(lái)和官方 微信 js 接口簽名校驗(yàn)工具獲取來(lái)的數(shù)據(jù)不一樣，很明顯獲取的簽名有問(wèn)題，是因?yàn)槲业?url 配置和前端調(diào)起接口的 url 不一致造成的。

第五步：蘋(píng)果手機(jī)測(cè)試

蘋(píng)果手機(jī)真機(jī)測(cè)試，提示錯(cuò)誤信息為：

the permission value is offline verifying

翻譯為中文：權(quán)限值正在脫機(jī)驗(yàn)證

這個(gè)錯(cuò)誤原因是 config 沒(méi)有正確執(zhí)行。

又繼續(xù)去檢查簽名的問(wèn)題，最后發(fā)現(xiàn)是后臺(tái)接口字段寫(xiě)錯(cuò)了，欲哭無(wú)淚，總之還是簽名信息錯(cuò)誤。

第六步：安卓正常，蘋(píng)果點(diǎn)擊無(wú)反應(yīng)

用安卓測(cè)試的時(shí)候，竟然好了，完美展示掃碼結(jié)果，以為要好了。使用 ios 測(cè)試的時(shí)候，竟然發(fā)現(xiàn)點(diǎn)擊的時(shí)候沒(méi)有任何反應(yīng)。

找了半天原因，是因?yàn)?window.location.href 不同造成的。

alert(window.location.href)

測(cè)試結(jié)果：

安卓：https://hp.******.net/

IOS：https://hp.******.net//

IOS 手機(jī)就是因?yàn)?url 與簽名配置處的 url 不同，所以導(dǎo)致 config 執(zhí)行失敗。究其原因是因?yàn)槲业?vue-router 是 hash 模式。

解決方案：把我的 hash 模式換成 history 模式。記得后臺(tái)也需要配置 nginx 。

第七步：IOS 掃碼無(wú)反應(yīng)

當(dāng) IOS 能調(diào)起接口的那一刻，我以為要成功了，哪知道它就是要與 安卓 與眾不同，掃碼之后沒(méi)有任何反應(yīng)，但是如果你快速地連續(xù)多掃幾次就會(huì)出現(xiàn)結(jié)果。

你就說(shuō)要命不？網(wǎng)上查找了半天，看見(jiàn)有的人說(shuō)有延時(shí)，最后想干脆加個(gè)延時(shí)算了。

letisAndriod=ua.indexOf('andriod')!==-1window.wx.scanQRCode({needResult:1,//默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，scanType:['qrCode','barCode'],//可以指定掃二維碼還是一維碼，默認(rèn)二者都有success:function(res){//掃碼成功，跳轉(zhuǎn)到二維碼指定頁(yè)面（res.resultStr為掃碼返回的結(jié)果）//location.href=res.resultStr;varscan=res.resultStrif(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('當(dāng)前版本過(guò)低，請(qǐng)進(jìn)行升級(jí)')}},})

果然加了延時(shí)之后就好了。

第八步：掃碼結(jié)果處理

可能存在問(wèn)題：

1、iOS設(shè)備掃碼正常，Android設(shè)備掃碼后沒(méi)反應(yīng) 2、Android設(shè)備掃碼正常，iOS設(shè)備掃碼后沒(méi)反應(yīng)

原因：微信開(kāi)發(fā)文檔并沒(méi)有說(shuō)清楚，其實(shí)在微信后臺(tái)可能是維護(hù)了2個(gè)接口， 或者是對(duì)設(shè)備類型進(jìn)行了區(qū)別，總之在回調(diào)函數(shù)中返回的結(jié)果封裝對(duì)象并不是同一個(gè)， 所以這要求我們也進(jìn)行相應(yīng)的處理， 不然就會(huì)出現(xiàn)上面這種默認(rèn)奇妙的問(wèn)題。

IOS 返回結(jié)果：

{err_Info:'success'，resaultStr:'XX',errMsg:'scanQRCode:ok'}

Android 結(jié)果：

{resaultStr:'XX',errMsg:'scanQRCode:ok'}

第九步：修改路由

本以為 蘋(píng)果安卓手機(jī)都能夠正常掃碼，沒(méi)問(wèn)題了。但是領(lǐng)導(dǎo)換需求了，之前是掃碼放到外邊，可以匿名掃。現(xiàn)在要修改成登錄之后才可以掃碼。

我就把路由修改了一下，先在登錄頁(yè)登錄成功之后，再進(jìn)入掃碼頁(yè)，后臺(tái)也同步修改了 url 地址，修改完測(cè)試發(fā)現(xiàn)：

安卓的一切正常。

蘋(píng)果手機(jī)壞了！

奔潰了，看看錯(cuò)誤提示：noPermissionJsApi:[],errMsg:"config:ok"。

確定之后有一個(gè)錯(cuò)誤提示。

errMsg:scanQRCode:the perssion value is offline verifying

一頓百度猛如虎，半天原地打轉(zhuǎn)轉(zhuǎn)！

有前邊一次經(jīng)驗(yàn)教訓(xùn)，我就又去找地址的原因。最后發(fā)現(xiàn)是竟然 $router.push 的跳轉(zhuǎn)影響了我的 url ，在 IOS 上的 push 跳轉(zhuǎn)不能寫(xiě)入瀏覽器的地址欄，但是安卓可以，導(dǎo)致安卓和 ios 跳轉(zhuǎn)之后的地址不同，所以 ios 失敗了。

解決辦法：

$router.push('/i')//修改成了window.location=window.location.protocol'//'window.location.host'/i'

此時(shí)就正常運(yùn)行了。這下滿足項(xiàng)目要求了，不會(huì)再出什么幺蛾子了！

微信官方開(kāi)發(fā)文檔： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4