阅读 20

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

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程 之美",欢迎关注,及时了解更多此系列文章。

1 为什么要应用框架

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

640?wx_fmt=png

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

640?wx_fmt=png

主要有最早的,很流行的jQuery,但是其效率和性能很差,所以很少有企业回去应用;

另一个就是Bootstrap,但其主打的是PC端,其大小和效率满足不了移动端的需求;其他的还有Sencha Touch、jQTouch等等。但目前最好选择的是MUI。

(2)为什么选择MUI:

因为相比同类框架,MUI是目前最接近原生App效果的框架之一,同时体积小,已开源,采用MIT协议,特点是极简、极快、极易。

2 快速体验

(1)首先在HBuilder里面创建一个移动端的应用,填上应用名称,在选择模板里面勾选mui登录模板,如下:

640?wx_fmt=png

(2)然后在该项目里面就会自动生成一些资源和配置及组件,如下:

640?wx_fmt=png

(3)打开index主页,里面会自动引入mui、js及css

640?wx_fmt=png

(4)然后我们只需要用几个字母就可以快速写出类似于微信主页面的界面:

640?wx_fmt=png

下面我将说说这个简单的微信界面是如何快速写出的:

a.     顶部标题栏(头部):在<body></body>里面敲出mh,就会有两个选择,一个是带返回箭头的标题栏,一个是没有返回的标题栏。读者们可以根据自己的需求选择所需要的标题栏。

640?wx_fmt=png

640?wx_fmt=png

b.     底部选项卡:在<body></body>里面敲出mt,选择mTab,然后就会生成相应的代码。

640?wx_fmt=png

640?wx_fmt=png

c.     主体部分:敲出mb,选择mBody,就会自动生成mui的content部分,如下:

640?wx_fmt=png

然后再在该标签里面敲出ml,就会又是那个提示选择,一个是列表,一个是图文列表图片居右,一个是图文列表图片居左,读者可以自行选择。

640?wx_fmt=png

以上就是这个写一个类似于微信主页面的全过程,很简单,快速,仅仅只敲几个字母。

3 总结

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

更多精彩文章:

where2go 团队



微信号:算法与编程之美          

640?wx_fmt=jpeg

长按识别二维码关注我们!

温馨提示: 点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

文章分类
后端
文章标签