微信小程序中怎么给 webview 发送 message ？

在微信小程序中，我们可以通过web-view组件来嵌入第三方的网页。如果需要在小程序与web-view中嵌入的页面之间进行数据交互，可以通过使用postMessage方法发送消息。以下是如何实现这一功能的步骤：

1. 在小程序中添加web-view组件

首先，你需要在小程序的页面中添加一个web-view组件，并为其指定要加载的网页URL。

xml
<!-- 页面的wxml文件 -->
<web-view src="https://www.example.com" id="myWebview"></web-view>

2. 发送消息到web-view

你可以在小程序的逻辑层（JavaScript文件）中使用postMessage方法向web-view发送消息。例如，可以在某个事件触发时发送数据：

javascript
// 页面的js文件
Page({
  sendMessage: function() {
    const webview = wx.createSelectorQuery().select('#myWebview');
    webview.context(function(res) {
      res.context.postMessage({
        data: 'Hello from MiniProgram'
      });
    }).exec();
  }
});

在这个例子中，我定义了一个sendMessage方法，该方法首先通过createSelectorQuery和select获取web-view组件的上下文，然后使用postMessage发送一个包含数据的对象。

3. 在web-view页面接收消息

在web-view中加载的网页需要添加相应的事件监听，以便接收来自小程序的消息。这通常是通过监听message事件来实现的：

javascript
// 在web-view网页的JavaScript文件中
window.addEventListener('message', function(event) {
  console.log('Received message from MiniProgram:', event.data);
});

在这个例子中，我为window对象添加了一个事件监听器来处理message事件。当web-view接收到小程序发送的消息时，它会打印出消息内容。

小结

通过上述步骤，你可以实现微信小程序与web-view中网页的双向数据交互。这在需要集成外部网页功能到小程序中时非常有用。在开发过程中，请确保web-view中加载的页面允许跨源资源共享（CORS），否则可能会遇到安全或数据访问限制的问题。