在小程序開發(fā)中經(jīng)常遇見幾個頁面具有相似的UI，如果每個頁面都去寫一遍的話會比較繁瑣，要是遇見大量的swiper這樣的頁面需求慢慢寫會比較浪費時間。所以模板的使用能夠減少我們的工作量并且使代碼更加簡潔。
模板<template></template>:主要用于頁面數(shù)據(jù)的展示。一個模板文件中可以定義多個模板，根據(jù)name這一屬性進行區(qū)分，使用者根據(jù)is去調(diào)用自己想要的模板。
首先需要創(chuàng)建一個template

<template name='list'>
  <view class='near-movie'>
    <view class='title'>
      <view class='line' style='width:8rpx;height:28rpx;background-color:#3AB245'></view>
      <view class='title-item'>
        <view class='title-line'>
          <text>{{titleName}}</text>
        </view>
        <view class='more' style='color:#3AB245;margin-right:20rpx'>查看更多 ></view>
      </view>
    </view>
    <view class='movies-content'>
      <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex">
        <block wx:for="{{movies}}">
          <view class='movie-image'>
            <image src='{{item.images.medium}}' catchtap='detailsAction' data-id='{{indexName}}' data-index='{{index}}'></image>
            <view class='movie-details'>
              <view class='titleclass'>
                <text>{{item.title}}</text>
              </view>
              <view class='start'>
              <star id='star' score='4.5'></star>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

<template name='actlist'>
  <view class='near-movie'>
    <view class='title'>
      <view class='title-item'>
        <view class='title-line'>
          <text>{{titleName}}</text>
        </view>
      </view>
    </view>
    <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex">
      <block wx:for="{{movies}}">
        <view class='movie-image' catchtap='detailsAction'>
          <image src='{{item.avatars.small}}'></image>
          <view class='movie-details'>
            <text>{{item.name}}</text>
            <view class='start'>{{workName}}</view>
          </view>
        </view>
      </block>
    </scroll-view>

  </view>
</template>

在這上面我在一個模板文件中定義了兩個模板。根據(jù)name屬性分別給他們不同的名字，區(qū)分每個模板，這樣在我后面的項目中用到那個模板的時候通過name去進行調(diào)用。
模板在調(diào)用頁面中使用先需要進行引用：

<import src="../../template/templates/tem.wxml" />

在wxss里面也需要引用模板的樣式：

@import "../../template/templates/tem.wxss";

最后在頁面中調(diào)用代碼：

 <template is="list" data="{{titleName:'近期上映',movies:near_movies,indexName:'nearMovie'}}" />

根據(jù)is屬性跟name的值一樣就能找到對應(yīng)名字的模板，成功引用到頁面中，data是需要傳入模板的數(shù)據(jù)。

在使用過程中需要注意import的引用范圍。只能引用當前頁面引用的模板。也就是說如果存在頁面間的相互引用，只能引用到當前引用頁面應(yīng)用的模板不能使用當前引用頁面引用的另一個頁面中用到的模板。

那么在項目開展以前我們需要做些什么才能更好的應(yīng)用模板呢？
首先可以在需求討論的時候抓住整個小程序項目的總體需求和頁面風格進行一個規(guī)劃。根據(jù)功能區(qū)域或者頁面數(shù)據(jù)展示區(qū)域相似的幾個進行整理和分類。
然后統(tǒng)一分工，讓開發(fā)人員根據(jù)整理好的類別進行合理分工，統(tǒng)一開發(fā)模板，定義好模板使用相關(guān)這樣有利于模板在項目中大量使用，減少代碼的繁瑣。
也可以在項目開發(fā)后期對模板進行提取。將開發(fā)完成的代碼進行優(yōu)化的時候把頁面數(shù)據(jù)展示復用性高的代碼統(tǒng)一成一套模塊，這樣在后期的維護和管理中更加方便。