作者：傾聽(tīng)歲月，來(lái)自原文地址

模版是什么？

就是我們預(yù)先寫(xiě)好一段代碼，供給重復(fù)使用。

實(shí)例

/page/common/common.wxml

1. <template name="demo1">
2. <view>我是模版demo1</view>
3. </template>

1. /page/index/index.wxml
2.  
3. <import src="../common/common.wxml" />
4. <view>
5. <template is="demo1" />
6. </view>

我們就成功的將模版demo1 導(dǎo)入進(jìn)來(lái)了。

模版中添加數(shù)據(jù)  以common.wxml為例子

1. <template name="demo1">
2. <view>{{userInfo.nickName}}</view>
3. <view wx:for="data" wx:for-index="index" wx:for-item="item">
4. {{index}}=>{{item}}
5. </view>
6. </template>

這個(gè)模版里面有需要數(shù)據(jù)對(duì)象支持，是直接引用的page({data:{}})這個(gè)中的data 嗎？ 其實(shí)不是的。怎么用呢  以index.wxml為例  假設(shè)注冊(cè)中的data為

1. var initJson = {
2. data:{
3. userInfo:{"nickname":"我是勇哥"},
4. dataInfos : {
5. "name":"勇哥",
6. "age" :"22"
7. }
8. }
9. }
10. Page(initJson);

1. <import src="../common/common.wxml" />
2. <view>
3. <!--方法一，自己領(lǐng)悟。其中的userInfo引用的是注冊(cè)表中data.userInfo-->
4. <template is="demo1" data="{{userInfo,data:dataInfos }}" />
5. <!--方法二。 -->
6. <template is="demo1" data="{{userInfo:{"nickname":"aaaa"},data:[1,2,3,4,5,6,7]}}" />
7. </view>

模版也支持wxml模版語(yǔ)法，也就是說(shuō)也可以在里面添加wx:if wx:elseif 等語(yǔ)句。  用好了，減少代碼量。降低維護(hù)難度。以及提升開(kāi)發(fā)效率。  可以將一個(gè)個(gè)模版看成一個(gè)個(gè)封裝好的函數(shù)，需要的時(shí)候直接導(dǎo)入模版文件，直接調(diào)用就好了，當(dāng)然有參數(shù)需要的模版還是要將數(shù)據(jù)對(duì)象傳入進(jìn)去的。

import 模式導(dǎo)入的文件只能識(shí)別template 標(biāo)簽標(biāo)記的代碼塊  還有一個(gè)include 模式導(dǎo)入的文件就恰恰和import 的模式對(duì)應(yīng)了。

include模式導(dǎo)入的文件

/page/demo2/demo2.wxml

1. <view>
2. include 模式導(dǎo)入文件
3. </view>
4. <template name="demo2_tmp">
5. <view>
6. 我是template2
7. </view>
8. </template>

/page/demo1/demo1.wxml

1. <include src="../demo1/demo1.xml" />
2.  
3. <template is="demo2_tmp" />

運(yùn)行看看效果吧，你會(huì)發(fā)現(xiàn)這個(gè)運(yùn)行不了而報(bào)錯(cuò)，提示你未定義，那是因?yàn)閕nclude模式導(dǎo)入的文件只導(dǎo)入非template模版標(biāo)簽的組件。其它的不導(dǎo)入。

小注意：<import src="" /> 導(dǎo)入的文件也包含<import src="" /> 不會(huì)進(jìn)行二次導(dǎo)入的。  也就是 如果A導(dǎo)入B（import），B需要導(dǎo)入C(import)，那么A只會(huì)導(dǎo)入B，而不會(huì)導(dǎo)入C。