uniapp实现webview和APP之间的传值通信 / VUE和HTML页面通信
首先，让我们来谈谈会应用到什么业务场景。在uniapp开发中会我们可能会内嵌html, 并且有时候还需要相互通信的需求例子：我们有个移动端的现成做好的网页，需要搬到uniapp开发的项目中，需要把这个网页打包成ios端和安卓端的APP，页面中有一个需要调用扫码功能。思路逻辑分析：1*uni 中的web-view 来引入网页，网页中需要调用扫码功能，但是webview是不能直接调用手机的扫码功能的2
·
首先，让我们来谈谈会应用到什么业务场景。
在uniapp开发中会我们可能会内嵌html, 并且有时候还需要相互通信的需求
例子：我们有个移动端的现成做好的网页，需要搬到uniapp开发的项目中，需要把这个网页打包成ios端和安卓端的APP，页面中有一个需要调用扫码功能。
思路逻辑分析：
1* uni 中的 web-view 来引入网页，网页中需要调用扫码功能，但是webview是不能直接调用手机的扫码功能的
2* 点击网页的扫码按钮触发事件，事件给app发送一个我要使用扫码的需求，然后再uni中收到了信号，去吊起手机的扫码功能。
demo实现逻辑走起。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
一、html页面
首先新建一个 hybrid 文件存放 html 网页所有文件结构。
1.hybrid目录结构图如下
2.html页面代码（向APP发送消息）
index.html页面代码
<div id="app">
<div class="title">这个是hybrid下的html页面哦！</div>
<div class="demo-div">
<div class="demo-lable">
<img src="../../static/logo.png">
<div class="name">logo图标</div>
</div>
<div class="demo-lable">
<img src="../../static/logo.png">
<div class="name">logo图标</div>
</div>
</div>
</div>
<!-- 引入uniapp的SDK (必须引用)-->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
</script>
<!-- 引入vue方法-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript" src="js/textData.js"></script>
<script type="text/javascript">
// 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
uni.getEnv(function(res) {
console.log('获取当前环境：' + JSON.stringify(res));
});
// 向APP发送消息 （注意看这里 01）
uni.postMessage({
data: {
name: 'polly',
age: '18'
}
});
});
</script>
index.css页面代码
.title{
padding: 20px 0;
font-size: 14px;
text-align: center;
background-color: #F1F1F1;
}
.demo-div{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-top: 30px;
}
.demo-lable{
text-align: center;
width: 47%;
border: 1px solid #f5f5f5;
margin-top: 10px;
margin-left: 5px;
img{
width: 50px;
height: 50px;
}
}
3.html页面代码（接收APP发送过来的消息及赋值渲染）
创建一个textData.js文件，存放html所有的实例。
textData.js页面代码
var app = new Vue({
el: '#app',
data: {
textTip:"提示信息",
dataList:[]
},
mounted() {
},
onLoad() {
},
onShow() {
},
methods: {
}
})
index.html 页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试uniapp的webview和APP之间的通信</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div id="app">
<div class="title">这个是hybrid下的html页面哦！</div>
<div class="demo-div">
<div class="demo-lable" v-for="(item,index) in dataList" :key="index">
<img :src="item.smallimage">
<div class="name">{{item.name}}</div>
</div>
</div>
</div>
</body>
<!-- 引入uniapp的SDK (必须引用)-->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
</script>
<!-- 引入vue方法-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript" src="js/textData.js"></script>
<script type="text/javascript">
// 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
uni.getEnv(function(res) {
console.log('获取当前环境：' + JSON.stringify(res));
});
});
// HTML 接受APP发送过来的消息 (H5端)
window.addEventListener('message', e => {
console.log(e,'HTML 接受APP发送过来的消息 (H5端)');
app.dataList = JSON.parse(e.data.data).navigation
console.log(app.dataList,'+++++++++');
}, false)
// HTML 接受APP发送过来的消息 (APP端)
function requestData(data) {
console.log(JSON.stringify(data),'HTML 接受APP发送过来的消息 (APP端)');
app.dataList = data.navigation // 赋值
}
</script>
</html>
二、uni页面
1.目录结构图如下
2.uni页面代码（接收html发送过来的消息）
<template>
<view>
// 引入html页面
<web-view class="webview" src="/hybrid/html/index.html" ref="webview" @message="handleMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
wv: null, // 定义(app)webview对象节点
webV:{}, // 定义(H5)webview对象节点
sendData: [], // 发送数据数组
}
},
onLoad() {
// App端
// #ifdef APP-PLUS
// 页面栈最顶层就是当前webview
let currentWebview = this.$scope.$getAppWebview();
setTimeout(() => {
this.wv = currentWebview.children()[0]
}, 1000)
// #endif
// H5端
// #ifdef H5
window.addEventListener('message',e => {
this.webV = e.source // window的对象
// 接收Html发送过来的消息 (H端) 控制台打印看结果
console.log(e.data.data.arg,'接收h5页面发来的消息');
},false)
// #endif
},
mounted() {},
methods: {
// #ifdef APP-PLUS
// 接收Html发送过来的消息 (APP端) 手机真机测试看打印结果
handleMessage(evt) {
console.log(evt);
console.log('接收Html发送过来的消息：' + JSON.stringify(evt.detail.data[0]));
},
// #endif
}
}
</script>
结果成功示例图
3.uni页面代码（向html发送消息）
<template>
<view>
<web-view class="webview" src="/hybrid/html/index.html" ref="webview" @message="handleMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
wv: null, // 定义(app)webview对象节点
webV:{}, // 定义(H5)webview对象节点
sendData: [], // 发送数据对象
}
},
onLoad() {
this.getRequest()
// App端
// #ifdef APP-PLUS
// 页面栈最顶层就是当前webview
let currentWebview = this.$scope.$getAppWebview();
setTimeout(() => {
this.wv = currentWebview.children()[0]
}, 1000)
setTimeout(() => {
this.sendRequestData(this.sendData)
}, 1100)
// #endif
// H5端
// #ifdef H5
window.addEventListener('message',e => {
this.webV = e.source // window的对象
console.log(e.data.data.arg,'接收h5页面发来的消息'); // 接收h5页面发来的消息(11) ====>H5端
},false)
setTimeout(() => {
this.sendRequestData(this.sendData,1)
}, 1000)
// #endif
},
mounted() {},
methods: {
// 发送消息到 HTML
sendRequestData(res,plt=0) {
let param = JSON.stringify(res)
console.log(param);
if(plt == 1){
this.webV.postMessage({type:'new',data:param})
}else{
this.wv.evalJS(`requestData(${param})`);
}
},
// 请求接口
getRequest(){
uni.request({
url: 'http://api.bixiaoe.com/api/homepage/index',
data: {},
success: (res) => {
this.sendData = res.data.data
}
});
},
}
}
</script>
没写完~明天接着完善
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
9
0- 0
已为社区贡献2条内容
所有评论(0)