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)
	}
相关推荐
滴水未满2 小时前
uniapp的组件
uni-app
object not found4 小时前
基于uniapp开发小程序自定义顶部导航栏状态栏标题栏
前端·javascript·小程序·uni-app
总爱写点小BUG6 小时前
VU-Icons:打造极致体验的 Vue3 & UniApp 双端 SVG 图标库
uni-app·vue·组件库·图标组件库
咸虾米_6 小时前
uniapp引入iconfont字体图标在微信小程序中适用
微信小程序·小程序·uni-app
知兀6 小时前
【uniapp/vue3+ts/js】eslint9+prettier+husky+lint-staged
前端·javascript·uni-app
2501_915918411 天前
如何在iPad上找到并打开文件夹的完整指南
android·ios·小程序·uni-app·iphone·webview·ipad
weixin_638303111 天前
uniapp组合式和选项式
javascript·vue.js·uni-app
木子啊1 天前
UniApp Base64上传终极解决方案
uni-app·base64·base64转图片·base64上传
2501_915918411 天前
Wireshark、Fiddler、Charles抓包工具详细使用指南
android·ios·小程序·https·uni-app·iphone·webview
阿宇爱吃鱼1 天前
uniapp input输入框,限制金额输入格式
前端·javascript·uni-app