DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2014-12-16 22:28
  • 更新:2023-11-11 16:41
  • 阅读:376740

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方法中;

184 关注 分享
多串君 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 BoredApe comer wuweitiandian xing0313074 junjieit 飘落的风声 Dannise zcxhappy 啊尼玛 Annny LXJIA hoonng lz_lzl choujjss davimilas

要回复文章请先登录注册

背着电脑走江湖

背着电脑走江湖

从七月中旬开始做混合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
专注写bug

专注写bug

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

1***@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
1***@163.com

1***@163.com

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

6***@qq.com

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

6***@qq.com

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