小程序通過web-view實現與h5頁面之間的交互

 

在小程序端使用web-view內嵌網頁，通過 src 攜帶參數，通過 @message 接收h5傳回的數據

<template>
    <view>
        <web-view :src="activity.imgUrl?id=xxx" @message="postMessage"></web-view>
    </view>
</template>

 

在h5頁面通過 wx.miniProgram.postMessage 可以向小程序傳值

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript">
    wx.miniProgram.postMessage({
        data: 'foo'
    })
</script>

 

但是在實際的開發中會發現，h5不能及時給小程序傳值，查找官方文檔發現：

網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發並收到消息。

可以人為觸發來實現向小程序傳值

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript">
    wx.miniProgram.navigateBack({
        delta: 1
    })
    wx.miniProgram.postMessage({
        data: 'foo'
    })
</script>

 

我在開發的時候遇到一種情況，就是在小程序內嵌頁面點擊返回的時候，實際上只是關閉了內嵌頁面，而當前頁面並沒有注銷，針對這種情況做一下處理：

　　在h5頁面監聽頁面關閉

　　在小程序手動關閉

<!-- 小程序跳轉 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    window.history.pushState('forward', null, './#forward');
    if (window.history && window.history.pushState) {
        $(window).on('popstate', function() {
            <!-- 頁面關閉了 -->
            wx.miniProgram.navigateBack({
                delta: 1
            })
            wx.miniProgram.postMessage({
                data: 'foo'
            })
        });
    }
})
</script>

h5監聽頁面關閉，然后在給小程序傳值，小程序接收到值之后手動注銷當前頁面