上篇文章讲到根据一张微信小程序页面设计图,然合用flex布局,加ColorUI这个CSS样式库,去搭建这个首页来,今天就来讲讲微信小程序template模板化技术,我们来看一段,段文章列表源码.
图一:微信小程序template模板化技术
上图所示代码实现文章列表效果是下图这样的.
多图文样，文章列表样式
如上面所说的,我虽然用wx:for循环解决了以上代码块中<view>部分的得用,使得从服务器上获取的数据,以一种列表的方式显示出来,但是,只有首页会用到这个文章列表吗?其实还有搜索页面,专题页面,都要用到文章列表,那么,wx:for循环在这时就不起作用了,因此这时,就要使用微信小程序template模板化技术.下面来说具体使用方式.
如上图一所示,以首页为例,假如首页wxml在 pages/index/inex下面
第一步:就在index目录中创建二级目录如index-item,目录名,大家可以取自己喜欢的,然后,在index-item目录下新建一个wxml,和wxss文件.建议在文件名后面写一个template的后缀,好区分这是模板文件,如index-item-template.wxml,index-item-template.wxss,然后将写好的,文章列表源码,放在<template name="index-item"></template>中.并给这个模板文件取个名字,如 index-item.
第二步:在首页index.wxml中调用,首先在wxml页面顶部写上引用模板代码,<import src="index-item/index-item-template.wxml" />,
然后将<template is="index-item" /> 放在index.wxml合适的位置.
第三步:将这段文章列表用到的CSS样式放到index-item-template.wxss中,然后,在index.wxss中进行引用@import "index-item-/index-item-template.wxss";
最后保存所有页面,这时看到的效果,就和用template 封装前一样的显示效果了.而后还减少了wxml中的代码量.但有一点要说明一下,就是在template中js代码无效, 是得不到执行的.如果要实现将js也封装进来,那么就要用到微信小程序另一个技术,自定义组件, 这个在后面连载 文章里,我也会讲到的.
用template封装前代码126行
用template封装后，代码行数58行
网友评论