博主最近实习的时候发现后台传过来的对象是各式各样的，要求前端微信小程序遍历，为了提高复用性，使用了模板（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，判断使用哪一个模板，从而显示不同的样式和不同的操作。下面是样图：
