小程序为了避免页面中重复使用代码的问题,提供了模板机制,把一些可以复用的代码片段放置在代码中进行定义,然后在页面中使用。
定义模板
新建一个可以存放模板的文件,比如将文件命名为template.html,代码如下:
<template name="prize">
<view>
<text>{{name}}</text>
</view>
</template>
template模板是通过name属性来标识的。
使用模板
通过import将模板引入到使用模板的页面,src是模板文件的路径,并使用is属性来查找该模板并使用,然后将模板所需要的data传入它需要传入的值。代码如下:
<!--xx.wxml-->
<import src="item.wxml"/>
<template is="item" data="{{prize}}"/>
// xx.js
Page({
data: {
prize: {
name: '奖品名称'
}
}
})
注意点:
- 模板的is属性支持三元运算。
- import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template。