uniapp web-view，如何从app传递信息到h5

uniApp 的 WebView 允许原生应用与嵌入其中的 H5 页面交互，通过一种称为 `postMessage` 的机制来实现数据的双向通信。以下是向 H5 传递信息的基本步骤：

1. **H5 接收信息**：
- 在 H5 页面的 JavaScript 中，可以监听 `window.postMessage` 事件，设置一个函数处理接收到的消息，例如：

     window.addEventListener('message', function(e) {
       if (e.origin !== 'your-native-app-origin') return;
       console.log('Received message:', e.data);
       // 处理接收到的数据
     });

其中，`origin` 需要设置为你 App 的服务器地址或协议加域名，防止跨域安全问题。

2. **App 发送消息**：
- 在 UniApp 的 Vue 组件中，使用 `uni.postMessage` 函数向 H5 发送数据，示例如下：

     const sendMessage = async (data) => {
       try {
         await uni.invokeMethod({
           name: 'web-view.postMessage',
           data: { key: 'your-message-key', value: data },
         });
       } catch (error) {
         console.error('Failed to send message:', error);
       }
     };

这里调用了 UniApp 提供的原生 API，将数据封装成 JSON 对象并发送出去。