---------支持作者請(qǐng)轉(zhuǎn)發(fā)本文-----------

在講解模板之前，我們先看一個(gè)例子。布局代碼如下：

<view style="display:flex;flex-direction:row">
  <view class="bc_green" style="width:100px;height:100px" />
  <view class="bc_red" style="width:100px;height:100px" />
  <view class="bc_blue" style="width:100px;height:100px" />
  <view class="bc_yellow" style="width:100px;height:100px" />
</view>
<view style="display:flex;flex-direction:row">
  <view class="bc_blue" style="width:100px;height:100px" />
  <view class="bc_yellow" style="width:100px;height:100px" />
  <view class="bc_green" style="width:100px;height:100px" />
  <view class="bc_red" style="width:100px;height:100px" />
</view>

根據(jù)我們前面講解的知識(shí)，很容易看出，這段布局代碼的作用是繪制兩行帶背景色的方塊，效果如圖1所示。

圖1  繪制兩行帶背景色的方塊

我們的目的并不是回顧如何繪制帶背景色的方塊，而是要觀察這段布局代碼。很明顯，這段布局代碼出現(xiàn)了大量的冗余代碼。繪制第一行和第二行方塊的布局代碼除了使用的設(shè)置顏色的樣式不同外，其他的代碼完全相同。如果在布局代碼中，這種情況如果非常多的話，代碼將不太容易維護(hù)（因?yàn)橄嘟拇a太多，要修改需要統(tǒng)一修改），所以就需要將類似的布局代碼進(jìn)行包裝，然后直接引用包裝后的代碼即可，這就是本節(jié)要介紹的模板。

模板使用<template>標(biāo)簽定義，例如，將前面輸出一行帶背景色方塊的布局代碼封裝中模板中的代碼如下：

<template name="rowSquares">
  <view style="display:flex;flex-direction:row">
    <view class="bc_{{color1}}" style="width:100px;height:100px" />
    <view class="bc_{{color2}}" style="width:100px;height:100px" />
    <view class="bc_{{color3}}" style="width:100px;height:100px" />
    <view class="bc_{{color4}}" style="width:100px;height:100px" />
  </view>  
</template>

<template>標(biāo)簽中使用name屬性指定模板名稱，相當(dāng)于函數(shù)名，需要通過該名稱引用模板。既然是模板，就需要往里面?zhèn)鬟f參數(shù)。color1、color2、color3和color4是需要往里面?zhèn)鬟f的變量名稱。不過要注意，這幾個(gè)變量可不是直接引用的變量，而是要通過<template>標(biāo)簽的data屬性傳入模板中。

引用模板仍然需要使用<template>標(biāo)簽，通過is屬性指定模板名稱，通過data屬性向模板傳遞參數(shù)。例如，下面的布局代碼引用了前面定義的rowSquares模板。

<template is="rowSquares" data="{{color1,color2,color3,color4}}" />

其中color1、color2、color3和color4是4個(gè)變量，代碼如下：

Page({
  data: {
    color1:'red',
    color2:'green',
    color3:'red',
    color4:'blue',
  },   
})

這里要著重說明下，data屬性傳遞的4個(gè)值，并不是直接將這4個(gè)變量傳入模板，而是直接指定rowSquares模板要使用的變量，因此，傳遞變量的順序無關(guān)，所以使用下面的布局代碼引用模板，效果是完全一樣的。

<template is="rowSquares" data="{{color3,color4,color1,color2}}" />

那么這就帶來一個(gè)問題，如果要多次引用模板，每次引用，4個(gè)方塊都使用不同的背景色，按這樣直接在data對(duì)象中直接定義變量，就意味著所有的引用都會(huì)擁有同樣背景色的方塊，這并不是我們需要的，因此，我們需要另外一種定義和使用變量的方式。

其中方法也很簡(jiǎn)單，將color1、color2、color3和color4封裝在一個(gè)對(duì)象中即可，例如，下面的代碼在data中定義了兩個(gè)對(duì)象變量：colorItem1和colorItem2，每一個(gè)對(duì)象中分別定義并初始化了color1、color2、color3和color4變量。

Page({
  data: {
     colorItem1:{
       color1:'green',
       color2:'blue',
       color3:'yellow',
       color4:'red',
    },
    colorItem2:{
       color1:'red',
       color2:'green',
       color3:'red',
       color4:'blue',
    },
  },   
})

那么問題來了，這種形式如何引用呢？其中直接向rowSquares模板傳遞colorItem1和colorItem2即可，只不過這兩個(gè)變量前面要加三個(gè)點(diǎn)的省略號(hào)（…），表示rowSquares模板需要使用colorItem1和colorItem2中同名的變量（color1、color2、color3和color4）。例如，下面2行代碼引用了兩次rowSquares模板。

<template is="rowSquares" data="{{...colorItem1}}" />    
<template is="rowSquares" data="{{...colorItem2}}" />

我們還可以利用以前學(xué)的block wx:for來擴(kuò)展模板，讓該模板不僅可以設(shè)置方塊背景色，還可以設(shè)置方塊的數(shù)量，模板的代碼如下：

<template name="rowCountSquares">
  <view style="display:flex;flex-direction:row">
    <block wx:for="{{colorArray}}">
        <view class="bc_{{item}}" style="width:100px;height:100px" />
    </block>
  </view>    
</template>

從rowCountSquares模板可知，該模板只接收一個(gè)參數(shù)：colorArray，該參數(shù)是一個(gè)數(shù)組，定義了不定數(shù)量的顏色名稱。下面先定義如下4個(gè)變量，每個(gè)變量中都有一個(gè)colorArray變量，用于定義顏色名稱。

Page({
  data: {
    colorCountItem1:
    {
      colorArray:['green', 'blue', 'yellow', 'red']
    },
    colorCountItem2:
    {
      colorArray:['blue', 'yellow', 'red']
    },
     colorCountItem3:
    {
      colorArray:[ 'yellow', 'red']
    },
         colorCountItem4:
    {
      colorArray:[  'red']
    },
  },   
})

現(xiàn)在使用下面代碼引用4次rowCountSquares模板。

<template is=" rowCountSquares " data="{{...colorCountItem1}}" />     
<template is=" rowCountSquares " data="{{...colorCountItem2}}" />     
<template is=" rowCountSquares " data="{{...colorCountItem3}}" />   
<template is=" rowCountSquares " data="{{...colorCountItem4}}" />

我們會(huì)看到，每一行的方塊數(shù)都不同，顏色也是交替出現(xiàn)的。如圖2所示。

圖2  通過模板實(shí)現(xiàn)的效果