uniapp微信小程序系列（3）web-view不支持实时通信

web-view是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面。

目前，小程序嵌套web-view无法实现实时通信，H5网页可以通过引用微信的SDK，调用wx.miniProgram.postMessage({ data: {id:10000} }); 向小程序传递信息，在小程序侧添加@message事件监听该消息，但该事件只有在特定场景下才能监听到：后退、组件销毁、分享。

另外，H5网页还可以调用微信SDK，实现小程序页面跳转及其它功能，如：

// 页面跳转
wx.miniProgram.switchTab({ url:'/pages/search/search' });
wx.miniProgram.navigateTo({ url:'/pages/search/search' });
wx.miniProgram.reLaunch({ url:'/pages/search/search' });
wx.miniProgram.redirectTo({ url:'/pages/search/search' });
wx.miniProgram.navigateBack();
// 获取当前环境
wx.miniProgram.getEnv((res) => console.log(res.miniprogram));
// 消息通信
wx.miniProgram.postMessage({ data: {id:10000} });

小程序添加web-view代码：

<web-view 
    src="http://192.168.2.180:8080/activity/midday" 
    @message="handleMessage">
</web-view>

// 函数监听，必须从data.detail获取通信信息    
methods: {
	handleMessage(data) {
		console.log("接收到handleMessage消息：" + JSON.stringify(data.detail));
	}
}

H5网页端代码：

// 引入微信SDK
<script>
    //判断是否是微信浏览器环境，是则载入js-sdk`
    (function(document, window) {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        var script = document.createElement("script");
        script.setAttribute('src', '//res.wx.qq.com/open/js/jweixin-1.6.0.js');
        document.querySelector('head').appendChild(script);
      }
    })(document, window)
</script>

// 调用微信小程序能力
todo(){
    wx.miniProgram.postMessage({ data: {id:10000} });
    wx.miniProgram.navigateTo({ url:'/pages/search/search' });
}

再次强调：在微信小程序嵌套web-view，wx.miniProgram.postMessage无法实现实时通信，每次调用该API，只是将data对象存入至一个数组里，只有当特定场景（页面后退、组件销毁、分享）发生时，小程序里的监听事件@message才会被触发。按上面的代码执行，用户在H5网页点击了3次todo，则返回的数据格式如图所示：

uniapp微信小程序系列（3）web-view不支持实时通信

猜你喜欢