探测小程序返回到webview页面主要有两个部分:小程序侧的操作和webview侧的操作。
小程序侧的操作
步骤一:调用小程序JSAPI
小程序提供了navigateBackMiniProgram的JSAPI,可以在小程序内部调用,从而返回webview页面。
wx.navigateBackMiniProgram({
success: function() {
console.log('返回webview页面成功');
},
fail: function() {
console.log('返回webview页面失败');
}
});
步骤二:监听小程序的返回事件
如果用户在小程序内部点击了返回按钮,将会触发小程序内部的返回事件。我们需要监听小程序返回事件,一旦触发,就可以通知webview页面执行后续操作。
wx.onAppRouteBack(function(res) {
if (res.backTarget === 'webView') {
console.log('已返回webview页面');
// 此处可使用postMessage方法,向webview页面发送消息
}
});
在监听返回事件时,需要判断回退的目标是否是webview页面,如果是,则可以执行相关操作。
Webview侧的操作
步骤一:调用Webview API
在webview页面中,可以使用自定义协议的形式,发送消息给小程序。我们需要调用Webview提供的API,发送消息给小程序,从而告知小程序返回了webview页面。
// 发送自定义协议给小程序
window.WeixinJSBridge.invoke('sendAppMessage', {
title: '返回调用',
link: 'customProtocol://returnToWebView'
}, function(res) {
console.log(res);
});
不同的应用场景下,自定义协议的格式会有所不同,需要根据具体情况进行调整。
步骤二:监听Webview事件
在调用完Webview API后,需要监听Webview事件,在收到小程序的响应后执行后续操作。
// 监听小程序的响应事件
window.addEventListener('message', function(event) {
if(event.origin !== '小程序的appID') return;
if(event.data === '已返回webview页面') {
console.log('已返回webview页面');
// 执行后续操作
}
});
在监听Webview事件时,需要判断消息的来源是否是小程序,并且消息内容是否为已返回webview页面,才能进行后续操作。
示例说明
示例一:H5页面打开小程序,返回H5页面
在H5页面中,需要打开小程序。当用户点击小程序内部的返回按钮,返回到H5页面时,需要在H5页面中监听事件,执行后续操作。
// 打开小程序
wx.miniProgram.navigateTo({url: '/pages/index/index'});
// 在H5页面中监听事件
window.addEventListener('message', function(event) {
if(event.origin !== '小程序的appID') return;
if(event.data === '已返回webview页面') {
console.log('已返回H5页面');
// 执行后续操作
}
});
示例二:微信公众号文章打开小程序,返回公众号文章
在微信公众号文章中,需要打开小程序。当用户点击小程序内部的返回按钮,返回到公众号文章时,需要在公众号文章中监听事件,执行后续操作。
// 发送自定义协议给小程序
window.WeixinJSBridge.invoke('sendAppMessage', {
title: '返回调用',
link: 'customProtocol://returnToWeChatArticle'
}, function(res) {
console.log(res);
});
// 在公众号文章中监听事件
window.addEventListener('message', function(event) {
if(event.origin !== '小程序的appID') return;
if(event.data === '已返回公众号文章') {
console.log('已返回公众号文章');
// 执行后续操作
}
});
以上就是如何探测小程序返回到webview页面的完整攻略,需要注意的是,不同的场景下,需要根据实际情况进行调整。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解如何探测小程序返回到webview页面 - Python技术站