mui开发注意事项
<p style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">来源：http://blog.csdn.net/hbcui1984/article/details/42156409</p><p style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><br></p><p style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问<a target="_blank" href="http://dev.dcloud.net.cn/mui" style="color: rgb(202, 0, 0); text-decoration: none;"><span style="color: rgb(51, 102, 255);"><strong>mui官网</strong></span></a></p><h2 style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><a name="t0" style="color: rgb(202, 0, 0);"></a>DOM结构</h2><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">关于mui页面的dom，你需要知道如下规则。</span><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><h3 style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><a name="t1" style="color: rgb(202, 0, 0);"></a>固定栏靠前</h3><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；</span><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">### 一切内容都要包裹在mui-content中</span><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：</span><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><div class="dp-highlighter bg_css" style="font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; width: 936.531px; overflow-x: auto; overflow-y: hidden; padding-top: 1px; position: relative; color: rgb(0, 0, 0); line-height: 26px; margin-top: 18px !important; margin-bottom: 18px !important; background-color: rgb(231, 229, 220);"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);"><b></b> <a href="http://blog.csdn.net/hbcui1984/article/details/42156409#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin-right: 10px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url("images/default/ico_plain.gif"); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: left top; background-repeat: no-repeat;">view plain</a><span data-mod="popu_168"> <a href="http://blog.csdn.net/hbcui1984/article/details/42156409#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin-right: 10px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url("images/default/ico_copy.gif"); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: left top; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 713px; top: 1344px; width: 18px; height: 18px; z-index: 99;"></div></span><span data-mod="popu_169"></span></div></div><ol start="1" class="dp-css" style="border: none; color: rgb(92, 92, 92); margin-bottom: 1px !important; margin-left: 45px !important; background-color: rgb(255, 255, 255);"><li class="alt" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important;"><span style="border: none; color: black; background-color: inherit;"><span style="border: none; background-color: inherit;">.mui-bar-nav ~ .mui-content { </span></span></li><li class="" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important; background-color: rgb(248, 248, 248);"><span style="border: none; color: black; background-color: inherit;"> <span class="keyword" style="border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">padding-top</span><span style="border: none; background-color: inherit;">: </span><span class="value" style="border: none; background-color: inherit;">44px</span><span style="border: none; background-color: inherit;">; </span></span></li><li class="alt" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important;"><span style="border: none; color: black; background-color: inherit;">} </span></li><li class="" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important; background-color: rgb(248, 248, 248);"><span style="border: none; color: black; background-color: inherit;">.mui-bar-footer ~ .mui-content { </span></li><li class="alt" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important;"><span style="border: none; color: black; background-color: inherit;"> <span class="keyword" style="border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">padding-bottom</span><span style="border: none; background-color: inherit;">: </span><span class="value" style="border: none; background-color: inherit;">44px</span><span style="border: none; background-color: inherit;">; </span></span></li><li class="" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important; background-color: rgb(248, 248, 248);"><span style="border: none; color: black; background-color: inherit;">} </span></li><li class="alt" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important;"><span style="border: none; color: black; background-color: inherit;">.mui-bar-tab ~ .mui-content { </span></li><li class="" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important; background-color: rgb(248, 248, 248);"><span style="border: none; color: black; background-color: inherit;"> <span class="keyword" style="border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">padding-bottom</span><span style="border: none; background-color: inherit;">: </span><span class="value" style="border: none; background-color: inherit;">50px</span><span style="border: none; background-color: inherit;">; </span></span></li><li class="alt" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important;"><span style="border: none; color: black; background-color: inherit;">} </span></li></ol></div><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在.mui-content中。</span><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><h3 style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><a name="t2" style="color: rgb(202, 0, 0);"></a>始终为button按钮添加type属性</h3><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。</span><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><h2 style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><a name="t3" style="color: rgb(202, 0, 0);"></a>窗口管理</h2><h3 style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><a name="t4" style="color: rgb(202, 0, 0);"></a>页面初始化：必须执行mui.init方法</h3><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；</span><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><h3 style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><a name="t5" style="color: rgb(202, 0, 0);"></a>页面跳转：抛弃href跳转</h3><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用(http://dcloudio.github.io/mui/javascript/#openwindow)打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面；扩展阅读：</span><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><ul style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><li><a target="_blank" href="http://ask.dcloud.net.cn/article/106" style="color: rgb(202, 0, 0); text-decoration: none;">hello mui中的无等待窗体切换是如何实现的</a></li><li><a target="_blank" href="http://ask.dcloud.net.cn/article/25" style="color: rgb(202, 0, 0); text-decoration: none;">提示HTML5的性能体验系列之一 避免切页白屏</a></li></ul><h3 style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><a name="t6" style="color: rgb(202, 0, 0);"></a>页面关闭：勿重复监听backbutton</h3><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">mui框架自动封装了</span><a target="_blank" href="http://dcloudio.github.io/mui/javascript/#closewindow" style="color: rgb(202, 0, 0); text-decoration: none; font-family: Arial; line-height: 26px;">页面关闭</a><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。</span><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><h2 style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><a name="t7" style="color: rgb(202, 0, 0);"></a>手势操作</h2><h3 style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><a name="t8" style="color: rgb(202, 0, 0);"></a>点击：忘记click</h3><span style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;">快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，统统使用如下代码：</span><br style="color: rgb(0, 0, 0); font-family: Arial; line-height: 26px;"><div class="dp-highlighter bg_javascript" style="font-family: Consolas, "Courier New", Courier, mono, serif; font-size: 12px; width: 936.531px; overflow-x: auto; overflow-y: hidden; padding-top: 1px; position: relative; color: rgb(0, 0, 0); line-height: 26px; margin-top: 18px !important; margin-bottom: 18px !important; background-color: rgb(231, 229, 220);"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);"><b></b> <a href="http://blog.csdn.net/hbcui1984/article/details/42156409#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin-right: 10px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url("images/default/ico_plain.gif"); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: left top; background-repeat: no-repeat;">view plain</a><span data-mod="popu_168"> <a href="http://blog.csdn.net/hbcui1984/article/details/42156409#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin-right: 10px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url("images/default/ico_copy.gif"); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: left top; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 758px; top: 2279px; width: 18px; height: 18px; z-index: 99;"></div></span><span data-mod="popu_169"></span></div></div><ol start="1" class="dp-c" style="border: none; color: rgb(92, 92, 92); margin-bottom: 1px !important; margin-left: 45px !important; background-color: rgb(255, 255, 255);"><li class="alt" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important;"><span style="border: none; color: black; background-color: inherit;"><span style="border: none; background-color: inherit;">element.addEventListener(</span><span class="string" style="border: none; color: blue; background-color: inherit;">'tap'</span><span style="border: none; background-color: inherit;">,</span><span class="keyword" style="border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">function</span><span style="border: none; background-color: inherit;">(){ </span></span></li><li class="" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important; background-color: rgb(248, 248, 248);"><span style="border: none; color: black; background-color: inherit;"> <span class="comment" style="border: none; color: rgb(0, 130, 0); background-color: inherit;">//点击响应逻辑</span><span style="border: none; background-color: inherit;"> </span></span></li><li class="alt" style="border-left-width: 3px; border-style: none none none solid; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin-left: 0px !important; padding-right: 3px !important; padding-left: 10px !important;"><span style="border: none; color: black; background-color: inherit;"> }); </span></li><li></li></ol></div><p></p>
页:
[1]