注:文章中有些地方会把小程序的内容和 Android 的知识关联起来,以便于 Android 程序员更快的理解小程序。
template 包括 wxml 和 wxss 两个文件的使用。
● wxml :先是 template 的 xml 文件
看代码
<template name="templateMain">
<view>
<image class='view_item_image' src='{{item.img}}'></image>
<text class='view_item_text'>{{item.txt}}</text>
</view>
</template>
然后是引用这个 template 的 page 页面的 xml 文件,这里经过测试,不用写后缀名也可以。
<import src="template/template_main.wxml"/> //后缀可以不写。
<block wx:for="{{yy.data}}">
<!--<view>
<image class='view_item_image' src='{{item.img}}'></image>
<text class='view_item_text'>{{item.txt}}</text>
</view>-->
<template is="templateMain" data="{{item}}"/> // 如果此处写为 data="{{...item}}"
//template 的 wxss 中可以使用属性时候,可以不写item.xxx,直接写为 xxx
</block>
</view>
可以看出, templateMain 对应了wxml中的命名。
data="{{yyy:xxx, zzz: bbb}}" 如果这么写,是指重新封装了一个对象,传递下去了。
● template 的 wxss :
写法和普通 wxss 一样,关键是如何引用:
在需要应用模版的页面的 wxss 文件中第一行写入:
@import "template/tmpl_main.wxss";
经过测试,也可以不用写后缀名。
最后附上文件目录结构: