微信小程序 模板的使用

博主最近实习的时候发现后台传过来的对象是各式各样的，要求前端微信小程序遍历，为了提高复用性，使用了模板（template）。

以下是公司OA系统的部分源码

<template name="item">
  <!-- 招待 -->
  <block wx:if="{{item.title == '业务招待'}}">
    <template is="entertain" data="{{item,icon}}"></template>
  </block>
  <!-- 差旅 -->
  <block wx:elif="{{item.title == '差旅费'}}">
    <template is="travel" data="{{item,icon}}"></template>
  </block>
  <!-- 私车 -->
  <block wx:elif="{{item.title == '私车公用'}}">
    <template is="private" data="{{item,icon}}"></template>
  </block>
   <!-- 私车 -->
  <block wx:elif="{{item.title == '财务审批私车'}}">
    <template is="finance_private" data="{{item,icon,index}}"></template>
  </block>
  <!-- 公车 -->
  <block wx:elif="{{item.title == '公车申请'}}">
    <template is="public" data="{{item,icon}}"></template>
  </block>
  <!-- 用印 -->
  <block wx:elif="{{item.title == '用印申请'}}">
    <template is="seal" data="{{item,icon}}"></template>
  </block>
  <!-- 年假 -->
  <block wx:elif="{{item.title == '年假申请'}}">
    <template is="vacation" data="{{item,icon}}"></template>
  </block>
</template>
<!-- 用印 -->
<template name="seal">
  <view class="pendingItem clearfix" hover-class="pressed_view">
    <image class="user_icon" src="{{icon}}"></image>
    <view class="user_info">
      <view class="user_name">{{item.applyusername}}</view>
      <view class="user_applytype">用印申请</view>
    </view>
    <view class="check_info">
      <view class="detail_info">
        <view>申请部门：</view>
        <view>{{item.department}}</view>
      </view>
      <view class="detail_info">
        <view>用印类型：</view>
        <view>{{item.gzkind}}</view>
      </view>
      <view class="detail_info">
        <view>发往单位：</view>
        <view>{{item.sendto}}</view>
      </view>
      <view class="detail_info">
        <view class="status">{{item.status}}</view>
      </view>
    </view>
    <view class="arrow_right"></view>
  </view>
</template>
<!-- 年假 -->
<template name="vacation">
  <view class="pendingItem clearfix" hover-class="pressed_view">
    <image class="user_icon" src="{{icon}}"></image>
    <view class="user_info">
      <view class="user_name">{{item.applyMan}}</view>
      <view class="user_applytype">年假申请</view>
    </view>
    <view class="check_info">
      <view class="detail_info">
        <view>申请时间：</view>
        <view>{{item.beginTime}}</view>
      </view>
      <view class="detail_info">
        <view>请假类型：</view>
        <view>年假</view>
      </view>
      <view class="detail_info">
        <view>休假次数：</view>
        <view>{{item.department}}</view>
      </view>
      <view class="detail_info">
        <view class="status">{{item.status}}</view>
      </view>
    </view>
    <view class="arrow_right"></view>
  </view>
</template>
<!-- 私车 -->
<template name="private">
  <view class="pendingItem clearfix" hover-class="pressed_view">
    <image class="user_icon" src="{{icon}}"></image>
    <view class="user_info">
      <view class="user_name">{{item.applyMan}}</view>
      <view class="user_applytype">私车申请</view>
    </view>
    <view class="check_info">
      <view class="detail_info">
        <view>出发地点：</view>
        <view>{{item.beginAddress}}</view>
      </view>
      <view class="detail_info">
        <view>目的地点：</view>
        <view>{{item.destination}}</view>
      </view>
      <view class="detail_info">
        <view>申请部门：</view>
        <view>{{item.department}}</view>
      </view>
      <view class="detail_info">
        <view class="status">{{item.status}}</view>
      </view>
    </view>
    <view class="arrow_right"></view>
  </view>
</template>
<!-- 招待 -->
<template name="entertain">
  <view class="pendingItem clearfix" hover-class="pressed_view">
    <image class="user_icon" src="{{icon}}"></image>
    <view class="user_info">
      <view class="user_name">{{item.manager}}</view>
      <view class="user_applytype">招待申请</view>
    </view>
    <view class="check_info">
      <view class="detail_info">
        <view>申请时间：</view>
        <view>{{item.applyTime}}</view>
      </view>
      <view class="detail_info">
        <view>招待单位：</view>
        <view>{{item.entertainObject}}</view>
      </view>
      <view class="detail_info">
        <view>申请部门：</view>
        <view>{{item.department}}</view>
      </view>
      <view class="detail_info">
        <view class="status">{{item.status}}</view>
      </view>
    </view>
    <view class="arrow_right"></view>
  </view>
