微信小程序提供了模板（template）功能

模板是一种类似于组件的功能，把使用频率高、功能单一的代码定义成模板，然后在需要的地方调用

例如，豆瓣电影中有多个列表页，格式相同，内容不同，于是就可以把列表定义成模板
通过传入不同数据显示不同的列表

在微信小程序中定义模板，使用<template/>定义代码片段
在标签上通过name属性定义模板的名字，代码如下

  1. <template name="msgItem">
  2.   <view>
  3.     <text>{{index}}: {{msg}}</text>
  4.     <text>Time: {{time}}</text>
  5.   </view>
  6. </template>

在其他页面里通过is属性声明需要使用的模板，然后将模板需要的data传入，代码如下。

  1. <template is="msgItem" data="{{item}}" />

接下来，在list文件夹下新建list-template.wxml文件
使用template标签创建模板
定义模板名称name="list-template"，代码如下

list-template.wxml

  1. <template name="list-template">
  2.   <scroll-view style="display:inline"
  3.     enable-back-to-top scroll-y bindscrolltolower="loadMorePage">
  4.     <view class="weui-panel">
  5.       <view class="weui-panel__bd">
  6.         <navigator wx:for="{{ movies }}"
  7.           wx:key="{{ item.id }}"
  8.           url="/pages/item/item?id={{ item.id }}"
  9.           class="weui-media-box weui-media-box_appmsg"
  10.           hover-class="weui-cell_active">
  11.           <view class="weui-media-box__hd weui-media-box__hd_in-appmsg"
  12.             style="height:inherit;width:120rpx">
  13.             <image style="width: 128rpx;height: 168rpx;"
  14.             class="weui-media-box__thumb" src="{{ item.images.small }}" />
  15.           </view>
  16.           <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
  17.             <view class="weui-media-box__title">{{ item.title }}</view>
  18.             <view class="weui-media-box__desc">
  19.               {{ item.original_title }} ({{ item.year }})
  20.             </view>
  21.             <view class="weui-media-box__info">
  22.               导演：
  23.               <block wx:for="{{ item.directors }}"
  24.                 wx:key="{{ item.id }}"> {{ item.name }}
  25.               </block>
  26.             </view>
  27.           </view>
  28.           <view class="weui-media-box__ft">
  29.             <view class="weui-badge">{{ item.rating.average }}</view>
  30.           </view>
  31.         </navigator>
  32.       </view>
  33.     </view>
  34.   </scroll-view>
  35. </template>

在list.wxml文件中使用模板

list.wxml

  1. <import src="list-template" />
  2. <template is="list-template" data="{{ movies }}" />

首先通过import标签导入模板
然后通过template的is属性声明需要使用的模板
最后把电影数据传入data