app之天下事模块MUI+Flask+MongoDB+HBuilderX _HBuilder

人生难得几回搏，此时不搏待何时。这篇文章主要讲述app之天下事模块MUI+Flask+MongoDB+HBuilderX相关的知识，希望能为你提供帮助。
一，前言使用了开源的Mui仿知乎日报的模块。
该模块实现的功能：知乎日报阅读。日报评论的查看。
二，bug处理在将天下事模块移入之前的项目中的时候遇到一个严重的报错：

webview[detail] does not exist

【app之天下事模块MUI+Flask+MongoDB+HBuilderX】初步检测为：js/mui.min.js的问题

文章图片

因为目前的主页设计为下部导航栏选项卡的优先级为最高，打开的页面都已嵌入式的方式嵌入页面，导致天下事模块的遮罩层与底部选项卡冲突，导致报错。
主要是因为：定义这个webview页面优先级冲突问题导致。
2.1，bug解决基础设计，天下事因为js里有遮罩层如果放到底部选项卡中，无法使用。所以取消中间的最高优先级，改为跳转按钮规避这个优先级冲突。

文章图片

上述改的：取消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接口获取的文章详情。
前端开发规范：
1.div个数匹配，匹配的div的缩进要保持一致
2.不同的div功能内容要做前后注释，例如QQ号展示部分
3.不用的功能部分要有断行做区分，例如两个不同的div功能
4.复杂或难以理解的div功能要做单步注释，注释可以选择在行尾注释，或在每步的上方注释，上方注释要与此步的缩进保持一致
5.CSS的引用要写在head里，JS的引用要写在body最下方，分管不用功能的CSS与JS引用做注释标记闭并段行区分，
CSS与JS的引用要写在一起
6.具有相同功能的div或ul,li要具有相同的缩进
如下：