uniapp webview和h5通信
时间: 2025-05-29 09:07:29 浏览: 43
### UniApp WebView与H5页面通信的方法
#### 使用URL带参数传递数据
一种简单的方式是在加载网页时通过URL附加查询字符串来传输少量的数据。这种方式适用于初始化配置或简单的状态共享。
```javascript
// 在UniApp应用中构建带有参数的URL并导航至该地址
this.$router.push({
path: '/pages/webView',
query: {
paramKey: 'value'
}
});
```
当目标HTML文档接收到请求后,可以通过`window.location.search`解析这些参数[^1]。
#### 利用 `evalJS` 方法执行JavaScript代码片段
对于更复杂的交互需求,可以采用`evalJS`函数直接注入一段脚本到Web视图内部运行环境里去操作DOM节点或是调用已定义好的API接口。
```javascript
const webViewRef = uni.createSelectorQuery().select('#myWebView');
webViewRef.evalJS('alert("Hello from Native!");').exec();
```
此功能允许原生层主动触发前端逻辑更新而无需刷新整个页面资源。
#### 调用 `postMessage` API 实现双向通讯机制
为了建立更加灵活的消息交换渠道,推荐使用现代浏览器支持的标准跨源通信协议——即`postMessage()`方法配合监听器模式完成信息流转过程。
##### H5 向 APP 发送消息
在外部网站内编写如下代码:
```html
<!-- HTML 文件 -->
<script type="text/javascript">
if (typeof window.uni !== 'undefined') {
// 检查是否存在uni对象以确认当前处于uni-app环境中
const dataToPass = JSON.stringify({ key: 'someValue' });
window.uni.postMessage(dataToPass);
}
</script>
```
##### APP 接收来自 H5 的通知
而在宿主程序这边,则需设置好相应的处理器等待接收到来自子窗口发出的通知包:
```vue
<template>
<!-- 组件模板部分省略... -->
<web-view id="myWebView" src="/path/to/h5/page.html" @message="onReceive"></web-view>
</template>
<script>
export default {
methods: {
onReceive(event) {
console.log(`Received message from web page: ${event.detail.data}`);
try {
const parsedData = JSON.parse(event.detail.data);
// 处理接收到的数据...
} catch (_) {}
}
}
};
</script>
```
上述流程展示了如何利用内置事件绑定特性轻松捕获由远端站点推送过来的有效负载,并对其进行进一步处理[^2]。
阅读全文
相关推荐


















