小程序通过web-view实现与h5页面之间的交互

Posted 2020-11-15 我若亦如风

 

在小程序端使用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监听页面关闭，然后在给小程序传值，小程序接收到值之后手动注销当前页面