首先，让我们来谈谈会应用到什么业务场景。
在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).navigationconsole.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// 页面栈最顶层就是当前webviewlet currentWebview = this.$scope.$getAppWebview();setTimeout(() => {this.wv = currentWebview.children()[0]}, 1000)// #endif// H5端// #ifdef H5window.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// 页面栈最顶层就是当前webviewlet currentWebview = this.$scope.$getAppWebview();setTimeout(() => {this.wv = currentWebview.children()[0]}, 1000)setTimeout(() => {this.sendRequestData(this.sendData)}, 1100)// #endif// H5端// #ifdef H5window.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: {// 发送消息到 HTMLsendRequestData(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>

没写完~明天接着完善

uniapp实现webview和APP之间的传值通信 / VUE和HTML页面通信相关推荐

vue、bus 使用遇到的坑，组件之间无法传值；vue、bus 第一次获取不到值，后面再点击重复执行
vue.bus 使用遇到的坑,组件之间无法传值:vue.bus 第一次获取不到值,后面数据叠加问题定位: 出现无法传值的情况,检查传值过程中组件是否还没有渲染:可能出现的情况是:组件被if,在你使用 ...
两个html页面之间通讯,面试官：前端跨页面通信，你知道哪些方法？
引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有些时候,我们希望能在这些" ...
uni-app之- 后台唤醒app时，跳转对应锁屏页面
uni-app分为应用生命周期和页面生命周期实现换台唤醒app进行对应操作时,我们需要用到应用声明周的:onLaunch,初始启动app,缓存标记应用声明周的:onShow,判断标记,是否进入对 ...
vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off
vue兄弟组件之间的传值 1.建立一个单独的文件bus.js import Vue from 'vue' export default new Vue() 2.传递事件 // 传递事件 import ...
uni-app 使用 web-view 页面之间互相跳转、通信
最近开发小程序的时候.需要嵌入一个第三方网站.并且和第三方网站有些交互.这个第三方页面本身就是一个 HTML 页面.想着把它给嵌入到 uni-app 中,结果没实现-(很多的 js 代码在小程序中不识 ...
实践：uniapp中webview内置网页与app实时通讯
目录 1.uniapp官网webview地址 2.uniapp中vue文件代码 3.webview链接的远程网页代码 4.vue引入uniapp的JS 5.到此uniapp使用webview内置网页与 ...
ios俩个APP之间跳转、传值
两个APP之间的跳转是通过[[UIApplication sharedApplication] openURL:url]这种方式来实现的. 1.首先设置第一个APP的url地址 2.接着设置第二个AP ...
ios两个app之间传值和跳转实现（转发）
两个APP之间的跳转是通过[[UIApplication sharedApplication] openURL:url]这种方式来实现的. 1.首先设置第一个APP的url地址 2.接着设置第二个AP ...
web与APP之间的交互---WebViewJavascriptBridge
在实际项目之中,经常会遇到app之中嵌入网页的情况(Hybrid),就需要web网页与原生app之间交互,比如获取当前用户信息等.一种简单的方式就是通过url参数来搞定,但是这种方式异常死板,所以有了 ...

uniapp实现webview和APP之间的传值通信 / VUE和HTML页面通信