webview[detail] does not exist【BUG解决】【MUI+VUE】

一,前言

使用了开源的Mui仿知乎日报的模块。
该模块实现的功能:知乎日报阅读。日报评论的查看。

二,bug处理

在将天下事模块移入之前的项目中的时候遇到一个严重的报错:

webview[detail] does not exist

初步检测为:js/mui.min.js的问题
webview[detail] does not exist【BUG解决】【MUI+VUE】_第1张图片
因为目前的主页设计为下部导航栏选项卡的优先级为最高,打开的页面都已嵌入式的方式嵌入页面,导致天下事模块的遮罩层与底部选项卡冲突,导致报错。
主要是因为:定义这个webview页面优先级冲突问题导致。

2.1,bug解决

基础设计,天下事因为js里有遮罩层如果放到底部选项卡中,无法使用。所以取消中间的最高优先级,改为跳转按钮规避这个优先级冲突。

webview[detail] does not exist【BUG解决】【MUI+VUE】_第2张图片
上述改的:取消a标签的存储底部选项卡关联的界面。
将图标与文字放入span标签,赋id值为tianxia。
天下事,点击选择器如下:

//天下事
			document.getElementById('tianxia').addEventListener('tap', function() {
				console.log("天下事");
				mui.openWindow({
					url: './tianxia.html', //通过URL传参
				})
			});

2.2,tianxia.html

<p ref="date">{{formatDate(items.date)}}</p>

传递参数给组件 并绑定原生事件。

<app-list :message="item" :loadimg="'img/translate.png'" v-for="(item,index) in items.stories" @click.native="openDetails($event,item.id,index)"></app-list>

实现滚动刷新,循环显示api接口获取的文章详情。

你可能感兴趣的:(APP开发从0到1,BUG解决合集,前后端分离,bug解决,MUI,VUE,app)