分享一下微信小程序购物车实现思路，购物车离不开checkbox，只是不同框架封装了不同的api，我们来看看小程序里面的checkbox。
查看官方文档，其中要注意的点
- 标签一定要使用
checkbox-group包裹起来。 - 点击事件通过监听
checkbox-group的bindchange触发。 - 点击事件会携带选中项的
value。
形如这样：
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
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的说明已经选中，那么乘以它的个数，再累加计算出总价。
完整项目可以参考我写的微信小程序商城。
