[uni-app] web-view 子传父，父传子，子父（父子）之间的相互传值（相互通信）

一、演示及项目地址

🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）

子项目地址（子界面（vite项目））：https://gitee.com/lyt-top/uni-app-web-view/tree/master/%E5%AD%90%E7%95%8C%E9%9D%A2%EF%BC%88vite%E9%A1%B9%E7%9B%AE%EF%BC%89

父项目地址（父界面（uni-app项目））：https://gitee.com/lyt-top/uni-app-web-view/tree/master/%E7%88%B6%E7%95%8C%E9%9D%A2%EF%BC%88uni-app%E9%A1%B9%E7%9B%AE%EF%BC%89

二、子传父

2.1 需要注意事项

需真机运行（数据线链接），HBuilder X 中

1. 子界面需引入 uni.webview.1.5.2.js
2. 父界面：使用 @message
3. 子界面：使用 uni.postMessage（传值需放入 data 中）

2.2 使用教程

2.2.1 子界面（vite项目）（发送）

main.js 中引入，uni.webview.1.5.2.js 点击跳转查看

import "/uni.webview.1.5.2.js";
1

components/HelloWorld.vue 下使用 uni.webView.postMessage，需要注意：要传送的数据放 data 里

<template>
  <button @click="onSend">网页向uni-app传值button>
template>

<script>
export default {
  methods: {
    onSend() {
      uni.webView.postMessage({
        data: {
          name: "lyt",
          age: 18,
        },
      });
    },
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.2.2 父界面（uni-app项目）（接收）

pages/index/index.vue 下，通过 @message 接收。url 地址为 子界面（vite项目） cnpm run dev 跑起来后的项目地址（建议使用 ip 地址访问）

<web-view :src="url" @message="handleMessage">web-view>
1

methods 中写 handleMessage 方法

methods: {
	handleMessage(res) {
		console.log(JSON.stringify(res))
		const {
			name,
			age
		} = res.detail.data[0]
		uni.showModal({
			title: '获取子级传的值',
			content: `获取到的值为：name：${name}，age：${age}`,
			showCancel: false,
			confirmText: '关闭弹出',
			success() {}
		})
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.2.3 效果图

HBuilder X 中 打印的值：

真机效果图：

三、父传子

3.1 需要注意事项

1. 父界面：先获取当前 web-view（this.$scope.$getAppWebview().children()[0]）,通过 evalJS("xxx({msg: '雷猴啊'})")
2. 子界面：window.xxx = (res) => {}

3.2 使用教程

3.2.1 子界面（vite项目）（接收）

sendParentData 为父界面（uni-app项目）中 evalJS 方法定义的方法名 （可随便自定义）

<template>
  <div>xxxdiv>
template>

<script>
export default {
  created() {
    window.sendParentData = (res) => {
      console.log(JSON.stringify(res));
      window.alert(JSON.stringify(res));
    };
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.2.2 父界面（uni-app项目）（发送）

通过 evalJS 方法传送方法及数据

<template>
	<view class="content">
		<button style="position: relative;z-index: 2;" @click="onSend">父传子button>
		<web-view :src="url" @message="xxx">web-view>
	view>
template>

<script>
	export default {
		data() {
			return {
				url: 'http://192.168.1.103:3000/'
			}
		},
		onShow: function() {},
		methods: {
			onSend() {
				// #ifdef APP-PLUS
				const vw = this.$scope.$getAppWebview().children()[0]
				vw.evalJS("sendParentData({msg: '雷猴啊'})")
				// #endif
			}
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3.2.3 效果图

HBuilder X 中 打印的值：

真机效果图：

四、总结

1. 父传子：父：通过 evalJS('xxx')，子：通过 window.xxx 回调
2. 子传父：子：通过 uni.webView.postMessage({data: {xxx}})，父：通过 @message 接收