详解如何探测小程序返回到webview页面

探测小程序返回到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页面的完整攻略，需要注意的是，不同的场景下，需要根据实际情况进行调整。

阅读剩余 58%