E企盈营销工具技术服务商 热线:4006-838-530

微信小程序template使用方法

E企盈直播平台营销卖货系统

项目中总有项目列表或者经常出现布局样式相同的模块,一般人总喜欢复制一下,就能实现想要的效果,但是,总是复制粘贴代码很难避免让项目变得臃肿,而且还不容易迭代更新,有一个地方需要改进,通常都要一改全改,浪费时间和精力。所以使用模板是大势所趋。我们再JQuery项目中,可以使用artTemplate插件来实现模板替换功能,不清楚的同学可以点下边的连接了解一下 artTemplate使用方法在vue等MVVM框架中,可以将列表中的一项,或者经常出现的模块直接独立出一个组件,需要用的地方将组件嵌入即可。那么小程序里我们该怎么解决呢,接下来,我将详细的记录下其使用方法。开始之前,我们先做一下准备工作~在根目录创建资源目录resource来存放所有资源文件resource文件夹下创建一个存放、管理模板的template文件夹在template下创建 template.wxml 文件和 template.wxss 文件定义模板在 template.wxml 中我们可以定义模板了,这里我们可以写 n(很多很多)个模板,用 name 区分,使用的时候他会自动找到对应 name 的模板。 先上 .wxml 模板代码:<template name=”good”>  <navigator open-type=’navigate’ url='{{url}}’ class=”good”>    <image class=’image’ src='{{item.imgUrl}}’></image>    <view class=’content’>      <text class=’title’>{{item.title}}</text>      <text class=’number’>月售{{item.number}}</text>      <text class=’price’>起送 ¥{{item.priceMin}} | 配送 ¥{{item.priceSend}}</text>      <text wx:if=”{{item.activity}}”>{{item.activity}}</text>    </view>    <view class=’right’>      <text wx:if=”{{item.activity}}” class=’is-send’>{{item.isSend}}</text>      <text class=’distance’>{{item.time}}分钟 | {{item.distance}}m</text>    </view>  </navigator></template>对应的 .wxss 样式.good{  position: relative;  min-height: 200rpx;  border-bottom: 2rpx solid #f7f7f7;  padding: 10rpx;  margin: 20rpx;}.good .image{  position: absolute;  top: 20rpx;  left: 20rpx;  width: 120rpx;  height: 120rpx;  border-radius: 4rpx;}.good .content{  margin-left: 150rpx;}.good .content > text{  display: block;  color: #666;  margin-bottom: 5rpx;}.good .content .title{  display: block;  margin-bottom: 10rpx;  font-size: 36rpx;  font-weight: bold;  color: #333;}.good .right{  position: absolute;  top: 20rpx;  right: 20rpx;  font-size: 24rpx;}.good .right .is-send{  position: absolute;  top: 0;  right: 10rpx;  display: block;  width: 100rpx;  text-align: center;  border-radius: 5rpx;  background: #0089dc;  color: #fff;  font-size: 20rpx;}.good .right .distance{  position: absolute;  top: 40rpx;  right: -20rpx;  width: 200rpx;}使用模板在需要使用模板的 .wxml 文件中,先引入模板文件<import src=”../../resource/template/template.wxml”/>使用模板:<block wx:for=”{{goodsList}}” wx:key=”{{item}}”>    <template is=”good” data=”{{item}}”></template></block>使用模板我们还有另外一种方式:<block wx:for=”{{goodsList}}” wx:key=”{{item}}”>    <template is=”good” data=”{{…item}}”></template></block>使用这种方法,我们的 template.wxml 文件中,所有的 item.xxx 就可以直接替换成 xxx ,这两种的显示效果是一样的使用模板样式在使用模板的对应 .wxss 文件中引入样式:@import “../../resource/template/template.wxss”;当然我们也可以在 app.xwss 中引入样式文件,这样我们就可以只引用一次就行。模板数据对应的 .js 文件中给 goodsList 定义好对应的数据,这样模板效果也就出来了goodsList: [        {          “url”: “”,          “imgUrl”: “../../resource/imgs/goods/1.png”,          “title”: “上记馆”,          “priceMin”: “12”,          “priceSend”: 4,          “time”: “30”,          “distance”: “700”,          “grade”: 4.2,          “number”: 100,          “activity”: “新用户下单立减14”,          “isSend”: “蜂鸟配送”        },        {          “url”: “”,          “imgUrl”: “../../resource/imgs/goods/1.png”,          “title”: “上记餐”,          “priceMin”: “12”,          “priceSend”: 5,          “time”: “20”,          “distance”: “600”,          “grade”: 3.7,          “number”: 30,          “activity”: “新用户下单立减15”,          “isSend”: “”        },        {          “url”: “”,          “imgUrl”: “../../resource/imgs/goods/1.png”,          “title”: “记餐馆”,          “priceMin”: “12”,          “priceSend”: 4,          “time”: “30”,          “distance”: “700”,          “grade”: 4.2,          “number”: 100,          “activity”: “新用户下单立减14”,          “isSend”: “蜂鸟配送”        },        {          “url”: “”,          “imgUrl”: “../../resource/imgs/goods/1.png”,          “title”: “上餐馆”,          “priceMin”: “12”,          “priceSend”: 5,          “time”: “20”,          “distance”: “600”,          “grade”: 3.7,          “number”: 30,          “activity”: “新用户下单立减15”,          “isSend”: “”        }      ]模板效果微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序template使用方法
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