小程序购物车的逻辑

购物车的复选框状态同步
小程序的购物车
添加购物车时，我会添加一个属性用于判断我们的商品有没有没选中，如果被选中呢，就会让这个状态呢变为true，没选中的变为false。然后循环渲染数据的时候，我们复选框的checked属性就根据这个状态的true/false来添加/删除。
这样做我们在切换不同页面时保证复选框的状态不会发生改变。且当重新更新页面时也会同步我们勾选的商品。
比如下边这个wxml
 

// 我是使用了我们的小程序自带的复选框组，传入的是一组选中复选框的id，是一个数组形式。如：['1','2','3']
 <checkbox-group bindchange="change">
  // 事件我们绑定给checkbox-group 只要在这个标签内包裹的复选框状态发生改变，就会触发
      <block wx:for="{{list}}" wx:key="index">
        <view class="list_content">
          <view class="checkbox">
            <checkbox value="{{item.id}}" checked="{{item.flag}}"></checkbox> 
            // 我们复选框的checked绑定给了当前项的这个状态值。
            // 当前这个属性的值如果为true就会添加，false就会删除，checked属性
          </view>
          <image src="{{item.image}}"></image>
          <view class="text">
            <view class="name">{{item.goods_name}}</view>
            <view class="bottom">
              <view class="price">￥{{item.price}}</view>
              <view class="num">
                <text bindtap="reduce" data-index="{{index}}">-</text> // 步进器 减
                <input type="number" value="{{item.num}}" />
                <text bindtap="plus" data-index="{{index}}">+</text> // 步进器 加
              </view>
            </view>
          </view>
        </view>
      </block>
    </checkbox-group>

写好wxml之后呢，就改写我们的js了，首先我们需要在生命周期函数—监听页面显示时获取我们的购物车数据。组件通信小程序只能使用本地存储。

Page({
 data: {
    list: [],
    // 全部数据
  },
  onShow: function () { // 页面显示触发
    let list = wx.getStorageSync('shopping') || []; // 获取本地存储中的数据
    this.setData({ // 赋值并重新渲染页面
      list:list 
    });
  },
)}

首先拿到第一步呢，我们肯定是要先把每一个复选框的状态给同步了，这样我们在写价格啊，选中的数量…。就很简单了。我上面使用的change事件名。
实现思路是：我们这个事件中，默认有一个事件对象e，在这个e里面呢，有我们当前选中的复选框value值，且是一个数组形式，比如我们选中2个就有2个id，选中3个就会有3个id。
然后我们可以根据这个数组中相应的id把他的状态变为true/false。
 

change(e) {
    console.log(e);
    let arr = e.detail.value;  // 我们选中的复选框id都在这个数组中，传入的是我们选中复选框的value值
    console.log(arr);
    // 当前选中的数据id
    this.data.list.forEach(item => { // 首先把我们数据的状态全部变为false
      item.flag = false;
    });
    // 先全部不选中状态
    arr.forEach(item => { // 循环我们选中的数据id
      this.data.list.forEach((con, index) => {  // 然后循环我们所有的数据
        if (item == con.id) {	// 使用每一项id根我们所有数据每一项的id进行对比
          this.data.list[index].flag = true; 		// 如果相等就赋值为true
        }
      })
    })
  },

然后就是我们的计算总价了。
执行思路：首先我们可以筛选出商品中所有状态为true的。然后我们在计算这个数组的总价。

maxPrice(){
	let price = 0;	// 用于保存我们的总价
	let arr = this.data.list.filter(item => { // 筛选出状态为true的商品
      return item.flag == true;
    });
     arr.forEach(item => { // 遍历筛选出的商品
      price += item.num * item.price		// 然后计算起总价，当前价格*当前商品的数量
    });
    this.setData({ // 接着我们使用this.setData 改变数据即可。页面就会自动更新
      price:price
    })
} // 这里你可以封装成一个函数，因为只要触发事件就需要重新计算一次。