DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2014-12-16 22:28
  • 更新:2019-06-27 14:38
  • 阅读:306219

MUI开发注意事项

分类:MUI

DOM结构

关于mui页面的dom,你需要知道如下规则。

固定栏靠前

所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元素;常见组件包括:顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tab);这些元素使用时需遵循一个规则:放在.mui-content元素之前,即使是底部工具条和底部选项卡,也要放在.mui-content之前,否则固定栏会遮住部分主内容;

一切内容都要包裹在mui-content中

除了固定栏之外,其它内容都要包裹在.mui-content中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮罩,mui为了解决这个问题,定义了如下css代码:

    .mui-bar-nav ~ .mui-content {  
        padding-top: 44px;  
    }  
    .mui-bar-footer ~ .mui-content {  
        padding-bottom: 44px;  
    }  
    .mui-bar-tab ~ .mui-content {  
        padding-bottom: 50px;  
    }  

你当然可以通过自定义CSS的方式实现如上类似效果,但为了使用简便,建议将除固定栏之外的所有内容,全部放在.mui-content中。

始终为button按钮添加type属性

若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。

窗口管理

页面初始化:必须执行mui.init方法

mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次mui.init()方法;

页面跳转:抛弃href跳转

当浏览器加载一个新页面时,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越的体验障碍;为解决这个问题,建议使用mui.openWindow方法打开一个新的webview,mui会自动监听新页面的loaded事件,若加载完毕,再自动显示新页面;
扩展阅读:

页面关闭:勿重复监听backbutton

mui框架自动封装了页面关闭逻辑,若希望自定义返回逻辑(例如编辑页面的返回,需用户确认放弃草稿后再执行返回逻辑),则需要重写mui.back方法,切勿简单通过addEventListener添加backbutton监听,因为addEventListener只会增加新的执行程序,mui默认封装的监听执行逻辑依然会继续执行,因此若仅addEventListener添加用户确认框,则用户即使选择了取消,也会继续关闭窗口。

手势操作

点击:忘记click

快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作,统统使用如下代码:

    element.addEventListener('tap',function(){  
        //点击响应逻辑  
    });  

常见错误

Uncaught ReferenceError: plus is not defined

在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,否则可能会报“plus is not defined”的错误;
mui为简化开发,将plusReady事件封装成了mui.plusReady()方法,凡涉及到HTML5+的api,建议都写在mui.plusReady方法中;

174 关注 分享
多串君 liozeeho Curtis kulutana 风影大人 larruping 漠漠 menway 永恒死神 H20 llyzlc 威风堂堂 Androidcc Hapety 发飙的蜗牛 大师兄 CY python scuking 海的007 柠檬贼好 hum super_cj 无名2015 薯子 HeyMang 蔡繁荣 仙人指路 蒙太奇zz justjavac Kid wenju huyong1978 wudongjie lxr 五块钱的果汁 comer wuweitiandian xing0313074 junjieit 飘落的风声 Dannise zcxhappy 啊尼玛 Annny LXJIA hoonng lz_lzl choujjss davimilas

要回复文章请先登录注册

1057796814@qq.com

1057796814@qq.com

请问h5+如何使用呢
2019-06-27 14:38
953744806@qq.com

953744806@qq.com

回复 辉辉同学:
貌似只对传统html的dom点击事件做了tap封装;原生view的控件事件本来就执行的click,不存在延迟
2019-05-17 16:57
辉辉同学

辉辉同学

原生画的tab上面添加tap事件无效,用click可以。貌似完全用tap替换click并不是所有情况下都行
2019-04-18 11:57
627693965@qq.com

627693965@qq.com

回复 背着电脑走江湖:
怎么是帅哥美女交友群
2018-12-13 16:51
背着电脑走江湖

背着电脑走江湖

回复 背着电脑走江湖:
由于时间关系,群已经解散了。请勿添加
2018-12-05 12:00
背着电脑走江湖

背着电脑走江湖

回复 haljk:
同级选择器
2018-10-17 14:41
背着电脑走江湖

背着电脑走江湖

从七月中旬开始做混合app,到8月中下旬app上线。已经完成了一个简单的app并且在腾讯和苹果appstore上线了,这期间遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,现在正准备开发一款旅游类的混合app,原型图已经出。现在准备开工了。同时,希望有一起做混合app的,有兴趣加qq群260548659一起讨论交流学习,爬坑,共同进步。
2018-10-17 14:39
gzg

gzg

楼主写的很好,有个问题就是,怎么在子页面下的详情页面也能显示底部导航?搞了半天弄不出来。。
2018-08-27 17:30
haljk

