之前以為掃碼很復(fù)雜斤葱，后面找到了一個(gè)最簡單的掃碼功能赫蛇，但是H5頁面只能用微信打開召廷，其他瀏覽器不支持。
- 原理：在本頁跳轉(zhuǎn)到第三方網(wǎng)站http://sao315.com/w/api/saoyisao账胧，掃完后再跳轉(zhuǎn)回到本頁面竞慢，跳轉(zhuǎn)回來的頁面會帶有二維碼的路徑參數(shù)。
- 例如：如果本頁面是localUrl治泥，可以用a元素跳轉(zhuǎn)（href為http://sao315.com/w/api/saoyisao?redirect_uri=本頁面地址）筹煮，也可以用location.href跳轉(zhuǎn)（我用的就是這個(gè)），掃完后跳轉(zhuǎn)回來的頁面就是localUrl?qrresult=xxxx居夹。路徑參數(shù)qrresult败潦，值xxxx就是二維碼字符串本冲。
過程很簡單，2步就可以了劫扒。
步驟一：掃一掃
我項(xiàng)目中用的是vue檬洞，點(diǎn)擊掃一掃時(shí)調(diào)用scanCode方法，其中redirect_uri參數(shù)是自己本頁面地址（去掉路徑參數(shù)的）沟饥，以確保掃碼回來后準(zhǔn)確跳到本頁面（不傳redirect_uri有可能跳錯(cuò)頁面）添怔。
is_weixn() {
return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
},
scanCode() {
if (!this.is_weixn()) {
alert('請用微信打開頁面，掃碼功能僅支持微信頁面')
return
}
sessionStorage.setItem('isInSerach', '1')
let hrefStr = location.href
let href = hrefStr
if (hrefStr.indexOf('?') !== -1) {
href = hrefStr.split('?')[0]
}
location.href = `http://sao315.com/w/api/saoyisao?redirect_uri=${encodeURIComponent(href)}`
},
步驟二：獲取掃到的二維碼數(shù)據(jù)
我這里直接在mounted里調(diào)用initData方法贤旷，用獲取vue-router的路徑參數(shù)qrresult广料，其中code就是獲取到的二維碼。如果不用vue幼驶，也可以在頁面剛加載完的時(shí)候艾杏，用原生的location獲取本頁面地址及和路徑參數(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 {
//沒有掃碼成功
alert('二維碼內(nèi)容格式不對盅藻，請掃描正確的二維碼')
}
sessionStorage.removeItem('isInSerach')
}
},
