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)
	}
相关推荐
1登峰造极2 小时前
uniapp中uni-popup在小程序中滚动穿透问题
小程序·uni-app
AscendKing2 小时前
uniapp介入极光推送教程 超级详细
uni-app·极光推送
new出一个对象2 小时前
uniapp实现APP版本升级
uni-app
软件聚导航3 小时前
uniapp 安卓和ios震动方法,支持息屏和后台震动,ios和安卓均通过测试
android·ios·uni-app
秋田君12 小时前
uniapp跨域问题解决方案
uni-app
T^T尚12 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
new出一个对象15 小时前
uniapp的renderjs使用
uni-app
碎像15 小时前
uni-app 发布媒介功能(自由选择媒介类型的内容) 设计
uni-app
anyup_前端梦工厂15 小时前
uni-app 认识条件编译,了解多端部署
前端·vue.js·uni-app