uni-app 与 H5原生 进行实时通信 (微信小程序)

uniapp 微信小程序 与 H5 原生的实时通讯

  • 1、H5必须用原生,试过很多,只能用原生。[这里是官方的demo链接](https://uniapp.dcloud.io/static/web-view.html)
  • 2、uniapp 中的那个需要做交互的文件必须是nvue.
  • 3、H5中加入事件监听
  • 4、最重要的一点就是目前页面跳转可以进行实时监听。所以还是有限制的。但是想一些办法绕一下去满足业务吧。

1、H5必须用原生,试过很多,只能用原生。这里是官方的demo链接

2、uniapp 中的那个需要做交互的文件必须是nvue.

<web-view @message="message" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>

message(event){
     
    console.log('接收到消息',event.detail.data)
}

3、H5中加入事件监听

 <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <script>
        document.addEventListener('UniAppJSBridgeReady', function() {
     
            uni.postMessage({
     
                data: {
     
                    action: '这是我传送的消息'
                }
            });//传递的消息信息,必须写在 data 对象中。
        });
    </script>

4、最重要的一点就是目前页面跳转可以进行实时监听。所以还是有限制的。但是想一些办法绕一下去满足业务吧。

你可能感兴趣的:(Vue,vue,uni-app)