##2.2.6 模板
WXML提供模板,可以在模板中定义代码片段,然后在不同地方调用。使用name属性,作为模板的名字。然后在<template> 定义代码片段,如:
<template name="msgItem">
<view>
<text>{{ index }}: {{msg}}</text>
<text>Time: {{time}}</text>
</view>
</template>
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如代码2-17所示。
<!--
item: {
index: 0,
msg: 'this is a template',
time: '2016-06-18'
}
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<template is="msgItem" data="{{...item}}"></template>
is可以动态决定具体需要渲染那个模板,如代码2-18所示
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1,2,3,4]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}">
</block>
##2.2.7 引用
WXML提供两种文件引用方式import和include
import 可以在该文件中使用目标文件定义的template,如:
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml,就可以使用 item模板:
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
需要注意的是 import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。
include 可以将目标文件中除了 <template/> 外的整个代码引入,相当于是拷贝到 include 位置,如代码2-22、代码2-23、代码2-24所示。
代码清单2-22 index.wxml
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
代码清单2-23 header.wxml
<!-- header.wxml -->
<view> header </view>
代码清单2-24 footer.wxml
<!-- footer.wxml -->
<view> footer </view>
#2.3 WXSS 样式 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。
WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改。
##2.3.3 WXSS引用
在CSS中,开发者可以这样引用另一个样式文件:@import url('./test_0.css')
在小程序中,我们依然可以实现样式的引用,样式引用是这样写:
@import './test_0.wxss'
由于WXSS最终会被编译打包到目标文件中,用户只需要下载一次,在使用过程中不会因为样式的引用而产生多余的文件请求。
小程序支持动态更新内联样式:
<!--index.wxml-->
<!--可动态变化的内联样式-->
<!--
{
eleColor: 'red',
eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>