uni-app APP的vue与html数据通信
参考官方文档web-view组件
web-view | uni-app官网 (dcloud.net.cn)
vue部分代码
<template>
<view class="main">
<view class="web-view">
<web-view :webview-styles="{height:'20%'}" src="/hybrid/html/local.html"
@message="handleMessage"></web-view>
</view>
<view class="text-box">
<text>数据:{{value}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
webviewStyles: {
progress: {
color: '#FF3333'
}
},
value: "null",
}
},
methods: {
handleMessage(evt) {
console.log('接收到的消息:', evt.detail.data[0].action);
this.value = evt.detail.data[0].action
}
}
}
</script>
<style>
.main {
display: flex;
justify-content: center;
flex-direction: column
}
.web-view {
height: 200px;
}
.text-box {
width: 500px;
height: 500px;
background-color: antiquewhite;
}
</style>
html部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>网络网页</title>
<style type="text/css">
.btn {
display: block;
margin: 20px auto;
padding: 5px;
background-color: #007aff;
border: 0;
color: #ffffff;
height: 40px;
width: 200px;
}
.btn-red {
background-color: #dd524d;
}
.btn-yellow {
background-color: #f0ad4e;
}
.desc {
padding: 10px;
color: #999999;
}
.post-message-section {
visibility: hidden;
}
</style>
</head>
<body>
<div class="post-message-section">
<div class="btn-list">
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
</div>
</div>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write(
'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
);
} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js"><\/script>');
} else if (/quickapp/i.test(userAgent)) {
// quickapp
document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function () {
uni.postMessage({
data: {
action: 'message'
}
});
uni.getEnv(function (res) {
console.log('当前环境:' + JSON.stringify(res));
});
document.getElementById('postMessage').addEventListener('click', function () {
console.log('通信消息', uni)
uni.postMessage({
data: {
action: 'htmlData'
}
});
});
});
</script>
</body>
</html>
注意:
- 小程序仅支持加载网络网页,不支持本地html
- 补充说明:app-vue下web-view组件不支持自定义样式,而v-show的本质是改变组件的样式。即组件支持v-if而不是支持v-show。
- 小程序端 web-view 组件一定有原生导航栏,下面一定是全屏的 web-view 组件,navigationStyle: custom 对 web-view 组件无效。
- App 端使用 uni.web-view.js 的最低版为 uni.webview.1.5.4.js
- App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在
uni-app 项目根目录->hybrid->html
文件夹下或者static
目录下,如下为一个加载本地网页的uni-app
项目文件目录示例: - nvue
web-view
必须指定样式宽高 - App 网页向应用
postMessage
为实时消息 - app-nvue
web-view
默认没有大小,可以通过样式设置大小,如果想充满整个窗口,设置flex: 1
即可,标题栏不会自动显示web-view
页面中的 title。如果想充满整个窗口且想要显示标题推荐使用 vue 页面的web-view
(默认充满屏幕不可控制大小), 想自定义web-view
大小使用 nvueweb-view