微信公眾號(hào)中，要開發(fā)掃一掃功能，說(shuō)復(fù)雜也不算復(fù)雜，主要就是坑比較多，在使用微信的掃一掃之前，我已經(jīng)試過(guò)第三方的掃一掃，但是沒(méi)有成功，所以還是轉(zhuǎn)回來(lái)用微信的的掃一掃，具體的代碼并不多，過(guò)程大致就是這樣
在微信公眾平臺(tái)該配置的應(yīng)該都配置了，我這邊是后臺(tái)配置，所以直接跳過(guò)，不多說(shuō)，直接上代碼：
首先npm安裝微信js-sdk：
npm install weixin-js-sdk
在需要的頁(yè)面引入：
import wx from 'weixin-js-sdk'
配置config：
wxconfigInit() {
const url = (window.location.href).split('#')[0] // 動(dòng)態(tài)獲取當(dāng)前頁(yè)的#之前的url地址，這個(gè)是有https:// 或者h(yuǎn)ttp://的
// 調(diào)用后端接口返回，配置需要的結(jié)果
return room.getJSSDKConfig({ apis: 'scanQRCode', url: url, debug: 1 })
.then(res => {
const data = JSON.parse(res.data[0])
wx.config({
debug: false, // 開啟調(diào)試模式,
appId: data.appId, // 必填，企業(yè)號(hào)的唯一標(biāo)識(shí)，此處填寫企業(yè)號(hào)corpid
timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: data.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: data.signature, // 必填，簽名，見附錄1
jsApiList: [ 'checkJsApi', 'scanQRCode' ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
})
})
.catch(err => {
console.log(err.msg)
})
},
我的是在頁(yè)面創(chuàng)建的時(shí)候調(diào)用上面那個(gè)方法
created() {
this.wxconfigInit()
}
最后點(diǎn)擊事件去處理調(diào)用微信掃一掃
isSearchClick() {
wx.ready(() => {
wx.checkJsApi({ // 這里是判斷當(dāng)前客戶端版本是否支持指定JS接口
jsApiList: ['scanQRCode'],
success: function(res) { // 返回的結(jié)果大致如這樣{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
if (res.checkResult.scanQRCode === true) {
wx.scanQRCode({ // 微信掃一掃接口
needResult: 1, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
scanType: ['qrCode', 'barCode'], // 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
success: function(res) {
const result = res.resultStr // 當(dāng)needResult 為 1 時(shí)，掃碼返回的結(jié)果
window.location.href = result // 此處掃碼結(jié)果直接跳轉(zhuǎn)鏈接
}
})
} else {
alert('抱歉,當(dāng)前客戶端版本不支持掃一掃')
}
},
fail: function(res) { // 檢測(cè)getNetworkType該功能失敗時(shí)處理
alert('fail' + res)
}
})
})
wx.error(res => {
alert('出錯(cuò)了：' + res.errMsg)
})
},
以上就是親測(cè)能調(diào)用掃一掃，我的項(xiàng)目是最后完成跳轉(zhuǎn)頁(yè)面
上面的代碼是最終版，但是之前在寫的時(shí)候頁(yè)遇到過(guò)問(wèn)題，花費(fèi)了我大半天時(shí)間去找錯(cuò)
第一個(gè)錯(cuò)誤，如
這個(gè)錯(cuò)誤也就是config參數(shù)全是undefined，但是后端接口又返回參數(shù)了的，怎么回事嘞，仔細(xì)檢查，結(jié)果是后端返回的參數(shù)是json字符串，結(jié)果轉(zhuǎn)化一哈就好了
上一個(gè)問(wèn)題解決了，又來(lái)新問(wèn)題了，也就是控制臺(tái)正常打印wx.config begin 但是wx.config end 無(wú)論如何都要報(bào)錯(cuò)
報(bào)錯(cuò)報(bào)的是簽名無(wú)效，然后我也去網(wǎng)上各種找了為啥抱這個(gè)錯(cuò)誤，但是網(wǎng)上回答的那些，比如
上面的這些問(wèn)題都確定了n邊，但還是沒(méi)解決問(wèn)題，最后，我發(fā)現(xiàn)后端返回的參數(shù) jsApiList的數(shù)組里面只有一個(gè)，
下面使用了兩個(gè)接口，一個(gè)是檢查當(dāng)前客戶端支持不支持指定JS接口，另一個(gè)就是掃碼的JS接口，之前我就是取的后端返回的那一個(gè)值，后
來(lái)改為寫死的兩個(gè)接口，后面那個(gè)在微信的調(diào)試工具就不報(bào)錯(cuò)了，對(duì)了，測(cè)試工具的地址欄不能是本地的地址，必須是線上的地址，否則還是要報(bào)錯(cuò)
但和之前報(bào)錯(cuò)不一樣了，之前錯(cuò)誤碼是63002，現(xiàn)在的是40048，線上的地址就不會(huì)報(bào)錯(cuò)，顯示如下
最后還有一個(gè)小問(wèn)題，就是在手機(jī)上測(cè)試的時(shí)候，自己看了代碼確定不是自己寫的alert彈框，但是每一步操作都會(huì)彈框，原因是因?yàn)?，在配置的時(shí)候debug的值為true，改為false就好了
以上代碼親測(cè)可用，有不懂的歡迎下方留言，我們一起研究學(xué)習(xí)。
