web-view@message（WebViewMessageHandler2）

## web-view@message 深入解析### 简介`web-view@message` 是小程序中 `web-view` 组件提供的一个重要功能，用于实现小程序与网页之间双向通信的关键桥梁。开发者可以利用该事件监听网页发往小程序的消息，并在小程序端进行相应的处理，例如：数据传递、页面跳转、功能调用等。### 工作原理1.

网页发送消息

: 网页端通过 `window.parent.postMessage()` 方法向小程序发送消息。 2.

小程序监听

: 小程序端通过 `wx.onMessage()` 方法监听 `web-view` 组件所触发的 `message` 事件。 3.

数据处理

: 小程序接收到消息后，可以根据消息内容进行相应的逻辑处理。### 使用方法#### 1. 网页端发送消息```javascript // 网页代码 window.parent.postMessage({ data: 'Hello from Webview!' }, '

'); ```

`window.parent.postMessage(data, origin)` 是网页发送消息的核心 API。

`data`: 要发送的数据，可以是任何类型，但建议使用字符串或 JSON 对象。

`origin`: 指定接收消息的窗口来源，可以使用通配符 `

` 表示任何来源。#### 2. 小程序端监听消息```javascript // 小程序页面 JS 代码 wx.onMessage(function(event) {console.log('Received message from webview:', event.data);// 根据 event.data 进行相应的逻辑处理 }); ```

`wx.onMessage(callback)` 用于监听来自网页的消息。

`callback`: 接收到消息时触发的回调函数，参数 `event` 包含以下属性：

`data`: 网页发送的数据。

`source`: 发送消息的 `web-view` 组件实例。#### 3. 小程序页面 WXML```html ```### 使用场景`web-view@message` 在小程序开发中应用广泛，以下是一些常见场景：

登录状态同步

: 网页完成登录后，将登录信息传递给小程序，实现登录状态同步。

数据交互

: 网页与小程序之间进行数据传递，例如：用户信息、商品信息、订单信息等。

功能调用

: 网页调用小程序提供的功能，例如：支付、获取用户信息、打开小程序页面等。

页面跳转

: 网页触发小程序页面跳转，例如：点击网页上的某个按钮，跳转到小程序的指定页面。### 注意事项

为了安全起见，建议在 `postMessage` 的第二个参数 `origin` 中指定小程序的域名，避免消息被其他恶意网站拦截。

小程序与网页之间的数据传输建议使用 JSON 格式，方便解析和处理。

在处理网页发来的消息时，需要进行安全校验，避免恶意攻击。### 总结`web-view@message` 为小程序与网页之间搭建了便捷的沟通桥梁，开发者可以充分利用该特性实现丰富的功能和交互体验，提升小程序的灵活性和扩展性。

web-view@message 深入解析

简介`web-view@message` 是小程序中 `web-view` 组件提供的一个重要功能，用于实现小程序与网页之间双向通信的关键桥梁。开发者可以利用该事件监听网页发往小程序的消息，并在小程序端进行相应的处理，例如：数据传递、页面跳转、功能调用等。

工作原理1. **网页发送消息**: 网页端通过 `window.parent.postMessage()` 方法向小程序发送消息。 2. **小程序监听**: 小程序端通过 `wx.onMessage()` 方法监听 `web-view` 组件所触发的 `message` 事件。 3. **数据处理**: 小程序接收到消息后，可以根据消息内容进行相应的逻辑处理。

使用方法

1. 网页端发送消息```javascript // 网页代码 window.parent.postMessage({ data: 'Hello from Webview!' }, '*'); ```* `window.parent.postMessage(data, origin)` 是网页发送消息的核心 API。* `data`: 要发送的数据，可以是任何类型，但建议使用字符串或 JSON 对象。* `origin`: 指定接收消息的窗口来源，可以使用通配符 `*` 表示任何来源。

2. 小程序端监听消息```javascript // 小程序页面 JS 代码 wx.onMessage(function(event) {console.log('Received message from webview:', event.data);// 根据 event.data 进行相应的逻辑处理 }); ```* `wx.onMessage(callback)` 用于监听来自网页的消息。* `callback`: 接收到消息时触发的回调函数，参数 `event` 包含以下属性：* `data`: 网页发送的数据。* `source`: 发送消息的 `web-view` 组件实例。

3. 小程序页面 WXML```html ```

使用场景`web-view@message` 在小程序开发中应用广泛，以下是一些常见场景：* **登录状态同步**: 网页完成登录后，将登录信息传递给小程序，实现登录状态同步。 * **数据交互**: 网页与小程序之间进行数据传递，例如：用户信息、商品信息、订单信息等。 * **功能调用**: 网页调用小程序提供的功能，例如：支付、获取用户信息、打开小程序页面等。 * **页面跳转**: 网页触发小程序页面跳转，例如：点击网页上的某个按钮，跳转到小程序的指定页面。

注意事项* 为了安全起见，建议在 `postMessage` 的第二个参数 `origin` 中指定小程序的域名，避免消息被其他恶意网站拦截。 * 小程序与网页之间的数据传输建议使用 JSON 格式，方便解析和处理。 * 在处理网页发来的消息时，需要进行安全校验，避免恶意攻击。

总结`web-view@message` 为小程序与网页之间搭建了便捷的沟通桥梁，开发者可以充分利用该特性实现丰富的功能和交互体验，提升小程序的灵活性和扩展性。