微信小程序template模板化技术的使用

      上篇文章讲到根据一张微信小程序页面设计图,然合用flex布局,加ColorUI这个CSS样式库,去搭建这个首页来,今天就来讲讲微信小程序template模板化技术,我们来看一段,段文章列表源码.

图一:微信小程序template模板化技术

上图所示代码实现文章列表效果是下图这样的.

多图文样，文章列表样式

      如上面所说的,我虽然用wx:for循环解决了以上代码块中部分的得用,使得从服务器上获取的数据,以一种列表的方式显示出来,但是,只有首页会用到这个文章列表吗?其实还有搜索页面,专题页面,都要用到文章列表,那么,wx:for循环在这时就不起作用了,因此这时,就要使用微信小程序template模板化技术.下面来说具体使用方式.
      如上图一所示,以首页为例,假如首页wxml在 pages/index/inex下面
        第一步:就在index目录中创建二级目录如index-item,目录名,大家可以取自己喜欢的,然后,在index-item目录下新建一个wxml,和wxss文件.建议在文件名后面写一个template的后缀,好区分这是模板文件,如index-item-template.wxml,index-item-template.wxss,然后将写好的,文章列表源码,放在中.并给这个模板文件取个名字,如 index-item.
        第二步:在首页index.wxml中调用,首先在wxml页面顶部写上引用模板代码,,
然后将