微信小程序template使用方法

项目中总有项目列表或者经常出现布局样式相同的模块，一般人总喜欢复制一下，就能实现想要的效果，但是，总是复制粘贴代码很难避免让项目变得臃肿，而且还不容易迭代更新，有一个地方需要改进，通常都要一改全改，浪费时间和精力。所以使用模板是大势所趋。

我们再JQuery项目中，可以使用artTemplate插件来实现模板替换功能，不清楚的同学可以点下边的连接了解一下
artTemplate使用方法

在vue等MVVM框架中，可以将列表中的一项，或者经常出现的模块直接独立出一个组件，需要用的地方将组件嵌入即可。

那么小程序里我们该怎么解决呢，接下来，我将详细的记录下其使用方法。

开始之前，我们先做一下准备工作~

在根目录创建资源目录resource来存放所有资源文件
resource文件夹下创建一个存放、管理模板的template文件夹
在template下创建 template.wxml 文件和 template.wxss 文件

定义模板

在 template.wxml 中我们可以定义模板了，这里我们可以写 n（很多很多）个模板，用 name 区分，使用的时候他会自动找到对应 name 的模板。
先上 .wxml 模板代码：

<template name="good">
  <navigator open-type='navigate' url='{{url}}' class="good">
    <image class='image' src='{{item.imgUrl}}'></image>
    <view class='content'>
      <text class='title'>{{item.title}}</text>
      <text class='number'>月售{{item.number}}</text>
      <text class='price'>起送 ￥{{item.priceMin}} | 配送 ￥{{item.priceSend}}</text>
      <text wx:if="{{item.activity}}">{{item.activity}}</text>
    </view>
    <view class='right'>
      <text wx:if="{{item.activity}}" class='is-send'>{{item.isSend}}</text>
      <text class='distance'>{{item.time}}分钟 | {{item.distance}}m</text>
    </view>
  </navigator>
</template>

对应的 .wxss 样式

.good{
  position: relative;
  min-height: 200rpx;
  border-bottom: 2rpx solid #f7f7f7;
  padding: 10rpx;
  margin: 20rpx;
}
.good .image{
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  width: 120rpx;
  height: 120rpx;
  border-radius: 4rpx;
}
.good .content{
  margin-left: 150rpx;
}
.good .content > text{
  display: block;
  color: #666;
  margin-bottom: 5rpx;
}
.good .content .title{
  display: block;
  margin-bottom: 10rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.good .right{
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 24rpx;
}
.good .right .is-send{
  position: absolute;
  top: 0;
  right: 10rpx;
  display: block;
  width: 100rpx;
  text-align: center;
  border-radius: 5rpx;
  background: #0089dc;
  color: #fff;
  font-size: 20rpx;
}
.good .right .distance{
  position: absolute;
  top: 40rpx;
  right: -20rpx;
  width: 200rpx;
}

使用模板

在需要使用模板的 .wxml 文件中，先引入模板文件

<import src="../../resource/template/template.wxml"/>

使用模板：

<block wx:for="{{goodsList}}" wx:key="{{item}}">
    <template is="good" data="{{item}}"></template>
</block>

使用模板我们还有另外一种方式：

<block wx:for="{{goodsList}}" wx:key="{{item}}">
    <template is="good" data="{{...item}}"></template>
</block>

使用这种方法，我们的 template.wxml 文件中，所有的 item.xxx 就可以直接替换成 xxx ，这两种的显示效果是一样的

使用模板样式

在使用模板的对应 .wxss 文件中引入样式：

@import "../../resource/template/template.wxss";

当然我们也可以在 app.xwss 中引入样式文件，这样我们就可以只引用一次就行。

模板数据

对应的 .js 文件中给 goodsList 定义好对应的数据，这样模板效果也就出来了

goodsList: [
        {
          "url": "",
          "imgUrl": "../../resource/imgs/goods/1.png",
          "title": "上记馆",
          "priceMin": "12",
          "priceSend": 4,
          "time": "30",
          "distance": "700",
          "grade": 4.2,
          "number": 100,
          "activity": "新用户下单立减14",
          "isSend": "蜂鸟配送"
        },
        {
          "url": "",
          "imgUrl": "../../resource/imgs/goods/1.png",
          "title": "上记餐",
          "priceMin": "12",
          "priceSend": 5,
          "time": "20",
          "distance": "600",
          "grade": 3.7,
          "number": 30,
          "activity": "新用户下单立减15",
          "isSend": ""
        },
        {
          "url": "",
          "imgUrl": "../../resource/imgs/goods/1.png",
          "title": "记餐馆",
          "priceMin": "12",
          "priceSend": 4,
          "time": "30",
          "distance": "700",
          "grade": 4.2,
          "number": 100,
          "activity": "新用户下单立减14",
          "isSend": "蜂鸟配送"
        },
        {
          "url": "",
          "imgUrl": "../../resource/imgs/goods/1.png",
          "title": "上餐馆",
          "priceMin": "12",
          "priceSend": 5,
          "time": "20",
          "distance": "600",
          "grade": 3.7,
          "number": 30,
          "activity": "新用户下单立减15",
          "isSend": ""
        }
      ]

模板效果

这里写图片描述