uni-app H5使用web-view父子之间的相互传值

Zombie@

已于 2022-11-22 14:08:35 修改

阅读量954

点赞数 1

分类专栏： BUG库文章标签：前端 uni-app javascript

于 2022-11-22 14:05:37 首次发布

本文链接：https://blog.csdn.net/Zombie_p/article/details/127981492

版权

BUG库专栏收录该内容

7 篇文章 0 订阅

订阅专栏

uni-app H5使用web-view父子之间的相互传值

遇到的问题：

uni-app 使用uParse组件无法将富文本页面的样式显示完整，比如图片大小的问题，部分复杂样式无法显示，所以使用web-view 组件来展示富文本数据

uni-app页面代码

<template>
	<view class="container_box">
		<web-view  ref='webView' :src="viewUrl" ></web-view>
	</view>
</template>

<script>
	import {
		articelInfo
	} from "@/api/homepage"
	export default {
		data() {
			return {
				viewUrl: "/hybrid/html/index.html",
			}
		},
		onLoad(option) {
				console.log('route', this.$route)
				if (option.id) {
					this.id = option.id
					//简单的传值 可以放在链接上
					this.viewUrl="/hybrid/html/index.html?id="+this.id; 
				}
					this.get_articelInfo()

		},
		mounted() {
		//父组件接收子组件的内容
			// #ifdef H5 
			 let _this = this;
			    window.addEventListener('message', event=> {
					console.log("父页面：",event);
			        if(event.data.even=='previewFile') {
						_this.previewFile(event.data);
			        }
			    },false)
			// #endif 
		},
		destroyed() {
			uni.removeStorageSync("articelInfo");
		},
		methods: {
			get_articelInfo() {
				//省略数据查询。。。。
						const articelInfo={
							even:'articelInfo',
							id:id,
							updateUser:updateUser,
							title : title ,
							createTime : createTime,
							enclosure:enclosure,
							author : author,
							visits :"阅读" + " " + visits,
							publishTime: parseTime(publishTime, "{y}-{m}-{d}"),
							updateTime : updateTime,
							updateUserName : updateUserName,
							createUser : createUser,
							content:content.replace(reg, 'video').replace(/< img [^>]*/gi, (match, capture) => {
							return `< img style="max-width: 100%" />`
						}),
						}
						//查到数据之后，将数据传到子组件
						window.frames[0].postMessage(articelInfo,"*")
					}
				})
			},
		}
	}
</script>

web-view(HTML页面)，子组件接收父组件数据，子组件传值给父组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>{{articelInfo.title}}</title>
		<script src="./js/vue@2.js"></script>
	</head>
	<body>
		<div id="view-vue" class="container_div content" v-if="articelInfo.id != null">
			省略内容
			<div v-html="articelInfo.content"></div>
		</div>
		<script>
			new Vue({
				el: '#view-vue',
				data: function() {
					return {
						articelInfo: {
							id: null
						},
					}
				},
				mounted() {
					//子组件监听父组件传过来的数据
					window.addEventListener('message', (event) => {
						console.log("子组件收到消息:", event)
						if (event.data.even == 'articelInfo') {
							this.$nextTick(function() {
								this.$set(this, 'articelInfo', event.data);
							})
						}
					}, false);
				},
				methods: {
				//点击事件向父组件传值
					clickFile(item) {
						item.even = "previewFile";
						if (window.parent) {
							window.parent.postMessage(item, '*');
						}
					},
				}
			})
		</script>
	</body>
</html>