追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；
MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K
鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标
MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件
为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）；
mui通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画。
mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。每种侧滑实现模式，有不同的侧滑动画效果，主要分为四类：
动画1：主界面移动、菜单不动
动画2：主界面不动、菜单移动
动画3：主界面和菜单同时移动
动画4：缩放式侧滑（类手机QQ）
滑动触发操作菜单
在手机应用中（特别是iOS平台），很多操作菜单都是滑动触发的，比如短信界面，左滑显示“删除”按钮，点击可以删除该短信对话；邮件列表界面，左滑可以删除，右滑可以标注为"已读/未读"状态；
mui的列表控件也支持滑动触发操作菜单功能，仅需按照特定格式拼装DOM结构即可；另外，滑动还支持事件触发，开发者可以通过监听滑动事件（slideleft/slideright），完成操作前的确认提醒工作。初学mui会发现大量的demo中，都需要调用mui.init()和mui.plusReady()，可见这两东西在app开发中的重要性
首先请注意一点，如果不是做app开发（非hbuilder基座运行），做web开发的话（在浏览器运行html），plusReady是没有意义的，不会执行，为什么？
啥是html5+，和html5有什么区别？
所谓的html4.0标准我们就不去讨论了，这是早期对浏览器标记语言解析的规范，在app开发中我们通常使用的是html5
html5：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，于2014年发布，之后的浏览器必须遵守这个开发规范实现对html，css，javascript的解释，其中css遵守最新的css3规范，javascript遵守最新的ECMAScript6。
html5+：其实还是html5，只是在html5针对手机开发app时补充了对大量原生功能支持，包括摄像头，wifi，震动，gps等等的软硬件功能，通过js封装调用安卓原生接口使得h5开发app更加的强大，所以称之为html5+（app的开发必须要使用html5+）
plusReady：对于 HTML5+应用的页面有一个很重要的 “plusready”事件，此事件会在页面加载后自动触发，表示所有 HTML5+ API 可以使用， 在此事件触发之前不能调用 HTML5+ API
init：mui本身只是一个html5的前端框架而已，类似于react.js，jquery mobile或者说像是bootstrap的针对手机简化版，本身不具备开发app的功能，适合wap开发，但其中包含了html5+的方法，如果不使用上述html5+ plus对象，而只需要mui框架包含的wap开发功能，则是使用mui.init之后即可调用。
当然在app开过程中使用了mui框架作为css，js的渲染框架亦可：此时任然需要用到mui.init()初始化框架的
并且mui框架将很多功能配置都集中在mui.init方法中，所以只需要在mui.init方法中完成对应参数配置即可
目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。
无论做wap网页，还是app开发，只要需要用到mui框架，都需要mui.init初始化框架功能，而plusready仅仅在app开发中使用
mui个人习惯：
每个用到mui的页面都调用下mui.init，直接放在js最前方
除了function定义函数之外，全都写在plusReady之中，function调用也放在其中，毕竟做app开发调用html5+api十分的频繁，就像jq的$(document).ready()一样的道理，尤其是出现plus对象的一定放在plusReady里面！
目前尚不清楚plusReady过分臃肿对性能是否造成伤害。理论上只是在html5+加载完之后执行其中的代码罢了，是不会影响性能，只会晚一点执行（延迟并不会感受到）
关于mui plusReady的注意点：
mui.plusReady()中的代码不执行
你在浏览器下运行了html
plusReady事件仅在webview首次创建时触发，使用mui.openWindow方法多次打开已存在的同样id的webview时，是不会重复触发plusReady事件的； 因此若业务写在plusReady事件中，可能会出现执行结果和预期不一致的情况；此时可通过自定义事件触发
阅读(...) 评论()mui开发注意事项，有需要的朋友可以参考下。
mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问
DOM结构 关于mui页面的，你需要知道如下规则。固
所谓的固定栏，也就是带有.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: 44
.mui-bar-footer ~ .mui-content {
padding-bottom: 44
.mui-bar-tab ~ .mui-content {
padding-bottom: 50
你当然可以通过自定义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方法](http://dcloudio.github.io/mui
/javascript/#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(){
//点击响应逻辑
阅读(...) 评论()随笔 - 382&
评论 - 10&
&&&&&&&&&&&
http://www.yilingsj.com/xwzj//260.html
最近在玩，坑的我是：西湖的水，全都是眼泪！！！
公司的手机app要进行改版，我率先想到的是jquery mobile，但是，我却放弃了jquery mobile而选择了MUI,现在还真有点小小小后悔。(注：关于jquery mobile做手机页面的心得以后有空再进行单独写文章进行分享。)
当我第一眼看到mui时，我就已经深深地喜欢上了她，界面简洁、清爽。如图：&mui的功能也是比较多的，但还是跟jquery mobile有些区别。
由于是第一次接触这个mui，我是有多苦逼看官是可以相像的出的。对着官方的文档进行敲代码却不见效果(为了这个，我还到官方论坛发帖求解，感谢&@逆流而上&对我的帮助，后面会写一篇关于手机模拟器的文章。)！为何！？因为mui的环境问题！如果有看官使用过mui的话，直接在chrome上打开index.html会发现有一个小提示，如图：&这就是我刚才说的：对照着官方文档敲代码都没效果的原因！有关mui的使用场景可点击官方的文档看说明，链接地址： ask.dcloud.net.cn/m/article/113
在&@逆流而上&的帮助下，我学会了用模拟器来时时查看代码效果，总算是可以摆脱之前的繁琐操作了。(注：之前的操作方法是：先将写好的app项目打包成apk，再上传到自己的空间，然后用手机下载下来安装，每修改一点打包一次。不得不说这个太坑了，还好有模拟器。)
说了这么多，忘记说这个mui怎么使用了。看官可以去官网下载个HBuilder，安装后按下Ctrl+n，选择移动app后勾选Hello mui就可以了。动态演示图：
(注：现在的最新版本5.6已经修复了5.2中的一个小bug，这个是自己在使用过程中发现的。将一文件拖进
hbuilder中，想要编辑时右下角的搜狗输入法会不停闪烁以至于无法编辑，文件必需要出现在左侧项目管理器中才不会出现这种情况。由于这个原因，有好
几个月没有使用这个hbuilder了，这次做app才使用。)
公司的手机app主页图是这个样子的，&当时我想要的效果是mui中的侧滑。但是，mui中的侧滑暂不支持同一页面中添加多个侧滑，官方大大的回复是：&从回复中可以看出是支持不同方向的侧滑，但是这个显得有些鸡肋。不过还是要感谢大大的帮助，修改了js才实现这个效果。但在应用过程中我又有了新的问题，继续找大大抱大腿。
昨天抱了一天，在夜晚8点的时候终于抱上了，大大的回复：&(注：详细问题请点击链接： http://ask.dcloud.net.cn/question/4919?notification_id-22625__rf-false__item_id- )再次感谢官方大大的技术支持。虽然现在mui的某些功能，例如我提到的这些功能暂时官方还未提供，但我相信在不久官方会进行提供的，那个时候再开发app就比现在要轻松很多了。可是现在，我还是要不停的继续抱大腿来解决我的需求。
今天继续写代码，用昨晚大大给的案例进行修改，又得进入苦逼模式了。唉......(局外人永远不会懂：一个小白折腾一项新技术，大量的问题无法得到及时解决，每前面一小步都在不停的浪费大量的时间是有多么的痛苦！！！)
阅读(...) 评论()