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)
	}
相关推荐
anyup11 小时前
分享 5 套 uni-app 实用主题,一键适配暗黑模式
前端·uni-app·视觉设计
gg1593572846015 小时前
Uni-app跨平台开发全解课程:从零基础到企业级多端落地实战
vue.js·uni-app
xshirleyl2 天前
uniapp小兔鲜儿day3
uni-app
Geek_Vison2 天前
2026 跨端框架横评:FinClip、Taro、uni-app、Remax、mPaaS 五款工具技术+业务双维度测评
小程序·uni-app·taro·mpaas·小程序容器
RuoyiOffice3 天前
从 0 到 1 搭建 RuoyiOffice:30 分钟跑通后端+前端+移动端
前端·spring boot·uni-app·开源·oa·ruoyioffice·hrm
Geek_Vison3 天前
APP集成了50多个小程序后,如何搭建一个小程序管理平台来管理这些小程序~
小程序·uni-app·apache·mpaas·小程序容器
梦曦i3 天前
uni-router v1.1.1发布:守卫超时保护+路由监听
前端·uni-app
梦曦i3 天前
全面解析uni-router v1.2.0功能
前端·uni-app
不如摸鱼去3 天前
Wot UI 2.1.0 发布:ConfigProvider 全局配置能力升级
ui·小程序·uni-app
PedroQue994 天前
uni-router:uni-app路由管理新选择
前端·uni-app