小程序flex快速布局和ColorUI框架初步使用教程

      在开发自己的微信小程序《阿涛技术博客》也去网上搜索过小程序UI框架,如ZanUI,iViewUI,ColorUI等,体验过后,我最后还是很喜欢ColorUI,这个CSS样式库,使用起来很简单,找到CSS类名,复制粘贴到自己的小程序项目中,配合flex弹性盒子布局,再搭配ColorUI组件,就能搭出一个很好看的小程序UI界面.如我已经开发好的小程序首页效果图.
   

首页效果图

        首先就当这是一张设计图，从上往下看，再从左往右看，我这样想的，从整体出发，从第一行，搜索框，第二行，顶部选项卡组件，第三行轮播图，第四行文章列表，第五行底部导航栏，不难看出这就可以做一个flex盒子模型,让页面所有元素,按列(flex-direction: column;)的方式,依次往下排,然后呢,在这个设计图中,再来看看文章列表中的左图文的样式,这也是一个flex盒子,只不过,这一个flex盒子中,还嵌套着两个盒子,首先先做一个flex盒子,横向排列.(flex-direction: row;)然后放入两个view形成左图右文的样式,然后把右边的view变成一个flex弹性盒子,按列排布,再嵌套两个view,上面放文章标题,下面放文章栏目信息,浏览数,评论数等信息.(如下图所示),红色框是flex横向分布,蓝色框是以列的方式分布,然后再设好各元素之间有间距,然后,再用wx:for循环,这个列表就做好了,大家还看到,在这文章列表中除了左右结构的图文样式外,还有多图文的样式,实现原理是一样的,在这里,就不多赘述了,留给读者思考.

当然，上面说过运用flex布局，搭建小程序面页面UI骨架，然后用ColorUI中的组件来填充这个UI骨架，最终形成一个小程序UI页面，

ColorUI卡片组件

大家可对比我的小程序首页效果图中，文章列表那里我进行了一个小改造，然后将代码复制到自己的小程序项目中即可，当然大家也可以直接用这个样式.

写在最后，今天简单的讲解了，从一张首页设计效果图开始怎样进行全局的规化，再结合ColorUI CSS样式库完成整个小程序首页的搭建，读者如有疑问，可以在文章后面留言，或给我发私信都行！