微信小程序——template的使用方法

今天需要做一个【我的订单】页面，订单有几种状态，觉得把订单列表封装成一个模板更好。下面讲一下，如何用小程序自带的template构建一个模板。

 

1.构建订单列表模板页，命名为 【order.wxml】。

文件目录：

 

order.wxml具体代码：

<template name="orderList">
  <view class='order-item bg-white'>
    <view class='order-list pdlr-15'>
      <navigator url='../detail/index' class='row order-list-item fs-28'>
        <image src='/images/avatar.png' mode='widthFix' class='order-img row-shrink'></image>
        <view class='row-grow ml-10'>
          <text class='course-name ellipsis-two fs-30'>{{name}}</text>
          <text class='block fs-24 fc-99'>数量：{{count}}</text>
          <text class='block fs-24 fc-99'>总价：{{price}}</text>
        </view>
        <view class='row-shrink text-right ml-10'>
          <text class='block fc-blue fs-28'>{{status}}</text>
        </view>
      </navigator>
    </view>
  </view>
</template>

<template name="data-null">
  <view class='no-data'>
    <image src="/images/no_data@2x.png" class='no-data-img'></image>
    <text class='no-data-tips'>暂无数据</text>
  </view>
</template>

记得要给template命名哦~调用的时候需要用到这个名字。

 

2.在pages/order/list/index.wxml里面调用这个模板，注意引用路径。

 

引用的代码：

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

 

调用的代码：

<block wx:for="{{orderList}}" wx:for-item="order">
        <template is="orderList" data="{{...order}}" />
</block>

 

index.js里面的orderList数据：

 

 

我们此时可以看到效果如下：

 

其他说明：

调用模板【页面index.wxml】的时候，我们看到 【data="{{...order}}"】这种写法，这是ES6的写法。
这样写的好处就是在【order.wxml】里面调用数据的时候不用写成【{{order.name}},{{order.count}}】这种形式，直接 【{{name}},{{count}}】就可以了。