uni-app 与webView 互相传值

九亿少女无法触及的梦ى2025-03-23 8:34

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)
}
 }
}