在微信小程序中，原生与 H5 页面（即 WebView 页面）之间的交互通常有以下几种方式：
1. 使用 postMessage 进行通信
微信小程序的 WebView 页面和原生小程序页面可以通过 postMessage 来进行数据传递。
WebView 页面向原生小程序发送消息： 在 WebView 页面中，使用 window.postMessage() 发送消息给原生小程序：
window.postMessage({ data: 'Hello from H5!' });
原生小程序接收 WebView 消息： 在原生小程序的 WebView 组件中，使用 bindmessage 事件来接收消息：
<web-view src="https://your-h5-url" bindmessage="onMessage"></web-view>Page({onMessage(e) {console.log(e.detail.data); // 'Hello from H5!'}
});
原生小程序向 WebView 页面发送消息： 使用 web-view 组件的 postMessage 方法：
this.selectComponent("#webview").postMessage({data: "Hello from Mini Program!"
});
2. 使用 wx.postMessage 发送消息
如果你在 WebView 中嵌入了 H5 页面，你还可以使用 wx.postMessage API，在小程序与 H5 页面之间进行通信。
原生小程序发送消息给 H5 页面：
wx.createSelectorQuery().select('#webview').context(res => {const webview = res.context;webview.postMessage({ data: 'Hello from Mini Program!' });
}).exec();
H5 页面接收消息：
H5 页面中使用 window.addEventListener('message', callback) 来接收消息：window.addEventListener('message', function (e) {console.log(e.data); // 'Hello from Mini Program!'
});
3. 使用 URL 参数
另一种常见的方式是通过 WebView 的 URL 传递参数。原生小程序可以在打开 WebView 页面时将数据附加在 URL 中，H5 页面通过 window.location 或 URL 解析来接收参数。
<web-view src="https://your-h5-url?data=Hello"></web-view>
在 H5 页面中，可以通过 window.location.search 获取参数：
const urlParams = new URLSearchParams(window.location.search);
const data = urlParams.get('data'); // 'Hello'
4. 调用原生 API
微信小程序可以调用 wx.navigateToMiniProgram 来打开另一个小程序，实现与 H5 页面之间的间接交互。
总结
postMessage 是原生小程序和 H5 页面之间最常用的交互方式。也可以通过 URL 参数 传递数据，适用于简单的数据传递。需要注意的是，H5 页面和小程序之间的通信在安全性上会有所限制，确保数据交换时的安全性和可靠性。根据你的需求，可以选择合适的方式进行原生小程序与 H5 页面之间的交互。