</template>
<!-- 公车 -->
<template name="public">
  <view class="pendingItem clearfix" hover-class="pressed_view">
    <image class="user_icon" src="{{icon}}"></image>
    <view class="user_info">
      <view class="user_name">{{item.applyMan}}</view>
      <view class="user_applytype">公车申请</view>
    </view>
    <view class="check_info">
      <view class="detail_info">
        <view>申请部门：</view>
        <view>{{item.department}}</view>
      </view>
      <view class="detail_info">
        <view>预借时间：</view>
        <view>{{item.beginTimePlan}}</view>
      </view>
      <view class="detail_info">
        <view>预还时间：</view>
        <view>{{item.endTimePlan}}</view>
      </view>
      <view class="detail_info">
        <view class="status">{{item.state}}</view>
      </view>
    </view>
    <view class="arrow_right"></view>
  </view>
</template>
<!-- 差旅 -->
<template name="travel">
  <view class="pendingItem clearfix" hover-class="pressed_view">
    <image class="user_icon" src="{{icon}}"></image>
    <view class="user_info">
      <view class="user_name">{{item.applyMan}}</view>
      <view class="user_applytype">差旅申请</view>
    </view>
    <view class="check_info">
      <view class="detail_info">
        <view>申请时间：</view>
        <view>{{item.applyTime}}</view>
      </view>
      <view class="detail_info">
        <view>出差天数：</view>
        <view>{{item.travelDays}}</view>
      </view>
      <view class="detail_info">
        <view>申请部门：</view>
        <view>{{item.department}}</view>
      </view>
      <view class="detail_info">
        <view class="status">{{item.approveState}}</view>
      </view>
    </view>
    <view class="arrow_right"></view>
  </view>
</template>
<!-- 财务审批的私车 -->
<template name="finance_private">
  <view class="pendingItem clearfix" hover-class="pressed_view">
    <image class="user_icon" src="{{icon}}"></image>
    <view class="user_info">
      <view class="user_name">{{item.applyMan}}</view>
      <view class="user_applytype">的私车公用</view>
    </view>
    <view class="check_info">
      
      <view class="detail_info">
        <view>条数：</view>
        <view>{{item.sureLength}}</view>
      </view>
      <view class="detail_info">
        <view>金额：</view>
        <view>{{item.sum}}元</view>
      </view>
      <view class="detail_info">
        <view>申请时间：</view>
        <view>{{item.applyTime}}</view>
      </view>
      <view class="detail_info">
        <view class="status">{{item.status}}</view>
      </view>
    </view>
    <view class="arrow_right"></view>
  </view>
</template>
<!-- 财务审批的招待 -->
<template name="finance_entertain">
  <view class="pendingItem clearfix" hover-class="pressed_view" bindtap="toFinanceDetail">
    <image class="user_icon" src="{{icon}}"></image>
    <view class="user_info">
      <view class="user_name">{{item.applyMan}}</view>
      <view class="user_applytype">的业务招待</view>
    </view>
    <view class="check_info">
      <view class="detail_info">
        <view>审批编号：</view>
        <view>{{item.applyTime}}</view>
      </view>
      <view class="detail_info">
        <view>登记人：</view>
        <view>{{item.department}}</view>
      </view>
      <view class="detail_info">
        <view class="status">{{item.approveState}}</view>
      </view>
    </view>
    <view class="arrow_right"></view>
  </view>
</template>

<!-- pages/operatePages/myCheck/checkList/checkList.wxml -->

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

<view class="bgr">

  <!-- tab标签 -->
  <view class="operate">
    <view class="operate_item {{currentTab == 'pending' ?'active':''}}" data-status="pending" bindtap="switchNav">
      <view class="operate_text">待我审批的({{pendingNumber}})</view>
    </view>
    <view class="operate_item {{currentTab == 'approved' ?'active':''}}" data-status="approved" bindtap="switchNav">
      <view class="operate_text">我已审批的</view>
    </view>
  </view>

  <!-- 待我审批的 -->
  <view class="pending" hidden="{{currentTab!=='pending'}}">
    <view wx:for="{{pendingList}}" wx:key="key" wx:for-item="item">
      <view id="{{index}}" bindtap="toPendingDetailItem">
        <template data="{{item,icon,index}}" is="item"></template>
      </view>
    </view>
  </view>

  <!-- 我已审批的 -->
  <view class="approved" hidden="{{currentTab!=='approved'}}">
    <view wx:for="{{approvedList}}" wx:key="key" wx:for-item="item">
      <view id="{{index}}" bindtap="toApprovedDetailItem">
        <template data="{{item,icon}}" is="item"></template>
      </view>
    </view>
  </view>

</view>

注意：template可以传多个参数，用逗号隔开。
主要实现的功能就是，根据后台传过来的title，判断使用哪一个模板，从而显示不同的样式和不同的操作。下面是样图：