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

遇到的问题：
uni-app页面代码
web-view(HTML页面)，子组件接收父组件数据，子组件传值给父组件

遇到的问题：

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>

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

uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
webview传递参数给html,uniapp与webview之间的相互传值
1.uni-app 如何发送数据到 H5? 其实很接单.在 web-view 中只需要通过 URL 就可以向 H5 进行传参例如在 uni-app 中: export default { data( ...
为自己搭建一个鹊桥 -- Native Page与Web View之间的JSBridge实现方式
原文:为自己搭建一个鹊桥 -- Native Page与Web View之间的JSBridge实现方式说起JSBridge,大家最熟悉的应该就是微信的WeixinJSBridge,通过它各个公众页面 ...
App server 与 Web server之间的区别
原文: http://www.javaworld.com/javaqa/2002-08/01-qa-0823-appvswebserver.html app服务器和web服务器的区别是什么呢? 简单来 ...
省钱兄同城跑腿小程序源码uniapp前端模版源码（小程序+APP+H5）
开源省钱兄同城跑腿源码,目前只开源用户端V2版本部分核心模块源码提供学习研究使用uniapp技术,提供学习使用不可商业适配支持公众号+APP+H5+小程序,使用Hbuilder导入即可运行 #功能 ...
web页面判断是否安装某app，从web启动app应用
web页面判断是否安装某app,从web启动app应用 web页面判断手机里是否安转应用的原理就是:首先试着打开手机端某个app的本地协议:如果超时就转到app下载页,下载该app. URL sche ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...

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

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

遇到的问题：

uni-app页面代码

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

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

最新文章

热门文章