小程序开发之--模板的使用

在小程序开发中经常遇见几个页面具有相似的UI，如果每个页面都去写一遍的话会比较繁琐，要是遇见大量的swiper这样的页面需求慢慢写会比较浪费时间。所以模板的使用能够减少我们的工作量并且使代码更加简洁。
模板<template></template>:主要用于页面数据的展示。一个模板文件中可以定义多个模板，根据name这一属性进行区分，使用者根据is去调用自己想要的模板。
首先需要创建一个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>

在这上面我在一个模板文件中定义了两个模板。根据name属性分别给他们不同的名字，区分每个模板，这样在我后面的项目中用到那个模板的时候通过name去进行调用。
模板在调用页面中使用先需要进行引用：

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

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

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

最后在页面中调用代码：

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

根据is属性跟name的值一样就能找到对应名字的模板，成功引用到页面中，data是需要传入模板的数据。

在使用过程中需要注意import的引用范围。只能引用当前页面引用的模板。也就是说如果存在页面间的相互引用，只能引用到当前引用页面应用的模板不能使用当前引用页面引用的另一个页面中用到的模板。

那么在项目开展以前我们需要做些什么才能更好的应用模板呢？
首先可以在需求讨论的时候抓住整个小程序项目的总体需求和页面风格进行一个规划。根据功能区域或者页面数据展示区域相似的几个进行整理和分类。
然后统一分工，让开发人员根据整理好的类别进行合理分工，统一开发模板，定义好模板使用相关这样有利于模板在项目中大量使用，减少代码的繁琐。
也可以在项目开发后期对模板进行提取。将开发完成的代码进行优化的时候把页面数据展示复用性高的代码统一成一套模块，这样在后期的维护和管理中更加方便。