微信小程序有个template模板引用的功能,就是如果页面上多处用到了想同的样式且数据也是同样的时候可以使用template模板。
具体就是写个模板然后需要的页面引用就可以了,下面是我项目的一个例子
这是我定义的一个模板
<template name="goodsItemTemplate">
<view class='goods_all' catchtap='listClick' data-title='{{goods_name}}' data-url='/goods/goodsdetail/goodsdetail?goods_id={{goods_id}}&&goods_name={{goods_name}}'>
<view class="all-box">
<image src="{{pic_cover_small}}" mode="widthFix"></image>
<view class="shop-detail">
<text decode="true" class="title">
<block wx:for='{{group_query}}' wx:key='' wx:for-item='vo'>
<text class="i goods_tab">{{vo.group_name}}</text>
</block>{{goods_name}}
</text>
<view class="shop-detail-price">
<text>¥{{promotion_price}}</text>
<view style='text-decoration:line-through;color:#d7d7d7;font-size:12px;' wx:if="{{market_price - promotion_price > 0}}">¥{{market_price}}</view>
</view>
</view>
</view>
</view>
</template>
注意每个template都需要一个name,引用模板的页面会根据name的不同来进行区分
在需要引用模板的也买先引入文件
<!-- 引入tempalte -->
<import src="/templates/goods-item-template/goods-item-template.wxml" />
在需要用到模板的地方写上
<template is="goodsItemTemplate" data="{{...shops}}" />
shops是模板页面需要用的数据,shops是个对象,需要用到的数据只需要写上字段名就可以了 不需要像之前那样写上对象名.字段名。
这样就算引用成功了,其他页面也是可以引用的,但是要保证需要的字段是一样的才不会出错。样式可以在模板文件夹里面写公共的也可以在引用的父文件写样式,如果是公共的样式 在父文件的wxss中写上下面的引用就可以了
@import "/templates/goods-item-template/goods-item-template.wxss";