uniapp的webview和H5相互通讯

爱睡D小猪

已于 2022-07-27 09:49:37 修改

阅读量5.3k

点赞数 14

CC 4.0 BY-SA版权

分类专栏： uniapp 移动端相关文章标签： webview javascript 前端

于 2022-06-02 15:38:49 首次发布

本文链接：https://blog.csdn.net/ZhouLoverBrother/article/details/125100438

uniapp 同时被 2 个专栏收录

10 篇文章

订阅专栏

移动端相关

7 篇文章

订阅专栏

本文详细阐述了在uniapp项目中，如何通过webview实现与嵌入的H5页面的双向通讯，特别关注于高德地图功能的集成，包括定位、地图事件监听和数据交换，适合寻求uniapp与H5交互解决方案的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webview和H5页面双方通讯方式

首先，表示对uniapp官网文档的亲切问候，然后，以下代码是测试调试中通过的，我未正常打包app去测试。

友情提示：1、app跟H5如何通讯，代码备注已经写了，我自己测试是没问题的，app还没打包apk测试，不清楚打包后的，2、我的需求是高德地图方面的功能，uniapp官网提供功能太少了，所以嵌套H5页面，需要来回交互，

一整天就为了搞个通讯，血泪史，uniapp官网文档只介绍了H5向app通讯，坑逼，帮上小伙们的话，点个赞吧~

1、uniapp项目方面：代码全贴，webview的url最好加上时间戳

<template>
	<view>
		<web-view :src="url" @message="handleMessage"></web-view>
	</view>
</template>

<script>
	import { mapMenuShow } from '../../utils/MenuShow.js';
	export default {
		data() {
			return {
				longitude:'',//经度
				latitude:'',//纬度
				url:null,
				mapCenterPosition:[],//地图中心点
				linePosition:[],//测距的线路列表
				areaPosition:[],//绘画的多边形列表
				wv: null, // 定义(app)webview对象节点
			}
		},
		onLoad() {
		//开启高德定位功能，自己去源码视图配置定位和key
		   uni.getLocation({
		   	geocode:true,
		   	type: 'gcj02',
		   	success:(res)=>{
		   		console.log(res)
				this.longitude = res.longitude
				this.latitude = res.latitude
				this.url = `http://192.168.253.185:8000/index?longitude=${this.longitude}&latitude=${this.latitude}&id=1&token=token&timestamp=${new Date().getTime()}`
				console.log(this.currentP);
		   		
		   	}
		   })
		
		},
	
		onReady() {
			// #ifdef APP-PLUS
				var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
				setTimeout(() => {
					this.wv = currentWebview.children()[0]
				}, 1000); //如果是页面初始化调用时，需要延时一下
			// #endif
		
		},
		methods: {
			//处理H5向app通讯事件，监听H5
			 handleMessage(evt) { 
				 let data = evt.detail.data[0]
			        console.log('接收到的消息：' ,data);  
				  let type = data.type
				  if(type == '选择地点'){
					  console.log(type);
					  this.mapCenterPosition = data.mapCenterPosition
					  this.navto('/pages/selectSpot/selectSpot',{mapCenterPosition:this.mapCenterPosition})
				  }else if(type == '添加路线'){
					  this.linePosition = data.linePosition
					  this.navto('/pages/addLines/addLines',{linePosition:this.linePosition})
				  }else if(type == '添加区域'){
					  this.areaPosition = data.areaPosition
					  this.navto('/pages/addArea/addArea',{areaPosition:this.areaPosition})
				  }
					
			   },
			   //向H5页面发送消息
			   upH5Event(msg){
				   console.log(this.wv,'this.wv');
				   msg = JSON.stringify(msg)
				   this.wv.evalJS(`postJS(${msg})`);
			   }
		
			
		},
		// 原生导航监听函数
		onNavigationBarButtonTap(e) {
			//点击菜单图标
			if (e.index === 0) {
				mapMenuShow().then((res)=>{
					//res: 0:地图信息 , 1:图层列表, 2:标注图层
					if (res === 0) {
						uni.navigateTo({
							url:'/pages/mapInfo/mapInfo'
						})
						
					}else if(res === 1){
						uni.navigateTo({
							url:'/pages/coverageList/coverageList'
						})
						
					}else if(res === 2){
						uni.navigateTo({
							url:'/pages/labelMenu/labelMenu'
						})
					}
				})
				
			}
			//点击搜索图标
			if (e.index === 1) {
				let msg = {type:'擦玻璃'}
				this.upH5Event(msg)
			}
			
		},
		onBackPress(e) {
			//e.from === 'backbutton' 说明如果点击的是物理返回键或导航栏的返回键就进行以下操作
		      if (e.from === 'backbutton') {
		         uni.navigateBack()
		        //返回值为true 时,表示不执行默认的返回（默认返回上一页），执行自定义的返回
		 		//如果要限制必须写成true
		         return true;
		      }
		    },

	}
</script>
<style scoped>
</style>

2、vue项目打包的H5：会粘贴该引入的代码片段

1、index.html 引入uniapp必须的SDK文件，下面两个cdn文件，官网的介绍有坑，第一个cdn引入时候也是可以的，后面我看到另外一条好像更新的js文件，也引入了。

  <!-- uniapp 通信必须有的 -->
  <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.2/index.js"></script>
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

  <script>
document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.getEnv(function(res) {  
        console.log('当前环境：' + JSON.stringify(res));  
    });  
});
</script>

2、在weview加载的那个vue页面中，直接声明全局方法，变量要跟vue的data里面的变量绑定，

<script>
var parmsObj;
 //接收app传递来的数据
   window.postJS = function(msg) {
                 msg = JSON.parse(JSON.stringify(msg))
                console.log(msg.type);
                console.log(parmsObj.title);
                parmsObj.title =' 再次测试uniapp'
            }

export default {
   data() {
      return {
         aa:{title:'uni'}
      }
   },
   created() {
       parmsObj = this.aa
   },
   methods: {
      //右下角菜单点击事件，H5向app通讯
      handleMenuEvent(index) {
         if (index == 1) {
          //这句就是H5向app通讯，必须引入SDK才能执行成功
            uni.postMessage({
               data: {
                  type:'选择地点',
                  mapCenterPosition: this.mapCenterPosition,
               },
            })
         } else if (index == 2) {
             uni.postMessage({
               data: {
                  type:'添加路线',
                  linePosition: [{lay:11,lng:22}],
               },
            })

         } else if (index == 3) {
              uni.postMessage({
               data: {
                  type:'添加区域',
                  areaPosition: [{lay:11,lng:22}],
               },
            })
         }
      },
     
   },
}
</script>

3、这是测试成功截图，因为我是搞移动端的，页面打印要安装vconsole来查看

1、uniapp运行成功的控制台打印
在这里插入图片描述

2、H5监听APP传递过来的数据，控制台打印，必须通过Vconsole来查看
![![在这里插入图片描述](https://img-blog.csdnimg.cn/2c245c1e56104e1ea62d3b1e06c9bb9b.png](https://img-blog.csdnimg.cn/f51bdab02fa04fbd876a0c663abb228b.png