微信小程序实现添加购物车，及购物车商品的增删，全选等_实现在微信小程序

一.首先定义一个点击事件

 const app = getApp()  引入全局app.js
<button bindtap="addCart">添加</button>
data:{
id:'',
image:'',
title:''
}
addCart(){
const obj = {}
goods.id = this.id
goods.image =this.image
goods.title = this.title
app.addToCart(obj)  //调用这个全局点击事件，把商品对象obj传过去
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

二.由于小程序没有vuex，我们需要在app.js中定义全局变量

	//app.js
	App({
	  onLaunch: function () {
	  },
	  addToCart(obj) {
	    // 1.判断是否已经添加进来
	    const oldInfo = this.globalData.cartList.find((item) => item.iid === obj.iid)
	    if (oldInfo) {
	      oldInfo.count += 1
	    } else {
	      obj.count = 1
	      obj.checked = true
	      this.globalData.cartList.push(obj)
	    }
	
	    // 2.购物车回调
	    if (this.addCartCallback) {
	      this.addCartCallback()
	    }
	  },
	  globalData: {
	    cartList: [],
	
	  }
	})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

三.接下来就是在购物车渲染了

 const app = getApp()   引入全局app.js
 data:{
 cartList:[],
 isSelectAll: true,
totalPrice: 0,
totalCounter: 0
 }
 onLoad(){
this.setData({
  cartList: app.globalData.cartList  //定义一个空数组，将全局cartList赋给定义的空数组，接下来就用这个数组进行渲染
})
 // 2.设置回调
app.addCartCallback = () => {
  this.setData({
    cartList: app.globalData.cartList
  })
   this.changeData()
}
这个地方需要注意一下，由于app.js中的onLaunch是异步的,会导致globalData中没有值，这就需要在购物车里面设置一个回调方法，然后在app.js中判断
 // 3.设置修改某个商品的回调
app.changeGoodsState = (index, goods) => {
  // 1.修改某一项的选中状态
  this.setData({
    [`cartList[${index}]`]: goods
  })

  // 2.修改全部选中的状态
  const selectAll = !this.data.cartList.find(item => !item.checked)
  this.setData({
    isSelectAll: selectAll
  })
  this.changeData()
},
onSelectAll() {
// 1.判断是否是全部选中
if (this.data.isSelectAll) { // 目前全部选中
  this.data.cartList.forEach(item => {
    item.checked = false
  })
  this.setData({
    cartList: this.data.cartList,
    isSelectAll: false,
    totalPrice:0
  })
}  
  else { // 某些没选中
  let allprice = 0
  this.data.cartList.forEach(item => {
    item.checked = true
    allprice += item.price * item.count
  })
  this.setData({
    cartList: this.data.cartList,
    isSelectAll: true,
    totalPrice: allprice
  })
}
  },
  allprice(){
    this.changeData()
  },
  removes(){
    this.changeData()
    this.onShow()
  },
  changeData() {
    // 1.获取所有选中数据
    let totalPrice = 0;
    let counter = 0;

for (let item of this.data.cartList) {
  if (item.checked) {
    counter++
    totalPrice += item.price * item.count
  }
}

// 2.修改数据
this.setData({
  totalCounter: counter,
  totalPrice: totalPrice
})
 },
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

由于购物车没有计算属性，所以每次增加删除等都要调用一次算总价的函数

 都要用到这组数据，下面删除全选等
	Component({
	  properties: {
	    cartList: {
	      type: Array,
	      value: []
	    },
	    index: {
	      type: Number
	    }
	  },
	
	  /**
	   * 组件的初始数据
	   */
	  data: {
	    cartList: [],
	  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

四.删除

	remove(e){
	      const index = app.globalData.cartList.findIndex(item=>item.iid ==e.currentTarget.dataset.id)
	      if(index!=-1){
	        app.globalData.cartList.splice(index,1)
	      }
	      this.setData({
	        cartList: app.globalData.cartList
	      })
	      this.triggerEvent('removes')
	    },
     根据id进行删除，这是发送点击事件到父组件，第三调用了可见
1
2
3
4
5
6
7
8
9
10
11

五.加减进行的函数

 change(e) {
  //点击加加减减执行的函数
  //console.log(e)
  let {
    type,
    id
  } = e.currentTarget.dataset;
  let index = app.globalData.cartList.findIndex(item => item.iid == id);
  //console.log(index, "id是", id)
  if (index != -1) {
    //console.log(app.globalData.cartList[index])
    if (type === "+") {
      app.globalData.cartList[index].count++;
    } else {
      app.globalData.cartList[index].count--;
      if (app.globalData.cartList[index].count <= 1) {
        app.globalData.cartList[index].count = 1;
      }
    }
    this.setData({
      cartList: app.globalData.cartList
    })
  }
  this.triggerEvent('allprice')
},
同样发送了点击事件到第三可见，因为没计算属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

六.单选

	 onCheckClick(e) {
	      // 1.查找到对应的商品
	      const goods = app.globalData.cartList.find(item => item.iid == this.properties.cartList[e.currentTarget.dataset.index].iid)
	      goods.checked = !goods.checked
	      console.log(goods)
	      // 2.获取当前商品的index
	      const index = e.currentTarget.dataset.index;
	
	      // 3.回调
	      app.changeGoodsState(index, goods)
	    },
1
2
3
4
5
6
7
8
9
10
11