uniapp内嵌的webview H5与应用通信

H5端:

1、找到index.html引入依赖

html 复制代码
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/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)
	}
相关推荐
bug总结7 小时前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
大佐不会说日语~9 小时前
Android 16 下 uni-app APP 提示“网络连接失败”的排障与修复
android·uni-app
2501_9151063210 小时前
苹果App Store上架费用及流程全面解析
android·ios·小程序·https·uni-app·iphone·webview
白远山14 小时前
家政服务派单平台搭建实战指南:从需求分析到系统设计全流程解析
java·开发语言·架构·uni-app·需求分析
宸翰17 小时前
解决uni-app 中 SVG 图片在 iOS 端显示模糊问题
前端·uni-app
走到天涯海角17 小时前
uniApp蓝牙在手机上测试
智能手机·uni-app
bug总结2 天前
uniapp的easycom自动组件注册机制
uni-app
HF_code2 天前
uniapp-history路由深度指南
uni-app
suliqiang2 天前
【前端技术】 Web 前端技术36年 演进全景图
信息可视化·微信小程序·小程序·前端框架·uni-app·人机交互·xcode
梦曦i2 天前
uni-router v0.2.0重磅发布:全链路拦截+重复导航优化
前端·uni-app