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)
	}
相关推荐
RuoyiOffice2 小时前
企业请假销假系统设计实战:一张表、一套流程、两段生命周期——BPM节点驱动的表单变形术
java·spring·uni-app·vue·产品运营·ruoyi·anti-design-vue
KongHen023 小时前
uniapp-x实现自定义tabbar
前端·javascript·uni-app·unix
RuoyiOffice7 小时前
SpringBoot+Vue3+Uniapp实现PC+APP双端考勤打卡设计:GPS围栏/内网双模打卡、节假日方案、定时预生成——附数据结构和核心源码讲解
java·spring·小程序·uni-app·vue·产品运营·ruoyi
2501_915921439 小时前
2026 iOS 上架新趋势 iOS 发布流程模块化
android·ios·小程序·https·uni-app·iphone·webview
窝子面1 天前
uni-app的初体验
uni-app
笨笨狗吞噬者1 天前
【uniapp】微信小程序实现自定义 tabBar
前端·微信小程序·uni-app
雪芽蓝域zzs1 天前
uniapp MD5加密 加密传输 密码加密
uni-app
2501_915909061 天前
iOS 抓包不越狱,代理抓包 和 数据线直连抓包两种实现方式
android·ios·小程序·https·uni-app·iphone·webview
给钱,谢谢!1 天前
记录uni-app Vue3 慎用 Teleport,会导致页面栈混乱
前端·vue.js·uni-app
郑州光合科技余经理2 天前
海外O2O系统源码剖析:多语言、多货币架构设计与二次开发实践
java·开发语言·前端·小程序·系统架构·uni-app·php