微信小程序-制作购物车-CSDN博客

小程序准备

首先先去微信公众平台注册账号(记得点小程序)，然后下载一个微信web开发者工具，创建小程序项目，要输一个AppID(小程序ID)，在浏览器上登录小程序后，在设置->开发设置中可以看到开发者ID填入就可以创建项目了。

创建目录

其实小程序的目录结构相对简单，我们在pages下创建一个shoppingCart的目录，在底下创建一个.js,.json,.wxml,.wxss,可以把wxml当做是html，wxss当做是css。这样就清楚很多了，接着在最外层的app.json中的oages数组下配置"pages/shoppingCart/shoppingCart，把"..shoppingCart"放到第一个，这样当保存的时候左边会显示购物车的页面，如下图。

有兴趣的可以把下面的代码拿去运行下(如果有人喜欢我会接下去分析代码)

贴上代码==>

页面结构.wxml

<view class="container">
 <text class="title">购物车</text>
 <view class='goodList'>
    <view class='good' wx:for="{{list}}" wx:key="{{index}}" >
      <icon class='item-select'  type="{{item.select}}"  data-index="{{index}}" data-select="{{item.select}}" size="23" bindtap='selectItem'/>
      <image class='item-image' src="{{item.url}}"> </image>

      <view class='column'>
         <text class="name"> {{item.name}}</text>
          <view class='row'>
            <text class="price"> {{item.price}}</text>
            <view class='changeNum'>
              <button class='btn'  hover-class='active'  data-index='{{index}}' data-state='delete'  bindtap='changeNum'> -</button>
              <text class="num"> {{item.num}}</text>
              <button class='btn' hover-class='active'   data-index='{{index}}' data-state='add' bindtap='changeNum'> +</button>
            </view>
            
          </view>
      </view>
    </view>

 </view>
 <view class="bottom">
  <icon class='selectAll'  type="{{allSelect}}"  data-select="{{allSelect}}"  bindtap='selectAll' size='23'/>
  <text >全选</text> 
  <text class='total'>合计 : <text class='red'>{{count}}</text> </text> 
 </view>
</view>
复制代码

CSS .wxss

.goodList{
  width: 100%;
}
.good{
   display: flex;
   flex-direction: row;
   width: 100%;
   background:#f1eded;
   margin-bottom: 20rpx;
}

.column {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex-direction: row;
}
.price {
  display: block;
  width:100rpx ;
  color: red;
  position: relative;
  margin-top: 70rpx;
}
.name {
  font-size: 38rpx;
  margin-top: 40rpx;
}
.title{
  position: fixed;
  display: flex;
  justify-content: center;
  top: 0;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: pink;
  z-index: 999;
}
.item-image{
  width:180rpx;
  height: 180rpx;
   margin: 20rpx;
}
.item-select {
  margin-top: 90rpx;
  margin-left: 40rpx;
}
.selectAll{
 
  margin-left: 40rpx;
  margin-right: 20rpx;
}
.bottom{
  position: fixed;
  display: flex;
  align-items: center;
  bottom: 0;
  width: 100%;
  height: 80rpx;
  border-top: 1px solid gray;
  background: white;
  z-index: 999;
}
.total{margin-left: 45%;}
.btn{height:60rpx;  display: flex;  align-items: center;}
.active{opacity:0.6 ;}
.num{padding:0 20rpx ;}
.changeNum{display: flex; flex-direction: row;  margin-top: 70rpx;position: relative;right: 0; margin-left: 100rpx;}
.red{color: red;}

复制代码

JS

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    list: [{
      code: "0001",
      name: "无人机",
      url: "http://i1.mifile.cn/a1/pms_1487824962.01314237!220x220.jpg",
      style: "低配版",
      price: "4999",
      select: "circle",
      num: "1"
    },
    {
      code: "0002",
      name: "智能手环",
      url: "http://i1.mifile.cn/a1/pms_1467962689.97551741!220x220.jpg",
      style: "2代",
      price: "149",
      select: "circle",
      num: "1"
    }, {
      code: "0003",
      name: "指环支架",
      url: "http://i2.mifile.cn/a1/pms_1482221011.26064844.jpg",
      style: "金色",
      price: "19",
      select: "circle",
      num: "1"
    }, {
      code: "0002",
      name: "智能手环",
      url: "http://i1.mifile.cn/a1/pms_1467962689.97551741!220x220.jpg",
      style: "2代",
      price: "149",
      select: "circle",
      num: "1"
    }, {
      code: "0003",
      name: "指环支架",
      url: "http://i2.mifile.cn/a1/pms_1482221011.26064844.jpg",
      style: "金色",
      price: "19",
      select: "circle",
      num: "1"
    }],
    allSelect: "circle",
    num: 0,
    count: 0
  },
  //事件处理函数
  turnToCart: function () {
    wx.navigateTo({
      url: '../shoppingCart/shoppingCart'
    })
  },
  selectItem: function (e) {
    var [select, index, newList, isAll] = [e.currentTarget.dataset.select, e.currentTarget.dataset.index,this.data.list, "success"];
    newList[index].select = this.listenType(select);
    newList.forEach(function (value, index) {
      if (newList[index].select == "circle"){
          isAll= "circle"
      }
    })
    this.setData({
      list: newList,
      allSelect: isAll,
      count: this.computedMoney()
    })

  },
  selectAll :function(e){
    var [select, that, newList] = [e.currentTarget.dataset.select,this, this.data.list]
    newList.forEach(function(value,index){
      newList[index].select = that.listenType(select);
    })
    this.setData({
      list: newList,
      allSelect: this.listenType(select),
      count: this.computedMoney()
    })
  },
  changeNum:function(e) {
    var [changeState, index, newList] = [e.currentTarget.dataset.state, e.currentTarget.dataset.index,  this.data.list]
    var value = changeState == "add" ? 1 : -1;
    newList[index].num = Number(newList[index].num) + Number( value) ;
    if (newList[index].num == 0 ){
      newList.splice(index,1);
    } 
    this.setData({
      list: newList,
      count: this.computedMoney()
    })
  },
  listenType:function(selectType){
    return selectType == "circle" ? "success" : "circle";
  },
  computedMoney:function(){
    var totalMoney=0;
    this.data.list.forEach(function(value,index){
      if (value.select=='success'){
        totalMoney += Number(value.price) * Number(value.num);
      }
    })
    return totalMoney;
  },
  onLoad: function () {

  }
   
   

})

复制代码