场景：主项目为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 官网
