前言背景

最近开发个小程序需要有安全验证功能，大概业务流程就是一进来小程序唤起安全验证页面 -> 然后点击确认发送给小程序端并关闭当前页面。看似比较简单但是踩了一下午坑

webview

onMessage

经过查看找到啦webview api，可以打开一个h5页面，然后看了下webview 中的配置项

发现onMessage方法可以接收postMessage的方法。开始撸码

但是这个特定时机我确实没有立即理解上去，我以为和iframe差不多，是实时的，结果试了一下不行，才知道这个特定时机的关键。。。。

解读特定时机“后退、组件销毁、分享”

那么如何能达到这个特定时机呢？分享首先排除在外，所以只能思考如何实现组件销毁和后退，第一个思路就是h5怎么实现后退呢，或者跳转到某一页，所以发现可以在h5调用后退方法，但是后退只能是页面所以安全认证组件不能写在tabbar里面，只能在写一个页面然后打开该页面才可以。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
<body>
  <button onclick="openBack()">点击我返回小程12</button>
</body>
<script>
  function openBack() {
    console.log('gggg')
    // wx.miniProgram.navigateTo('/pages/SecurityCheck/index')
    wx.miniProgram.postMessage({ 
			data:  { 
				name: 'name',
				age: 12
			}
		})
    wx.miniProgram.navigateBack()
  }
</script>
</html>

看到注释开始用了wx.miniProgram.navigateTo，开始以为直接跳转到某一个路由就可以了，但是事实证明还是不能够，因为我们要跳转的是tabbar页面，所以只需要后退就可以。

本以为踩坑到此结束，但是点击死活没反应，小程序代码如下

点击没反应就开始排查，最后发现是打开页面的方法有误。

打开页面方式

路由有以上几个方法

switchtab，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。因为打开是新的页面所以不行
relaunch，开始我就用的这个方法，但是这个是关闭所有页面，打开到应用内的某个页面，所以他就没有上一页一说啦。

....

所以最后找到了navigateTo方法，才算踩坑结束

总结

必须是打开一个新的页面，用navigateTo
postmessage后在h5中返回上一页。

原文地址：https://www.cnblogs.com/wenbodeboke/p/15215515.html

小程序打开h5后返回与postmessage不实时接收问题

前言背景

webview

onMessage

解读特定时机“后退、组件销毁、分享”

打开页面方式

总结