uniapp app通过webview向H5发送信息
时间: 2025-05-29 09:24:28 浏览: 25
### UniApp WebView 向 H5 页面发送数据的方法
在 UniApp 中,`web-view` 组件可以用来加载外部网页或者本地 HTML 文件。为了实现 `web-view` 和 H5 页面之间的通信,可以通过 URL 参数传递、调用 JavaScript 方法等方式完成。
以下是几种常见的方法及其代码示例:
#### 1. **通过 URL 参数传递**
这是最简单的方式之一,适用于少量的数据传输场景。可以在跳转到目标页面时,在 URL 中附加参数[^1]。
```javascript
// 在父页面中定义跳转逻辑
let url = 'https://example.com/page.html';
let params = {
name: 'John',
age: 28,
};
this.$router.push({
path: '/pages/webview/index',
query: { ...params }
});
```
在接收方(H5 页面),可以通过 JavaScript 获取 URL 参数并解析:
```javascript
function getQueryVariable(variable) {
const query = window.location.search.substring(1);
const vars = query.split('&');
for (const pair of vars) {
const keyValue = pair.split('=');
if (decodeURIComponent(keyValue[0]) === variable) {
return decodeURIComponent(keyValue[1]);
}
}
}
console.log(getQueryVariable('name')); // 输出 John
console.log(getQueryVariable('age')); // 输出 28
```
---
#### 2. **使用 evalJS 调用 H5 的 JavaScript 函数**
如果需要更复杂的交互,比如动态更新 DOM 或者触发某些事件,则可以利用 `evalJS` 方法来执行 H5 页面中的脚本。
假设 H5 页面中有如下函数:
```html
<script>
function receiveData(data) {
alert(JSON.stringify(data));
}
</script>
```
那么可以从 UniApp 中这样调用它:
```javascript
import { getCurrentPages } from '@unijs/core';
getCurrentPages().pop().$getWebview().evalJS(`receiveData(${JSON.stringify({ message: 'Hello, H5!' })})`);
```
注意:此功能仅支持原生 WebView 控件,不适用于 iframe 嵌入的情况[^2]。
---
#### 3. **通过 postMessage 实现双向通信**
对于更加灵活的需求,还可以借助浏览器标准 API —— `postMessage` 来建立跨域消息通道[^4]。
##### 父级(UniApp)向子级(H5)发信:
```javascript
window.onload = () => {
document.querySelector('#sendBtn').addEventListener('click', () => {
const webviewContext = plus.webview.currentWebview();
const childView = webviewContext.children()[0]; // 子 Webview 对象
childView.evalJS(`window.postMessage('${escape(JSON.stringify({ action: 'greeting' }))}', '*')`);
});
};
```
##### 子级(H5)监听来自父级的消息:
```javascript
window.addEventListener('message', event => {
try {
const data = JSON.parse(unescape(event.data));
console.log('Received:', data.action); // greeting
} catch (e) {}
}, false);
```
> 提醒:上述例子假定双方都运行在同一应用上下文中;如果是完全独立部署的服务端渲染内容,则需额外配置 CORS 政策以允许跨源资源共享[^3]。
---
### 注意事项
- 如果发现插值表达式未被正确替换而显示为原始模板语法,请确认已启用 `[v-cloak]` 属性隐藏未编译节点。
- 数据量较大时不建议采用 GET 请求形式拼接地址栏参数,因为存在长度限制风险。
阅读全文
相关推荐


















