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