uniapp 嵌套 h5项目（webView实现）亲测有效

场景：主项目为uniapp实现的app项目 通过分包 子项目是 h5 + vue实现

uniapp端

<template>
<!-- 注：使用动态url -->
	 <view>
		<web-view :src="url"></web-view>
	<view>
</template>

<script>
	export default {
		data() {
			return {
				url: ''
			}
		},
		onLoad() {
            // 默认一个你的html（h5地址）
			this.url = '../xxx.html'
		},
			
		mounted(){
            // 需要监听 message 之后触发方法
			window.addEventListener("message", this.handlePostMessage);
		},
		methods: {
            // 触发方法
			handlePostMessage(data) {
				console.log(data)
				console.log(data.data.data.arg.data)
				if (data.data.data.arg.data == 'h5页面传的值') {
					// 给url重新赋值
					this.url = ""
				} else if (data.data.data.arg.data == '判断返回uniapp页面') {
                    // 其他的跳转查看uniapp官网
					uni.switchTab({
						url: '/pages/xxx/index'
					});
				}

			},
		}
	}
</script>

html 页面

<!-- 首先根据引入离线的 webview 或者在线的 我用的是离线的 之后改的方法名 防止和uniapp冲突 -->
<script src="../../js/uni.webview.js" type="text/javascript" charset="utf-8"></script>

methods:{
 fangFa(){
   // webUni 是在离线的webView中改的 文件自己去下载
    webUni.postMessage({
				data: {
					data: 'goList', //传过去用于判断的值
					type: 'message' // type 默认就写message 就写 也可以不写
				}
			});
    }
}

之后接收到值 通过判断就可以实现了

console.log(data.data.data.arg.data) 图片

webView.js 离线修改版

链接: https://pan.baidu.com/s/1ZOJ7ZN1ujj0qFppz7hIeiw  提取码: qf9k

uniapp 官网

web-view | uni-app官网