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

微信小程序——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}},{{unt}}】这种形式，直接 【{{name}},{{count}}】就可以了。