模板可以用單獨(dú)的wxml來保存

使用的時(shí)候, 用import導(dǎo)入模板

創(chuàng)建模板數(shù)據(jù)的來源:

1. Page({
2.   data: {
3.     mo: 'Hello World!!',
4.     userid : '1234',
5.     text:'測試',
6.     list: [{
7.       index: 0,
8.       msg: "this is a template",
9.       time: "2016-09-15"
10.     },
11.     {
12.       index: 1000,
13.       msg: "this is a new template",
14.       time: "2026-09-15"
15.     }]
16.   },

創(chuàng)建模板文件(可以放在其它專用文件夾):

1. <!--模板獨(dú)立成單獨(dú)的文件-->
2.  
3. <template name="item">
4.  
5.   <view>template text: {{msg}}</view>
6.  
7.   <view>日期 : {{time}}</view>
8.  
9. </template>

使用import導(dǎo)入模板并使用

1. <!--模板引用-->
2. <import src='../common/template.wxml'/>   
3.  
4. <view class='container'>
5.  
6.   <view wx:for='{{list}}'>
7.     <!--模板使用-->
8.     <template is='item' data="{{...item}}"/>
9.   </view>
10.  
11. </view>

is就是模板的名稱, data是模板要使用的數(shù)據(jù)

...item是ES6簡寫的方式, 如果不用此方式, 則在模板定義中就是{{item.xxx}}, 而不是{{xxx}}

include用于拆分頁面, 它不傳遞參數(shù)(template則可以傳遞參數(shù))

由于很多頁面的頭部和底部是一樣的

所以可以定義頭部和底部, 再將它們包進(jìn)不同的頁面

1. header.wxml, footer.wxml
2.  
3. <import src='../common/template.wxml'/>
4. <view class='container'>
5.  
6.   <include src='../common/header.wxml'/>
7.  
8.   <view>
9.     <template is='item' data="{{xxx}}"/>
10.   </view>
11.  
12.   <include src='../common/footer.wxml'/>
13.  
14. </view>

使用include標(biāo)簽完成頁面包含, 使用import標(biāo)簽完成模板導(dǎo)入