uniappwebview通讯（uniapp和webview实时交互）

## uni-app Webview 通讯详解### 简介在 uni-app 开发中，我们经常会遇到需要在原生页面与 Webview 页面之间进行数据交互的需求。例如，在使用 Webview 加载外部网页时，可能需要获取用户授权信息，或者将原生页面中的数据传递给 Webview 页面进行展示。uni-app 提供了多种方法实现 Webview 与原生页面的通信，本文将详细介绍这些方法，并附上代码示例。### 一、 uni-app Webview 通信原理uni-app 的 Webview 通信机制主要依赖于 JavaScript 的 `postMessage` 方法，实现跨域通信。-

原生页面：

通过 `uni.postMessage` 发送消息到 Webview 页面。 -

Webview 页面：

通过监听 `window.addEventListener('message', function(event) {})` 接收来自原生页面的消息。### 二、 uni-app Webview 通信方法#### 1. uni.postMessage

原生页面发送消息到 Webview：

```javascript uni.postMessage({data: {message: 'Hello from Native!',id: 123},webviewId: 'webviewId' }); ```- `data`： 要发送的数据，可以是任意类型。 - `webviewId`： Webview 页面的标识符，可以使用 `uni.createWebView` 方法获取。

Webview 页面接收消息：

```javascript window.addEventListener('message', function(event) {console.log(event.data); // 打印接收到的消息 }); ```#### 2. Webview 页面发送消息到原生页面

Webview 页面发送消息到原生页面：

```javascript window.webkit.messageHandlers.nativeHandler.postMessage({message: 'Hello from Webview!' }); ```- `nativeHandler`： 在原生页面注册的接收消息的 handler 名称。

原生页面接收消息：

```javascript onLoad() {// 注册接收消息的 handleruni.addWebViewMessageHandler('nativeHandler', (data) => {console.log(data); // 打印接收到的消息}); } ```### 三、 示例代码

原生页面：

```javascript // 页面结构 // 页面逻辑 ```

Webview 页面：

```javascript // 页面结构 // 页面逻辑 ```### 四、 注意事项-

通信安全性：

在进行 Webview 通信时，需要注意安全性问题。建议对所有接收到的数据进行验证和过滤，避免恶意攻击。 -

跨域问题：

`postMessage` 方法可以实现跨域通信，但需要注意不同浏览器之间的兼容性问题。 -

性能优化：

频繁的通信可能会影响页面性能，建议在必要时进行通信。### 五、 总结uni-app 提供了多种方法实现 Webview 与原生页面的通信，开发者可以根据实际需求选择合适的方法。合理使用 Webview 通信功能，可以实现更加灵活的功能，提升用户体验。

uni-app Webview 通讯详解

简介在 uni-app 开发中，我们经常会遇到需要在原生页面与 Webview 页面之间进行数据交互的需求。例如，在使用 Webview 加载外部网页时，可能需要获取用户授权信息，或者将原生页面中的数据传递给 Webview 页面进行展示。uni-app 提供了多种方法实现 Webview 与原生页面的通信，本文将详细介绍这些方法，并附上代码示例。

一、 uni-app Webview 通信原理uni-app 的 Webview 通信机制主要依赖于 JavaScript 的 `postMessage` 方法，实现跨域通信。- **原生页面：** 通过 `uni.postMessage` 发送消息到 Webview 页面。 - **Webview 页面：** 通过监听 `window.addEventListener('message', function(event) {})` 接收来自原生页面的消息。

二、 uni-app Webview 通信方法

1. uni.postMessage**原生页面发送消息到 Webview：**```javascript uni.postMessage({data: {message: 'Hello from Native!',id: 123},webviewId: 'webviewId' }); ```- `data`： 要发送的数据，可以是任意类型。 - `webviewId`： Webview 页面的标识符，可以使用 `uni.createWebView` 方法获取。**Webview 页面接收消息：**```javascript window.addEventListener('message', function(event) {console.log(event.data); // 打印接收到的消息 }); ```

2. Webview 页面发送消息到原生页面**Webview 页面发送消息到原生页面：**```javascript window.webkit.messageHandlers.nativeHandler.postMessage({message: 'Hello from Webview!' }); ```- `nativeHandler`： 在原生页面注册的接收消息的 handler 名称。**原生页面接收消息：**```javascript onLoad() {// 注册接收消息的 handleruni.addWebViewMessageHandler('nativeHandler', (data) => {console.log(data); // 打印接收到的消息}); } ```

三、 示例代码**原生页面：**```javascript // 页面结构 // 页面逻辑 ```**Webview 页面：**```javascript // 页面结构 // 页面逻辑 ```

四、 注意事项- **通信安全性：** 在进行 Webview 通信时，需要注意安全性问题。建议对所有接收到的数据进行验证和过滤，避免恶意攻击。 - **跨域问题：** `postMessage` 方法可以实现跨域通信，但需要注意不同浏览器之间的兼容性问题。 - **性能优化：** 频繁的通信可能会影响页面性能，建议在必要时进行通信。

五、 总结uni-app 提供了多种方法实现 Webview 与原生页面的通信，开发者可以根据实际需求选择合适的方法。合理使用 Webview 通信功能，可以实现更加灵活的功能，提升用户体验。