微信小程序--模板化组件import的template和include

87 阅读 0 评论 58 点赞

我是靠谱客的博主灵巧夕阳，最近开发中收集的这篇文章主要介绍微信小程序--模板化组件import的template和include，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文主要介绍微信小程序模板化组件import的template和include的使用。

1.静态化组件：include

include适用于静态化的模板，直接引用，数据不可动态更改。即简单的代码替换，不存在作用域，也不像import需要data传递变量。它只是简单的将代码拿出去然后再拿回来，其作用只是单纯的简化页面。

2.动态化组件：import

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了

include引用页面

food.wxml

//include
<include src="../../component/foodList/foodList.wxml"/>//直接在要使用的位置引入即可

import引用页面

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)
  },
}))

如有疑问，请留言