uniapp内嵌的webview H5与应用通信

H5端:

1、找到index.html引入依赖

html 复制代码
<script type="text/javascript" src="https://unpkg.com/@dcloudio/[email protected]/index.js"></script>

2、在需要通讯处发送消息

javascript 复制代码
uni.postMessage({
  data:{
    code:200,
    msg:"处理完成"
  }
})

uniapp端:

使用@message="handlerMessage"

html 复制代码
<web-view @message="handlerMessage" :fullscreen="false"
				:src="data.type===1?`${BASE_URL}#/tiopc?id=${data.id}&class_id=${class_id}`:data.url"></web-view>

回调的event里有所需信息

javascript 复制代码
function handlerMessage(event) {
		console.log("接收到信息");
		let {
			code,
			msg
		} = event.detail.data[0]
		if(code !== 200){
			uni.showToast({
				title:msg,
				icon:"error"
			})
			return
		}
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}
相关推荐
!win !3 小时前
uni-app小程序登录后…
前端·uni-app
aklry7 小时前
uniapp实现在线pdf预览以及下载
前端·pdf·uni-app
繁依Fanyi7 小时前
我的 PDF 工具箱:CodeBuddy 打造 PDFMagician 的全过程记录
java·pdf·uni-app·生活·harmonyos·codebuddy首席试玩官
陌路物是人非9 小时前
uniapp取消浏览自动填充
java·服务器·uni-app
lqj_本人10 小时前
鸿蒙OS&UniApp实现视频播放与流畅加载:打造完美的移动端视频体验#三方框架 #Uniapp
uni-app·音视频·harmonyos
lqj_本人12 小时前
鸿蒙OS&UniApp 实现一个精致的日历组件#三方框架 #Uniapp
uni-app·harmonyos
bysjlwdx14 小时前
uniapp婚纱预约小程序
小程序·uni-app
骑450的皮卡丘21 小时前
uniapp设置 overflow:auto;右边不显示滚动条的问题
css·uni-app·css3
lqj_本人21 小时前
鸿蒙OS&UniApp实现个性化的搜索框与搜索历史记录#三方框架 #Uniapp
华为·uni-app·harmonyos
lqj_本人21 小时前
鸿蒙OS&UniApp制作多选框与单选框组件#三方框架 #Uniapp
前端·javascript·uni-app