小程式學習---模闆

在編寫小程式界面的時候，你會發現有很多東西非常類似，它們看起來就像一個元件一樣。例如，我們可以看到豆瓣有一個5星的評分樣式，如果要拿到小程式這裡展示的話，本身是沒有5星這個控件的（在android中有）。在小程式中，我們可以使用5個星狀的圖檔來組成一個評分的工具條。你可以想象的到，這個評分工具就是5個image控件平鋪排列，很簡單的。

<b></b>

點選(此處)折疊或打開

view&gt;

    image src='/images/logo.jpg' class="start.png"/image&gt;

/view&gt;

上面的代碼就可以簡單的實作一個5星的評分工具，那如果我們要重複利用這個評分工具呢，是否每次都複制上面的代碼？？？

<b>一、小程式模闆</b><b></b>

   在小程式的wxml檔案中，提供了模闆機制，可以定義一個wxml的代碼片段，然後在不同的地方調用

   1、定義模闆

使用name屬性，作為模闆的名字。然後在内定義代碼片段，我們來定義一個5星的評分模闆

template name="score"&gt;

    image src="/star.png"/&gt;

/template&gt;

2、使用模闆

1）使用 is 屬性，聲明需要的使用的模闆，is=“模闆名稱”

2）使用import引入模闆需要的wxml檔案

例如要在index界面中使用評分模闆

import src="/pages/template/score-template.wxml" /&gt;

view class='today-container'&gt;

    template is="score" /&gt; !—-注意名字--&gt;

3、模闆的樣式

當我們在score.wxml中定義一個模闆的時候，一般會同時比對一個score.wxss樣式檔案。如果要使用樣式檔案那麼你需要使用import語句引入，例如我們在index.wxml中引入了score.wxml檔案，同時需要在index.wxss檔案中引入score.wxss檔案

@import "/pages/template/score.wxss"

<b>二、需要傳入資料的模闆</b>

    很多時候，我們的模闆也是靈活的，他可以根據需要來傳遞不同的資料。同樣還是上面的評分模闆，我們來修改一下，讓它實作不同的評分樣式。例如可以讓它顯示更多的星星，或者用蘋果圖檔來顯示評分。

    下面我們來示範一個動态的評分條，評分圖案以及個數都依賴js檔案中的資料

    view class='temp-con'&gt;

        block wx:for="{{imgData}}"&gt;

            image wx:if="{{item===1}}" src='{{imgPath_t}}' class='item-img' /&gt;

            image wx:else src='{{imgPath_f}}' class='item-img' /&gt;

        /block&gt;

    /view&gt;

/template&gt;