艺灵设计

全部文章
×

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

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2015-04-29 10:51:32 - 阅: - 评:1 - 积分:0

最近在玩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就可以了。动态演示图:
新建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就比现在要轻松很多了。可是现在,我还是要不停的继续抱大腿来解决我的需求。

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

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/xwzj/2015-04-29/260.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: Hello mui MUI前端框架 原生app 手机app开发 jquery mobile web app html5 app开发 侧滑webview

上一篇: CSS布局之淘宝双飞翼布局   下一篇: 银行卡最新骗术那点事儿

评论区