前言背景
最近開發個小程序需要有安全驗證功能，大概業務流程就是 一進來小程序喚起安全驗證頁面 -> 然后點擊確認發送給小程序端並關閉當前頁面。看似比較簡單但是踩了一下午坑
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中返回上一頁。