之前以為掃碼很復(fù)雜辈双，后面找到了一個(gè)最簡(jiǎn)單的掃碼功能邀跃，但是H5頁(yè)面只能用微信打開(kāi)霹俺，其他瀏覽器不支持谐宙。
- 原理：在本頁(yè)跳轉(zhuǎn)到第三方網(wǎng)站https://www.996315.com/api/scan/
他挎，掃完后再跳轉(zhuǎn)回到本頁(yè)面筝尾，跳轉(zhuǎn)回來(lái)的頁(yè)面會(huì)帶有二維碼的路徑參數(shù)。 - 例如：如果本頁(yè)面是localUrl办桨，可以用a元素跳轉(zhuǎn)（href為https://www.996315.com/api/scan/?redirect_uri=本頁(yè)面地址）筹淫，也可以用location.href跳轉(zhuǎn)（我用的就是這個(gè)），掃完后跳轉(zhuǎn)回來(lái)的頁(yè)面就是localUrl?qrresult=xxxx呢撞。路徑參數(shù)qrresult损姜，值xxxx就是二維碼字符串饰剥。
過(guò)程很簡(jiǎn)單，2步就可以了摧阅。
步驟一：掃一掃
我項(xiàng)目中用的是vue汰蓉，點(diǎn)擊掃一掃時(shí)調(diào)用scanCode方法，其中redirect_uri參數(shù)是自己本頁(yè)面地址（去掉路徑參數(shù)的）棒卷，以確保掃碼回來(lái)后準(zhǔn)確跳到本頁(yè)面（不傳redirect_uri有可能跳錯(cuò)頁(yè)面）顾孽。
is_weixn() {
return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
},
scanCode() {
if (!this.is_weixn()) {
alert('請(qǐng)用微信打開(kāi)頁(yè)面，掃碼功能僅支持微信頁(yè)面')
return
}
sessionStorage.setItem('isInSerach', '1')
let hrefStr = location.href
let href = hrefStr
if (hrefStr.indexOf('?') !== -1) {
href = hrefStr.split('?')[0]
}
location.href = `https://www.996315.com/api/scan/?redirect_uri=${encodeURIComponent(href)}`
},
步驟二：獲取掃到的二維碼數(shù)據(jù)
我這里直接在mounted里調(diào)用initData方法比规，用獲取vue-router的路徑參數(shù)qrresult若厚，其中code就是獲取到的二維碼。如果不用vue苞俘，也可以在頁(yè)面剛加載完的時(shí)候盹沈，用原生的location獲取本頁(yè)面地址及和路徑參數(shù)qrresult。
initData() {
let isInSerach = sessionStorage.getItem('isInSerach')
if (isInSerach) {
let code = this.$route.query.qrresult
if (code) {
this.form.serialNumber = code
this.searchInfo('ruleForm')
}
else {
//沒(méi)有掃碼成功
alert('二維碼內(nèi)容格式不對(duì)吃谣，請(qǐng)掃描正確的二維碼')
}
sessionStorage.removeItem('isInSerach')
}
},
