自上一篇遇到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
的ur
l就是呼叫掃碼H5
頁面的連結,這樣的話,就不會有空白一片了。
轉載請註明出處:www.jianshu.com/p/2129d498d… 作者:TSY
喜歡的話,可以關注下我的微信公眾號