小白如何飞一样的搭造MUI移动端框架

为什么要应用框架

目前HTML5开发者面临的问题有很多,例如:浏览器切页白屏、转页动画较差、浮动元素抖动、无法流畅下拉刷新。并且在Android低端机运行更是表现不足:浏览器默认控件样式和数量较少,致使制作一个漂亮的控件非常麻烦。
小白如何飞一样的搭造MUI移动端框架

目前的可寻移动框架有哪些?

小白如何飞一样的搭造MUI移动端框架
主要有最早的,很流行的jQuery,但是其效率和性能很差,所以很少有企业回去应用;
另一个就是Bootstrap,但其主打的是PC端,其大小和效率满足不了移动端的需求;其他的还有Sencha Touch、jQTouch等等。但目前最好选择的是MUI。
(2)为什么选择MUI:
因为相比同类框架,MUI是目前最接近原生App效果的框架之一,同时体积小,已开源,采用MIT协议,特点是极简、极快、极易。

快速体验

(1)首先在HBuilder里面创建一个移动端的应用,填上应用名称,在选择模板里面勾选mui登录模板,如下:
小白如何飞一样的搭造MUI移动端框架
(2)然后在该项目里面就会自动生成一些资源和配置及组件,如下:
小白如何飞一样的搭造MUI移动端框架
(3)打开index主页,里面会自动引入mui、js及css
小白如何飞一样的搭造MUI移动端框架
(4)然后我们只需要用几个字母就可以快速写出类似于微信主页面的界面:
小白如何飞一样的搭造MUI移动端框架
下面我将说说这个简单的微信界面是如何快速写出的:

a. 顶部标题栏(头部):在<body></body>里面敲出mh,就会有两个选择,一个是带返回箭头的标题栏,一个是没有返回的标题栏。读者们可以根据自己的需求选择所需要的标题栏。
小白如何飞一样的搭造MUI移动端框架
小白如何飞一样的搭造MUI移动端框架
b. 底部选项卡:在<body></body>里面敲出mt,选择mTab,然后就会生成相应的代码。
小白如何飞一样的搭造MUI移动端框架
小白如何飞一样的搭造MUI移动端框架
c. 主体部分:敲出mb,选择mBody,就会自动生成mui的content部分,如下:
小白如何飞一样的搭造MUI移动端框架
然后再在该标签里面敲出ml,就会又是那个提示选择,一个是列表,一个是图文列表图片居右,一个是图文列表图片居左,读者可以自行选择。
小白如何飞一样的搭造MUI移动端框架
以上就是这个写一个类似于微信主页面的全过程,很简单,快速,仅仅只敲几个字母。

总结

这篇文章是切合自己亲身体验,所以对那些纯入门小白来说,应该也能看懂。但我只对如何快速构建一个类似于微信主页面的框架和步骤进行了叙述,这只是一个用div写的子页面,但是这种方法不常用,现在用的最多的是webview的方式,我也没有过多的说如何使各个子页面进行切换,以后可能会给大家讲。这篇文章只是单纯地说如何飞一般的体验快速构造类似于微信页面的方法,也有许多不足的地方,希望大家多多指教。