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

时间:2022-02-06 06:08:37

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就可以了。动态演示图:
用mui框架开发手机app项目实践中的那些事儿
(注:现在的最新版本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就比现在要轻松很多了。可是现在,我还是要不停的继续抱大腿来解决我的需求。

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