小程序為了避免頁面中重復(fù)使用代碼的問題董朝,提供了模板機制鸠项,把一些可以復(fù)用的代碼片段放置在代碼中進行定義,然后在頁面中使用子姜。
定義模板
新建一個可以存放模板的文件祟绊,比如將文件命名為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。