uniapp app内嵌h5的通信方式
    		       		warning:
    		            这篇文章距离上次修改已过441天,其中的内容可能已经有所变动。
    		        
        		                
                在uniapp中实现App内嵌H5的通信,可以使用以下方法:
- 使用uni.navigateTo打开一个带有Webview的页面,并通过URL传递参数。
- 使用postMessage和onMessage接口进行H5和App之间的消息传递。
以下是使用postMessage和onMessage的示例代码:
在H5页面中:
// 发送消息到App
window.parent.postMessage({
  action: 'h5Action',
  data: {
    key: 'value'
  }
}, '*');
 
// 监听App发送的消息
window.addEventListener('message', function(event) {
  const action = event.data.action;
  const data = event.data.data;
  // 处理消息
}, false);在uniapp App中:
// 监听H5页面发送的消息
onLoad() {
  window.addEventListener('message', e => {
    const action = e.data.action;
    const data = e.data.data;
    // 处理消息
  }, false);
},
 
// 发送消息到H5页面
methods: {
  sendMessageToH5() {
    const webview = this.$scope.$getAppWebview();
    webview.postMessage({
      action: 'appAction',
      data: {
        key: 'value'
      }
    }, '*');
  }
}确保在App和H5页面都正确处理了message事件,并且在发送消息时指定了正确的接收来源*或者具体的URL。
评论已关闭