uniapp webview 通信
时间: 2025-05-29 10:12:58 浏览: 11
### UniApp WebView 通信方法
#### 使用场景说明
当在 UniApp 中嵌入 HTML 页面时,可能会遇到需要与原生页面或其他组件交互的情况。为了实现这种交互,可以通过特定的方法让 Vue 页面和 WebView 加载的网页之间互相传递消息。
#### 实现方式概述
HTML 需要引入 UniApp 的 SDK 来支持跨域调用[^3]。通过监听 `UniAppJSBridgeReady` 事件,在此之后执行的操作才能确保 JS Bridge 已经准备好并能正常工作。对于向 H5 发送数据,则可以直接利用 JavaScript 调用 API;而接收来自 H5 的信息则需注册相应的回调函数处理逻辑。
#### 示例代码展示
##### 在 HTML 文件中加入如下脚本标签用于加载必要的库文件:
```html
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
```
##### 设置好后可以在适当位置定义发送请求到 Native 或者其他页面的动作:
```javascript
document.addEventListener("UniAppJSBridgeReady", function () {
// 当桥接准备就绪时触发该匿名函数
// 定义点击按钮后的行为
document.getElementById("someButtonId").onclick = function () {
uni.invoke({
service: "customServiceName",
data: JSON.stringify({ key: value }),
callback: function (res) {
console.log('Response from native:', res);
}
});
};
});
```
##### 如果希望从外部获取参数,可在初始化阶段设置全局变量或直接读取 URL 参数作为初始配置项之一:
```javascript
// 假设URL中有这样的查询字符串 ?paramKey=paramValue
function getQueryVariable(variable){
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] === variable){return pair[1];}
}
return(false);
}
let paramValue = getQueryVariable('paramKey');
console.log(paramValue); // 输出 'paramValue'
```
##### 对于 Vue 页面来说,如果想要主动推送某些变更给内嵌 webview 显示的内容,可以采用 postMessage 方法来进行单次的消息投递:
```javascript
this.$refs.myWebViewRef.postMessage(JSON.stringify({ actionType: 'updateData', payload }));
```
这里假设已经为 `<web-view>` 组件指定了 ref 属性名为 myWebViewRef ,并且所传入的数据结构应该遵循双方约定好的协议格式以便解析使用。
阅读全文
相关推荐

















