微信小程序webview與h5通訊策略

官方介紹：developers.weixin.qq.com/miniprogram…

最近跟小程序對接，遇到一些通訊問題，現總結以下：

1. 小程序webview傳遞數據到h5頁面

根據官方文檔介紹，若是h5頁面想要獲取小程序內的信息，好比地理位置等信息。須要經過在webview裏給h5連接添加參數實現。

h5頁面在連接上截取小程序添加的參數，得到值。可是也要注意url的長度，不能無節制的在h5連接上添加參數。

/**
 * 獲取URL參數
 */
function getQueryString() {
    const search = window.location.search.substring(1);
    const param = {};
    const arr = search.split('&');

    for (let i = 0; i < arr.length; i++) {
        const item = arr[i].split('=');
        param[item[0]] = decodeURIComponent(item[1]);
    }

    return param;
}
複製代碼

2. h5頁面傳遞數據到小程序接收

查了下，小程序內在webview上監聽bindmessage事件，h5頁面觸發postMessage方法來傳遞參數。頁面腳本以下：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>


wx.miniProgram.postMessage({
    data
});
複製代碼

網頁向小程序 postMessage 時，會在特定時機（小程序後退、組件銷燬、分享）觸發並收到消息。e.detail = { data }，data是屢次 postMessage 的參數組成的數組。