作者：Di，來自原文地址 
本文相關(guān)文章：跳坑《一百三十七》模版template使用 
模板 
WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。

介紹及使用方法：

模版(template)你不陌生吧? 
angularjs中的模版文件 - ng-template 
RN中的模版文件使用 
甚至是移動(dòng)開發(fā)中VM的概念也應(yīng)該會(huì)聯(lián)想到模版概念

看看微信的模版官方用法

詳細(xì) 微信小程序官方文檔－模版 
著重提一下Mustache的判斷語法，不陌生吧 
is 屬性可以使用 Mustache 語法，來動(dòng)態(tài)決定具體需要渲染哪個(gè)模板： 
不過在微信小程序開發(fā)中，能使用的很少，且有自己的規(guī)則，大概的條件語句都差不多，可以自己嘗試一下

1. <template name="odd">
2. <view> odd </view>
3. </template>
4. <template name="even">
5. <view> even </view>
6. </template>
7. <block wx:for="{{[1, 2, 3, 4, 5]}}">
8. <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
9. </block>

模版的引入

詳細(xì)講解官方文檔 微信小程序官方文檔－模版引入42  著重強(qiáng)調(diào) import 的作用域  import 有作用域的概念，即只會(huì) import 目標(biāo)文件中定義的 template，而不會(huì) import 目標(biāo)文件 import 的 template。  如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template

1. <!-- A.wxml -->
2. <template name="A">
3. <text> A template </text>
4. </template>
5.  
6. <!-- B.wxml -->
7. <import src="a.wxml"/>
8. <template name="B">
9. <text> B template </text>
10. </template>
11.  
12. <!-- C.wxml -->
13. <import src="b.wxml"/>
14. <template is="A"/>
15. <!-- Error! Can not use tempalte when not import A. -->
16. <template is="B"/>

循環(huán)使用測(cè)試

我們拿上面的例子來看多做幾個(gè)， >小技巧:一個(gè)模版文件可以寫多個(gè)模版，只要名字不同即可

在寫wxParse的時(shí)候，我希望能夠通過一個(gè)模版來自我循環(huán)調(diào)用實(shí)現(xiàn)，但是因?yàn)樽饔糜虻膯栴}，不能夠進(jìn)行調(diào)用，所以我希望能夠呈現(xiàn)三角調(diào)用，做下面的例子看看

1. <template name="A">
2. <text> A template </text>
3. </template>
4.  
5. <template name="B">
6. <text> B template </text>
7. </template>
8.  
9. <template name="C">
10. <text> C template </text>
11. </template>

可以循環(huán)調(diào)用的話輸出結(jié)果

1. A template
2. B template
3. C template
4. A template
5. B template
6. C template
7. .../循環(huán)

實(shí)際場(chǎng)景下輸出

1. A template
2. B template
3. C template

結(jié)論就是，其無法進(jìn)行循環(huán)調(diào)用，不僅是傳值問題，文檔中也有提到。

困難1:無法循環(huán)使用模版下，如何處理多級(jí)HTML嵌套解析  回答： 既然不能夠?qū)崿F(xiàn)完美的代碼較少的方式，那我們就采用一種笨辦法，手動(dòng)循環(huán)出N個(gè)模版，因?yàn)樵跁r(shí)機(jī)場(chǎng)景中，尤其是在文章的html中不會(huì)出現(xiàn)超過10級(jí)的嵌套，那么這樣我們可以手動(dòng)寫10個(gè)模版，進(jìn)行循環(huán)調(diào)用。

實(shí)際代碼  我們使用下面的代碼進(jìn)行不斷的重復(fù)，只需要修改template對(duì)應(yīng)指向下一個(gè)模版，并不斷累加到10個(gè)以上，基本上能夠解決大部分的html解析問題。  ** 所以，如果你的HTML嵌套級(jí)別較高的話，只要按照這個(gè)步驟再進(jìn)行復(fù)制模版就可以了。

1. <template name="wxParse0">
2. <!--判斷是否是標(biāo)簽節(jié)點(diǎn)-->
3. <block wx:if="{{item.node == 'element'}}">
4.  
5. <block wx:if="{{item.tag == 'button'}}">
6. <button type="default" size="mini" >
7. <block wx:for="{{item.child}}" wx:for-item="item">
8. <template is="wxParse1" data="{{item}}"/>
9. </block>
10. </button>
11. </block>
12. <!--li類型-->
13. <block wx:elif="{{item.tag == 'li'}}">
14. <view class="wxParse-li">
15. <view class="wxParse-li-inner">
16. <view class="wxParse-li-text">
17. <text class="wxParse-li-circle"></text>
18. </view>
19. <view class="wxParse-li-text">
20. <block wx:for="{{item.child}}" wx:for-item="item">
21. <template is="wxParse1" data="{{item}}"/>
22. </block>