haljk

回复 haljk:
已找到,https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors,匿了
2018-08-02 16:05
haljk

haljk

默默问一句,mui.css里选择器的 ~ 是个啥用法,实在没查到出处
2018-08-02 16:00
765199214@qq.com

765199214@qq.com

回复 15074125505@163.com:
官方写的其实很明白的,你只需要细心的看下介绍下面的小字 那个超链接格式的很小的字
2018-07-26 11:35
172008340@qq.com

172008340@qq.com

因为在手机端上 它要确定你是单击还是双击 所以要等你300ms确定你是否有下次点击。所以有延迟的, pc端没有。有了click dblclick就触发不了了 根本不得等你
2017-10-17 15:33
qq421065846

qq421065846

从七月中旬开始做混合app,到8月中下旬app上线。已经完成了一个简单的app并且在腾讯和苹果appstore上线了,这期间遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,现在正准备开发一款旅游类的混合app,原型图已经出。现在准备开工了。同时,希望有一起做混合app的,有兴趣加qq群654230427一起讨论交流学习,爬坑,共同进步。
2017-09-11 22:25
15074125505@163.com

15074125505@163.com

新手,感觉这玩意官方的dome不好找,还经常不执行,百度又出不了想要的,只能说文档能不能稍微写明白点,功能还是蛮强大的
2017-09-05 09:29
602697966@qq.com

602697966@qq.com

回复 602697966@qq.com:
mui引入vue 写反
2017-08-23 10:43
602697966@qq.com

602697966@qq.com

建议把vue引入mui的步骤写下来,新手看得一脸懵逼,如何用都不知道,怎么会用你的?
2017-08-23 10:42
qq421065846

qq421065846

从七月中旬开始做混合app,到现在半个月过去了,一个简单的app已见雏形,期间也遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,欢迎有兴趣加qq421065846一起讨论交流学习,爬坑。
2017-08-01 15:19
530181917@qq.com

530181917@qq.com

嗯,先Demo看看,谢谢
2017-04-19 11:54
hon_ghuan1688@126.com

hon_ghuan1688@126.com

真机调试检测设备是不是优化下,老是检测不到手机,要重新启动hbuilder才行
2017-03-05 17:04
落月无声

落月无声

试几种同样形式的工具,还是hb有感觉,不错。加油哦!
2017-02-21 22:41
84231311@qq.com

84231311@qq.com

对,这文档很好,多些的话,大家少些坑要填
2017-02-10 14:11
小虎虎

小虎虎

mui开发注意事项
2017-02-03 09:51
289435209@qq.com

289435209@qq.com

回复 458141536@qq.com:
使用谷歌浏览器,F12,然后ctrl+shift+m
2016-12-27 18:06
heshiweij@gmail.com

heshiweij@gmail.com

机智的我,一上来就把注意事项给读了。
2016-12-12 14:35
h.v@qq.com

h.v@qq.com

还是bootstrap的文档好
2016-12-05 17:26
458141536@qq.com

458141536@qq.com

怎么在电脑上触发tap,用浏览器的话,怎么调试
2016-09-20 08:41
458141536@qq.com

458141536@qq.com

怎么用谷歌浏览器触发tap
2016-09-20 08:41
暮云凝碧

暮云凝碧

凡涉及到HTML5+的api,建议都写在mui.plusReady方法中;
有没有具体的代码?应该怎么写
2016-09-07 09:29
花卷君

花卷君

MARK!
2016-08-08 19:04
lwfendou@163.com

lwfendou@163.com

亲们 我是菜鸟 刚刚接触MUI,通过查阅 发现很强大。在准备开发之前才发现MUI好像是用来开发webAPP的,请问用开发webAPP的方式开发完成后不打包,直接将项目放到服务器上作为手机网站使用,后期会不会有什么问题呢?还请各位指点指点,谢谢了!!!
2016-08-04 23:20
若末lan

若末lan

回复 为乐而来:
为了更接近原生
2016-07-08 18:01
王兵

王兵

遇到问题,看看基本都在这里,新手少走弯路
2016-06-16 15:15
为乐而来

为乐而来

document.getElementById("btn").addEventListener('tap',function(){
//点击响应逻辑
});

为什么不直接封装成
mui("#btn).tap(function(){
//点击响应逻辑
});
2016-05-26 18:23
2577969522@qq.com

2577969522@qq.com

Uncaught ReferenceError: plus is not defined
注意使用真机测试,否则经常出现这个错误
2016-05-23 14:47
345420287@qq.com

345420287@qq.com

文档不是很好找,需要查看的API找不到。好头痛
2016-04-25 15:53
罗成007

