uniappwebview交互（uniapp webgl）

## UniApp WebView 交互### 简介在 UniApp 开发中，WebView 组件用于加载外部网页。但很多时候，我们需要在 UniApp 应用和 WebView 加载的网页之间进行数据交互，例如：

从 UniApp 应用调用网页 JavaScript 函数

从网页 JavaScript 函数调用 UniApp 应用原生功能本文将详细介绍 UniApp WebView 交互的实现方法。### UniApp 调用网页 JavaScript 函数#### 1. 设置网页 referer为了安全起见，WebView 默认情况下会限制跨域访问。因此，我们需要设置网页的 referer，以允许 UniApp 应用访问该网页。在 `pages.json` 文件中配置 WebView 组件的 `webviewStyles` 属性：```json "pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","webviewStyles": {"H5": {"referer": "https://your-domain.com" // 替换为你的域名}}}} ] ```#### 2. 使用 `uni.postMessage` 发送消息UniApp 提供了 `uni.postMessage` 方法，用于向 WebView 发送消息。```javascript // 向 WebView 发送消息 uni.$emit('messageFromApp', { message: 'Hello from UniApp!' }); ```#### 3. 在网页中监听消息在网页 JavaScript 代码中使用 `window.addEventListener` 监听 `message` 事件：```javascript window.addEventListener('message', function(event) {// 处理来自 UniApp 的消息console.log('Received message from UniApp:', event.data); }); ```### 网页 JavaScript 函数调用 UniApp 应用原生功能#### 1. 使用 `window.postMessage` 发送消息在网页 JavaScript 代码中使用 `window.postMessage` 向 UniApp 发送消息：```javascript // 向 UniApp 发送消息 window.parent.postMessage({ functionName: 'getUserInfo' }, '

'); ```#### 2. 在 UniApp 中监听消息在 UniApp 页面中使用 `@message` 事件监听来自 WebView 的消息：```html ```#### 3. 在网页中接收返回值在网页 JavaScript 代码中定义接收返回值的函数：```javascript function receiveUserInfo(userInfo) {// 处理来自 UniApp 的用户信息console.log('Received user info from UniApp:', userInfo); } ```### 总结通过以上步骤，我们就可以实现 UniApp WebView 交互，并在 UniApp 应用和 WebView 加载的网页之间进行数据传递和功能调用。

UniApp WebView 交互

简介在 UniApp 开发中，WebView 组件用于加载外部网页。但很多时候，我们需要在 UniApp 应用和 WebView 加载的网页之间进行数据交互，例如：* 从 UniApp 应用调用网页 JavaScript 函数 * 从网页 JavaScript 函数调用 UniApp 应用原生功能本文将详细介绍 UniApp WebView 交互的实现方法。

UniApp 调用网页 JavaScript 函数

1. 设置网页 referer为了安全起见，WebView 默认情况下会限制跨域访问。因此，我们需要设置网页的 referer，以允许 UniApp 应用访问该网页。在 `pages.json` 文件中配置 WebView 组件的 `webviewStyles` 属性：```json "pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","webviewStyles": {"H5": {"referer": "https://your-domain.com" // 替换为你的域名}}}} ] ```

2. 使用 `uni.postMessage` 发送消息UniApp 提供了 `uni.postMessage` 方法，用于向 WebView 发送消息。```javascript // 向 WebView 发送消息 uni.$emit('messageFromApp', { message: 'Hello from UniApp!' }); ```

3. 在网页中监听消息在网页 JavaScript 代码中使用 `window.addEventListener` 监听 `message` 事件：```javascript window.addEventListener('message', function(event) {// 处理来自 UniApp 的消息console.log('Received message from UniApp:', event.data); }); ```

网页 JavaScript 函数调用 UniApp 应用原生功能

1. 使用 `window.postMessage` 发送消息在网页 JavaScript 代码中使用 `window.postMessage` 向 UniApp 发送消息：```javascript // 向 UniApp 发送消息 window.parent.postMessage({ functionName: 'getUserInfo' }, '*'); ```

2. 在 UniApp 中监听消息在 UniApp 页面中使用 `@message` 事件监听来自 WebView 的消息：```html ```

3. 在网页中接收返回值在网页 JavaScript 代码中定义接收返回值的函数：```javascript function receiveUserInfo(userInfo) {// 处理来自 UniApp 的用户信息console.log('Received user info from UniApp:', userInfo); } ```

总结通过以上步骤，我们就可以实现 UniApp WebView 交互，并在 UniApp 应用和 WebView 加载的网页之间进行数据传递和功能调用。