微信小程序购物车实现思路

分享一下微信小程序购物车实现思路，购物车离不开checkbox，只是不同框架封装了不同的api，我们来看看小程序里面的checkbox。

查看官方文档，其中要注意的点

• 标签一定要使用 checkbox-group 包裹起来。
• 点击事件通过监听 checkbox-group 的 bindchange 触发。
• 点击事件会携带选中项的 value。

形如这样：

  
    {{item.value}}
  

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  checkboxChange: function(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})

样式控制

微信小程序已经帮我们封装了点击时返回所有已选中项的value，那我们就可以在点击事件发生时用两层循环嵌套，也就是已选中项和所有项，两者比对，用if判断，如果两者的值相等，说明点击了这一项，那么就改变它的样式。比如可以打上一个勾。

// 处理选择一项
// 系统会自动识别选中项的携带值，用e.detail.value获得
var checkboxItems = this.data.checkboxItems, values = e.detail.value;
for (var i = 0, lenI = checkboxItems.length; i < lenI; i++) {
    checkboxItems[i].checked = false; // 先清空所有选中
    for (var j = 0, lenJ = values.length; j < lenJ; j++) {
        if (checkboxItems[i].value == values[j]) { // 通过values来匹配选中项
            checkboxItems[i].checked = true;
            break;
        }
    }
 }

如上所示，我事先让每一项都带有一个布尔属性的checked，默认都是true。这个checked很重要，不仅决定样式还决定了总价的计算。通过判断这个checked来决定样式，也就是是否打勾，所以一开始进购物车页面都是全选状态。

在发生点击事件时，我循环每一项，把它们的checked设置false，也就是全都不选。

接着开始第二层循环，这层循环的是点击事件返回回来的value，也就是选中项。然后if判断相等项就改变对应项的checked值，样式也会跟着变。

价格计算

有了前面的基础，价格计算也就很简单了

checkboxItems.forEach((i) => {
    if (i.checked == true) {
        totalPrice += parseFloat(i.price) * i.count;
        this.setData({
            total: totalPrice.toFixed(2)
        });
        arr.push(i)
    }
 });

还是先循环所有项，因有了前面代码的控制，每一项的checked值都会在你点击选中或取消选中时立即更新，所以这里可以直接判断checked的状态，如果是ture的说明已经选中，那么乘以它的个数，再累加计算出总价。
完整项目可以参考我写的微信小程序商城。