uniapp写的H5如何向APP发消息

在uniapp中，H5向APP发消息主要通过以下方式实现：

1. H5页面（子页面）发送消息：

   • 使用原生window.parent.postMessage（推荐，兼容性更好）：

     window.parent.postMessage({  
     type: 'uni-app-message',  
     data: { action: 'yourAction', params: {} }  
     }, '*');  

   • 或在UniAppJSBridgeReady事件后使用uni.postMessage：

     document.addEventListener('UniAppJSBridgeReady', () => {  
     uni.postMessage({ data: { action: 'yourAction' } });  
     });  

2. APP端（父页面）接收消息：
   在web-view组件中监听message事件：

   <template>  
    <web-view src="your-h5-url" @message="handleMessage"></web-view>  
   </template>  
   
   <script>  
   export default {  
    methods: {  
      handleMessage(e) {  
        // e.detail.data 是数组形式（支付宝小程序除外）  
        const msg = e.detail.data[0];  
        if (msg.action === 'yourAction') {  
          // 处理消息  
        }  
      }  
    }  
   }  
   </script>  

关键点：

• H5需确保在plusready或UniAppJSBridgeReady事件后发送消息
• APP端必须通过web-view的@message事件接收
• 消息数据需包裹在data对象中
• 文档参考：web-view通信

注意：H5直接使用uni.postMessage在浏览器环境不支持，但在APP的web-view容器内可用。