自上一篇遇到webview中沒有返回按鈕之后，雖然跳出坑了。解決方案：《小程序webview跳轉頁面后沒有返回按鈕完美解決方案》
但是，小程序踩坑之路並沒有結束。在公眾號網頁中通過配置APPID和appsecret可以正常調起微信掃一掃，但是，如何在小程序webview中調用掃一掃？掃描之后數據如何處理？小程序頁面處理？還是傳遞給H5頁面處理？
做為一名面向搜索引擎開發的我，遇到問題的第一件事，當然是百度啊，Google啊！可是這種在過去都是無往不利的方法，突然失效了！翻遍整個瀏覽器，並且把整個互聯網都翻了個底朝天，竟然“找不到”解決方案（很有可能是我搜索水平太差，沒有精通面向搜索引擎開發這項技能）！
其實也不算是沒有找到，只是找到的不適合我，並沒有解決我的問題，例如下面這篇（還有幾篇廣告文就不提了）：
《微信小程序webview直接調用微信掃一掃相關功能》
文中提到，直接使用小程序的APPID和appsecret，替換公眾號的APPID和appsecret就可以了。但是這我這始終都沒法用，難道是騰訊覺得我帥，起了妒忌之心，故意針對我嗎？或者說是寫后台的哥們把邏輯搞錯了？（嗯，實力甩鍋）反正就是沒法用，報錯Invalid signature。
無奈之下，只得另尋他法。我在上一篇文章中提到過，可以在H5頁面使用wx.miniProgram.navigateTo方法跳轉到小程序頁面。所以，得好好的利用這個方法，搞點事情。
想想看，既然能跳轉到小程序，而小程序本身調用掃一掃是非常方便的，只需要使用wx.scanCode即可。那么也就是說，當用戶點擊掃碼操作的時候。我們可以先跳轉到小程序頁面，在頁面onload的時候，立馬調用wx.scanCode，也就達到了點擊H5頁面按鈕喚起掃碼功能的效果。然后把掃碼結果，通過設置webview的url參數的形式返回給H5頁面，最后在H5頁面處理掃碼結果。整個流程分析下來，可以說是天衣無縫，非常完美，理論上來說，是完全成立的。接下來，【擼碼--運行--看效果】一條龍服務。點贊手勢准備好，我怕看完我接下來的操作，你們沉浸在其中，無法自拔而忘記點贊了。
1、H5頁面跳小程序
openScanCode() { //打開微信掃一掃
isMiniProgram(wx, (res)=>{//是否為小程序環境
if (res) {//小程序環境
wx.miniProgram.navigateTo({url: '../scanCode/scanCode'});//跳轉到小程序調用微信掃一掃頁面
} else {//非小程序環境（公眾號環境）
//通過jssdk方法調用微信掃一掃，代碼忽略
}
})
},
isMiniProgram(callback) { //是否為小程序環境
//是否在微信環境
if (!isWeixin()) {
callback(false);
} else {
//微信API獲取當前運行環境
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {//小程序環境
callback(true);
} else {
callback(false);
}
})
}
}
2、小程序頁面喚起掃一掃，並對掃碼結果進行返回
特別注意setTimeout函數，如果不使用該方法進行延遲調用，在IOS系統中100%無法調起掃一掃，應該算是微信小程序的BUG，至於延遲多少，就自行測試了，這邊延遲500ms。
2.1、掃碼成功的回調處理：重定向到頁面中，並且攜帶miniType參數和result參數
miniType：用於區分是否為掃碼返回，如果url有該參數則獲取result結果，如果url沒有該參數，則不做任何操作。result：掃碼返回結果
2.2、掃碼失敗的回調處理：直接重定向到頁面，並且不帶任何參數
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function(options) {
//兼容ios微信無法立即調起掃一掃
setTimeout(function () {
wx.scanCode({//調用掃一掃
success: function (res) {//掃碼成功的回調函數
wx.redirectTo({//失敗的話，重定向到頁面中，並且攜帶miniType參數和result參數
url: '../index/index?url=https://www.hxkj.vip?miniType=mini&result=' + res
})
},
error: function (err) {//掃碼失敗的回調函數
console.log('err');
wx.redirectTo({//失敗的話，直接重定向到頁面，並且不帶任何參數
url: '../index/index?url=https://www.hxkj.vip/'
})
}
})
}, 500)
},
3、H5頁面接收掃碼結果，並對其進行處理
this.isMiniProgram((res)=>{//判斷是否是小程序頁面的回調函數
if (res) {//小程序頁面
let miniType = this.$route.query.miniType;
let result = this.$route.query.result;
if (miniType && miniType === 'mini') {
this.scanResult(result);//處理掃碼結果
}
}
})
經過以上的曲折解決辦法，已經實現了在小程序webview調用微信掃一掃的功能。然而還有個坑，那就是，當用戶調起掃一掃時，什么也沒干，直接返回！！！然后他將會看到一個空白的頁面，這個頁面就是調用掃一掃的小程序頁面，因為我們在這個頁面什么都沒加，當然就空白了。目前我是在這個頁面也加一個webview，webview的url就是調用掃碼H5頁面的鏈接，這樣的話，就不會有空白一片了。
轉載請注明出處：https://www.jianshu.com/p/154ffc0abed4
作者：TSY
個人空間：https://www.hxkj.vip