用mui框架开发手机app项目实践中的那些事儿

http://www.yilingsj.com/xwzj/2015-04-29/260.html

 

最近在玩mui框架，坑的我是：西湖的水，全都是眼泪！！！

公司的手机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-8261,8262 )再次感谢官方大大的技术支持。虽然现在mui的某些功能，例如我提到的这些功能暂时官方还未提供，但我相信在不久官方会进行提供的，那个时候再开发app就比现在要轻松很多了。可是现在，我还是要不停的继续抱大腿来解决我的需求。

今天继续写代码，用昨晚大大给的案例进行修改，又得进入苦逼模式了。唉......(局外人永远不会懂：一个小白折腾一项新技术，大量的问题无法得到及时解决，每前面一小步都在不停的浪费大量的时间是有多么的痛苦！！！)