罗成007

回复 心然:
确实,还是之前的文档看起来方便,先在的文档很多地方都需要自己去猜测是什么意思
2016-04-19 17:34
心然

心然

Dcloud的文档真是 大简至烦 的最佳实现,发现原来的文档(http://dcloudio.github.io/mui/components/)比现在的好N倍
2016-03-17 16:20
gobbs

gobbs

mui.plusReady不执行怎么办? 官方的Demo都报错了
2016-02-20 10:11
wclssdn

wclssdn

赞啊~
2016-02-01 19:17
黑皮南瓜

黑皮南瓜

MUI不错,只是没有系统的入门教程,希望能重视一下,别输在了最后一公里上,就太冤了!
2016-01-23 10:13
谷震平

谷震平

回复 justjavac:
我发现了你的轨迹。。。。。
2016-01-22 17:34
东哥的苹果

东哥的苹果

尼玛,这文档,实习生写的吧!
2016-01-13 17:35
章鱼小丸子

章鱼小丸子

支持MUI!
2016-01-10 08:12
levin

levin

中国人做的东西就是比老外做的要差那么一点!做出来得东西好是好,写的文档差劲得要命!!
2015-12-23 11:51
tolerious

tolerious

新手必读、最近知道了有MUI随意想学学、、
2015-12-10 18:35
peter_yu

peter_yu

是不是如果开发ios应用,用到native.js中的ios api一定要在mac机器上面?
2015-12-10 17:34
鸭爷

鸭爷

不错,挺好的
2015-12-03 10:13
qmit

qmit

回复 DCloud_UNI_CHB:
发现新API的都还没有老的浏览起来那么直观哦。加油哦。
2015-11-11 14:25
木头人2014

木头人2014

动手前,先看看这篇文章。
2015-10-25 13:57
magengshun

magengshun

请问MUI不能用浏览器打开,那用什么打开呢?
2015-10-22 15:16
HenryYong

HenryYong

回复 DCloud_UNI_CHB:
但是如果只要给一个元素绑定的话,好像用on会不起作用,只能用addEventListener
2015-10-06 23:36
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 HenryYong:
这时候建议使用事件委托,参考:http://dev.dcloud.net.cn/mui/event/#on
2015-10-06 21:22
HenryYong

HenryYong

对于“点击:忘记click”这个部分还有一个小问题,那就是如果页面内容是动态加载的,那addEventListener绑定的tap事件就不会生效,还是得用onclick绑定,在js中写function调用
2015-10-05 18:07
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 xinglongjian:
新的API文档地址:http://dev.dcloud.net.cn/mui,还在逐步完善中,目前每天大概1-2个API的速度在添加。
2015-08-21 11:37
xinglongjian

xinglongjian

MUI的确很不错,建议出一个api和新手指南的系统性文档,而不是针对某一问题的解决方法
2015-08-21 09:13
Annny

Annny

不错哦 很好 能再多点吗 不够看啊
2015-08-14 16:51
后海

后海

挺好,继续不断扩充,完善
2015-08-13 17:52
登

是的 这个文档写的真不错,省去不少麻烦
2015-07-27 18:57
comer

comer

这个太有用了,值得时常来看,否则真会出现莫名的错误
2015-07-01 11:36
ref

ref

还是一头雾水啊。
2015-07-01 11:12
雨一直下天黑了

雨一直下天黑了

评论倒序一下吧。
2015-06-16 18:22
wenju

wenju

得时常来看看这些注意事项,不然还真会出现莫名其妙的错误..
2015-06-08 08:59
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 琪辉:
js、css、font分别引入即可;
2015-06-07 15:54
琪辉

琪辉

创建一个5+APP后,如何导入MUI?
2015-06-06 21:31
Semmy

Semmy

为毛没有API文档啊。用起来很不方便额。
2015-06-05 11:48
星电月

星电月

为毛没有API文档啊。用起来很不方便额。
2015-05-28 19:48
Geeker

Geeker

MUI APICLOUD APPCAN 都挨个试用了下 还是觉的HB的工具好用啊 其他的就是资源多些
2015-05-13 02:16
justjavac

justjavac

新手必读,否则会走很多弯路。
2015-05-08 09:40
蒙太奇zz

蒙太奇zz

MUI确实好用啊~尽快推广吧
2015-04-27 15:22
无名2015

无名2015

这些细节对新开发人员来说不是一般的重要
2015-04-17 15:41
柠檬贼好

柠檬贼好

这个文档挺不错的,建议大家多看看,这样才不会出问题啊
2015-04-02 14:20