微信小程序如何主动与H5通信？

微信小程序与H5页面之间的通信主要依赖于以下几种方式：

1. 使用 Web-View 组件加载 H5 页面

微信小程序提供了一个名为 web-view 的组件，用于在小程序内加载外部H5页面。通过此组件，你可以在小程序中嵌入H5页面，并实现一定程度的通信。

* 在小程序中，你可以通过 `web-view` 的 `src` 属性指定要加载的H5页面的URL。
* 为了实现通信，你可以在H5页面中通过 `window.__wxjs_environment` 对象访问到小程序的环境，进而调用小程序的部分API。但请注意，这种方式并非官方推荐，且可能存在兼容性问题。

2. 使用postMessage API

微信小程序为 web-view 组件提供了 postMessage 方法，以及监听H5页面发来的消息的 message 事件。这是实现小程序与H5页面之间通信的官方推荐方式。

* 在小程序中，你可以使用 `web-view` 组件的实例方法 `postMessage` 向H5页面发送消息。例如：`this.webViewContext.postMessage({ data: 'Hello from MiniProgram' })`。
* 在H5页面中，你可以监听 `message` 事件来接收小程序发来的消息。例如：`window.addEventListener('message', function(event) { console.log(event.data); })`。
* 同样地，H5页面也可以通过 `postMessage` 方法向小程序发送消息，小程序中则通过监听 `web-view` 的 `message` 事件来接收这些消息。

3. 使用URL参数或Query String

另一种简单的通信方式是通过URL参数或Query String传递信息。当你从小程序跳转到H5页面时，可以在URL中附带一些参数。然后，在H5页面中解析这些参数来获取数据。

* 在小程序中，你可以构建包含参数的URL，并将其设置为 `web-view` 的 `src` 属性。
* 在H5页面中，你可以使用JavaScript的URL解析功能（如 `URLSearchParams`）来提取URL中的参数。

4. 使用服务器中转

如果上述方法无法满足你的需求，你还可以考虑使用服务器作为中转站。小程序和H5页面都与服务器进行通信，通过服务器来传递消息和数据。

* 小程序可以通过网络请求（如 `wx.request`）向服务器发送数据，并接收服务器的响应。
* H5页面同样可以使用AJAX或其他网络请求技术与服务器进行通信。

总的来说，选择哪种通信方式取决于你的具体需求和场景。postMessage API提供了较为直接和灵活的通信机制，而URL参数和服务器中转则适用于特定的场景和需求。