本文主要介绍微信小程序模板化组件import的template和include的使用。
include
适用于静态化的模板,直接引用,数据不可动态更改。即简单的代码替换,不存在作用域,也不像import需要data传递变量。它只是简单的将代码拿出去然后再拿回来,其作用只是单纯的简化页面。
2.1新建一个template文件夹来存放您的通用模板;
2.2在文件夹里面新建一个wxml,wxss,进行模板和样式的定义;
2.3设置模板的name,以及里面您需要定义的wxml内容;
2.4设置wxss样式;
2.5在需要使用的页面使用import导入该wxml页面,注意路径位置;
2.6在需要使用的wxss文件导入该wxss;
2.7在页面上使用该模板,通过is判断使用哪个模板,这里我们使用name为list模板(此处使用的是列表循环,所以data值为item);
foodList.wxml
<template name="list"> <view class='food-list relative flex-row'> <text class='apply-btn'>{{item.type}}</text> <view class='food-img-wrapper relative'> <image class='img-160' src="{{item.url}}" mode="widthFix"></image> </view> <view class='food-msg'> <view class='food-name ellipsis'>{{item.name}}</view> <view class='food-sell-num'>月销量{{item.num}}</view> <view class='food-price-wrapper'> <text class='food-price-current main-color'>{{item.currentPrice}}</text> <text class='food-discount main-color'>{{item.discount}}折</text> <text class='food-price'>¥{{item.price}}</text> </view> </view> <view class='select-num-wrapper flex-row absoult-v'> <view class='food-reduce circle'><text class='absoult-vc'>-</text></view> <view class='food-num relative'><text class="absoult-vc">1</text></view> <view class='food-add circle'><text class='absoult-vc'>+</text></view> </view> </view> </template>
注:若将data使用ES6 展开运算符‘…’,则模板里面绑定数据就不需要在前面加入item了
food.wxml
//include <include src="../../component/foodList/foodList.wxml"/>//直接在要使用的位置引入即可
food.wxml
<import src="../../component/foodList/foodList.wxml"/> <block wx:for="{{data}}" wx:key="" wx:for-index="index"> <view class='relative food-list-wrapper' bindtap='goInfo' data-index="{{index}}"> <template is="list" data="{{item}}"/> <view class='select-num-wrapper flex-row absoult-v'> <view class='food-reduce circle' catchtap='reduce' data-index="{{index}}" wx:if="{{item.selectNum>0}}"> <text class='absoult-vc' >-</text> </view> <view class='food-num relative' wx:if="{{item.selectNum>0}}"> <text class="absoult-vc" >{{item.selectNum}}</text> </view> <view class='food-add circle' catchtap='add' data-index="{{index}}"> <text class='absoult-vc'>+</text> </view> </view> </view> </block>
food.wxss
@import "../../component/foodList/foodList.wxss";
拓展:
由于初学者小伙伴,经常私聊我wxss和js的代码没有贴出来,下方展示部分非接口调用代码,仅供参考。
效果图如下:
app.wxss
/* 弹性布局 */ .flex-row{ display: flex; flex-direction: row; } /* 绝对垂直居中 */ .absoult-vc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .relative{ position: relative; }
foodList.wxss
/* 美食列表页 */ .food-list{ padding: 30rpx; } .food-img-wrapper{ width: 160rpx; height: 160rpx; border-radius: 6rpx; overflow: hidden; } .img-160{ width: 160rpx; height: 160rpx; } .apply-btn{ display: inline-block; position: absolute; left: 24rpx; top: 44rpx; width: 64rpx; height: 32rpx; line-height: 32rpx; font-size: 20rpx; color: #fff; text-align: center; z-index: 2; background-color: #06C1AE; } .food-msg{ line-height: 160rpx; padding: 20rpx 10rpx; } .food-name{ font-size: 30rpx; line-height: 30rpx; color:#494949; } .food-sell-num{ font-size: 23rpx; line-height: 66rpx; color: #A0A0A0; } .select-num-wrapper{ line-height: 28rpx; } .food-price-wrapper{ line-height: 24rpx; } .food-price-current{ font-size: 24rpx; font-weight: bold; } .food-discount{ display: inline-block; font-size: 22rpx; border: 1rpx solid #4499FF; border-radius: 6rpx; margin: 0 10rpx; padding: 1rpx 2rpx; } .food-price{ font-size: 20rpx; color: #A0A0A0; display: inline-block; position: relative; padding-right: 5rpx; } .food-price::after{ content: ""; width: 100%; height: 1rpx; background-color: #A0A0A0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .main-color{ color:#4499FF; } /* 增减按钮 */ .select-num-wrapper{ height: 46rpx; right: 30rpx; } .food-num{ width: 56rpx; } .circle{ width: 46rpx; height: 46rpx; border-radius: 50%; text-align: center; vertical-align: middle; position: relative; } .circle text { margin: 0; padding: 0; display: inline-block; width: 46rpx; height: 46rpx; line-height: 44rpx; font-weight: bold; } .food-reduce{ background-color: #fff; border: 1rpx solid #B0B0B0; color: #B0B0B0; } .food-add{ background-color: #4499FF; border: 1rpx solid #4499FF; color: #323232; }
food.js
//food.js //获取应用实例 const app = getApp() Page(app.$CREATE_PAGE({ data: { id:"", img: app.globalData.imgSrc, //全局设置globalData为imgSrc: '../../component/img/',需要自备案例图哦,建议线上图片最佳 data: [ { type: "预约", name: "农家小炒", num: "99", currentPrice: "16.8", discount: "6.6", price: "26", url: app.globalData.imgSrc + "demo.jpg",selectNum: 0 }, { type: "预约", name: "农家小炒", num: "99", currentPrice: "16.8", discount: "6.6", price: "26", url: app.globalData.imgSrc + "demo.jpg", selectNum: 0 }, { type: "预约", name: "农家小炒", num: "99", currentPrice: "16.8", discount: "6.6", price: "26", url: app.globalData.imgSrc + "demo.jpg", selectNum: 0 }, { type: "预约", name: "农家小炒", num: "99", currentPrice: "16.8", discount: "6.6", price: "26", url: app.globalData.imgSrc + "demo.jpg", selectNum: 0 }, { type: "预约", name: "农家小炒", num: "99", currentPrice: "16.8", discount: "6.6", price: "26", url: app.globalData.imgSrc + "demo.jpg", selectNum: 0 }, { type: "预约", name: "农家小炒", num: "99", currentPrice: "16.8", discount: "6.6", price: "26", url: app.globalData.imgSrc + "demo.jpg", selectNum: 0 }, { type: "预约", name: "农家小炒", num: "99", currentPrice: "16.8", discount: "6.6", price: "26", url: app.globalData.imgSrc + "demo.jpg", selectNum: 0 } ], shopCart: [{ 'Cartid': '20', 'Cartnum': '1' }], sum:0, currentSum:0, isInfo:false, info:[], currentIndex:'', commentList: [ { id: 2, avatar: app.globalData.imgSrc + "avatar.png", commentName: "小白", commentDate: "2019.01.02", commentCon: "味道不錯,很赞", commentImgs: [{ url: app.globalData.imgSrc + "demo.jpg" }, { url: app.globalData.imgSrc + "demo.jpg" }, { url: app.globalData.imgSrc + "demo.jpg" }, { url: app.globalData.imgSrc + "demo.jpg" }, { url: app.globalData.imgSrc + "demo.jpg" }, { url: app.globalData.imgSrc + "demo.jpg" }]}, { id: 2, avatar: app.globalData.imgSrc + "avatar.png", commentName: "小白", commentDate: "2019.01.02", commentCon: "味道不錯,很赞", commentImgs: [{ url: app.globalData.imgSrc + "demo.jpg" }, { url: app.globalData.imgSrc + "demo.jpg" }, { url: app.globalData.imgSrc + "demo.jpg" }, { url: app.globalData.imgSrc + "demo.jpg" }, { url: app.globalData.imgSrc + "demo.jpg" }, { url: app.globalData.imgSrc + "demo.jpg" }]} ] }, onLoad: function (options ) { }, add: function (event) { // 添加按钮 let index = event.currentTarget.dataset.index let data = this.data.data; data[index].selectNum ++; this.setData({ data: data }); this.countNum("add"); }, reduce: function (event) { // 减少按钮 let index = event.currentTarget.dataset.index; let data = this.data.data; data[index].selectNum--; this.setData({ data: data, }); this.countNum("reduce"); }, countNum: function(type) { // 计算数量 let data = this.data.data; let currentSum = 0; let sum = 0; for (let i=0; i<data.length;i++){ if (data[i].selectNum>0){ sum += this.toFixed(data[i].selectNum * data[i].price); currentSum += this.toFixed(data[i].selectNum * data[i].currentPrice); } } this.setData({ sum: this.toFixed(sum), currentSum: this.toFixed(currentSum) }) this.setData({ info: this.data.data[this.data.currentIndex] }); }, toFixed: function (num){ // 求和,控制小数精度 return parseFloat((num).toFixed(10)) }, close: function (){ this.setData({ isInfo: false }) }, goInfo: function (event) { // 弹窗详情页 }, addNum: function() { // 底栏购物车添加按钮 }, reduceNum: function () { // 底栏购物车减少按钮 }, lower: function ( e ) { // 上拉加载 console.log(e) }, loadComment: function(e) { // 上拉加载 console.log(e) }, }))
如有疑问,请留言