uni-app 与webView 互相传值

uni-app 向webView 传值

在uni-app 传值有多种实现方式,主要推荐evalJS ,次要webSorcket
重点:

1.webView 要找到正确的children!如果页面中只有一个webView标签则直接可以 currentWebview.children()[0]

2.H5页面中的监听 function 必须写在全局,不要写在任何load事件中!

javascript 复制代码
  // index.vue 
let currentWebview = this.$scope.$getAppWebview()
let children = currentWebview.children()
// 这里循环获取想要传递消息的webView
let webView = children.filter((item) => item.id.indexOf('webviewId') > -1)[0]
webView.evalJS(`myCustomEvent('来自app的消息')`)
javascript 复制代码
// webView
 // html页面监听
 		function myCustomEvent(res) {
			uni.postMessage({
				data: {
					data: res,
					type: 'myCustomEvent',
				},
			})
		}
H5 向uni-app 传值

首先需要下载官方的web-view.js

javascript 复制代码
// H5页面
	window.uni.postMessage({
			data: {
				data: 'success',
				type: 'onLoad',
			},
		})
javascript 复制代码
//webView 页面
	<web-view ref="webviewRef" class="map_con" v-if="isMap" :webview-styles="webviewStyles" :fullscreen="true" :src="webViewUrl" @message="handleMessage"></web-view>
export default{
methods:{
handleMessage(e){
 console.log('来自H5的消息',e)
}
 }
}
相关推荐
qq_424409196 小时前
uniapp的app项目,添加全局弹窗
uni-app
七夜zippoe9 小时前
uniapp跳转页面时如何带对象参数
uni-app·携带参数
racerun9 小时前
UniApp中的pages.json 和 tabBar
uni-app·json
米粒宝的爸爸1 天前
uniapp在app端,在导航栏设置自定义按钮
uni-app
dssxyz1 天前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
xw51 天前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 天前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
颜渊呐2 天前
uniapp中APPwebview与网页的双向通信
前端·uni-app
白杨木影子被拉长2 天前
多状态映射不同样式(scss语法)
vue.js·uni-app
一念杂记2 天前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app