小程式開啟h5後返回與postmessage不實時接收問題
阿新 • • 發佈：2021-09-01
前言背景
最近開發個小程式需要有安全驗證功能，大概業務流程就是 一進來小程式喚起安全驗證頁面 -> 然後點選確認傳送給小程式端並關閉當前頁面。看似比較簡單但是踩了一下午坑
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中返回上一頁。