webviewSince there was no return button in the previous encounter , although I jumped out of the pit. Solution: "The perfect solution for the applet webview without the back button after jumping to the page"
However, the road to pitting small programs is not over. In the official account webpage, through the configuration APPIDand appsecretcan normally call the WeChat scan, but how to webviewcall the scan in the applet? What happens to the data after scanning? Mini program page processing? Or pass it to H5the page for processing?
As a developer for search engines, the first thing I encounter problems is of course Baidu and Google! But this method, which was always invincible in the past, suddenly failed! I rummaged through the entire browser, and turned the entire Internet upside down, but "can't find" the solution (it is very likely that my search level is too poor, and I am not proficient in the development of search engine-oriented skills)!
In fact, it’s not that I didn’t find it, it’s just that the one I found didn’t suit me and didn’t solve my problem. For example, the following article (there are still a few advertisements that won’t be mentioned): “WeChat applet webview directly calls WeChat to scan
related As mentioned in the article "Function" , you can directly use the sum
of the applet and replace the sum of the official account . But I can't use it all the time. Could it be that Tencent thinks I'm handsome and has become jealous and deliberately targeted me? Or is it that the buddy who wrote the background got the logic wrong? (Well, it's a power failure) Anyway, it just doesn't work, and an error is reported .APPIDappsecretAPPIDappsecretInvalid signature
In desperation, he had to find another way. As I mentioned in the previous article, you can H5use wx.miniProgram.navigateTothe method on the page to jump to the applet page. So, you have to make good use of this method and do something.
Think about it, since you can jump to the applet, and the applet itself is very convenient to call scan, just use it wx.scanCode. So that is to say, when the user clicks to scan the code to operate. We can jump to the applet page first, onloadand call it immediately when we are on the page wx.scanCode, which achieves H5the effect of clicking the page button to arouse the scanning function. Then return the scan code result to the page in the form of set webviewparameters url, and finally process the scan code result H5on the page. H5After analyzing the whole process, it can be said that it is seamless and perfect. In theory, it is completely established. Next, [code - run - see the effect] one-stop service. The like gesture is ready, I am afraid that after watching my next operation, you will be immersed in it, unable to extricate yourself and forget to like.
1. H5 page jump applet
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. The applet page invokes the scan and returns the result of the scan code
Pay special attention to setTimeoutthe function. If you do not use this method to delay the call, you IOS系统will not be able to start the scan in 100%, which should be regarded as a bug in the WeChat applet. As for the delay, you can test it yourself 500ms.
2.1. Callback processing of successful code scanning: redirect to the page, and carry miniType parameter and result parameter
miniType: It is used to distinguish whether it is returned by scanning the code. If the url has this parameter, the result will be obtained. If the url does not have this parameter, no operation will be done. result: scan the code to return the result
2.2. Callback processing of code scanning failure: direct redirection to the page without any parameters
/**
* 生命周期函数--监听页面加载
*/
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. The H5 page receives the scanning result and processes it
this.isMiniProgram((res)=>{//判断是否是小程序页面的回调函数
if (res) {//小程序页面
let miniType = this.$route.query.miniType;
let result = this.$route.query.result;
if (miniType && miniType === 'mini') {
this.scanResult(result);//处理扫码结果
}
}
})
After the above tortuous solutions, webviewthe function of calling WeChat to scan in the applet has been realized. However, there is still a pitfall, that is, when the user invokes the scan function, he does nothing and returns directly! ! ! Then he will see a blank page, which is the page of the applet called Scan, because we have not added anything to this page, so of course it is blank. At present, I am also adding one to this page webview. webviewThe url is the link to call the scan code H5page, so that there will be no blank space.
Please indicate the source for reprinting: https://www.jianshu.com/p/154ffc0abed4
Author: TSY
Personal space: https://www.hxkj.vip