微信小程序实战购物车功能

立即下载用AI写一个

发布时间：2018-01-18

1402人 | 浏览：24389次 | 收藏 |

技术：微信小程序

概述

微信小程序实现购物车基本功能。以图书购买为例，实现加减图书数量，价格汇总，全选与全不选。

详细

### 一、准备工作
软件环境：微信开发者工具
官方下载地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)
#### 基本需求
- 显示图书基本信息：名称、作者、描述、价格、数量。
- 点击复选框进行toggle操作。当前选中，则变成未选中；当前未选中，则变成选中。
- 图书数量的加减操作。
- 根据选中商品进行价格汇总。
- 全选/全不选。
#### 目录结构
![目录结构](/contentImages/image/20180118/Cehg1CqKVqeVvvv0onE.png "目录结构")

### 二、程序实现步骤
复选框进行toggle操作。当前选中，则变成未选择；当前未选中，则变成选中。购物车商品全部选中，全选按钮为选中状态。购物车商品全部未选中，全选按钮为未选中状态。
```
  /**
   * 用户选择购物车商品
   */
  checkboxChange: function (e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value);
    var checkboxItems = this.data.goodList;
    var values = e.detail.value;
    for (var i = 0; i < checkboxItems.length; ++i) {
      checkboxItems[i].checked = false;
      for (var j = 0; j < values.length; ++j) {
        if (checkboxItems[i].isbn == values[j]) {
          checkboxItems[i].checked = true;
          break;
        }
      }
    }

var checkAll = false;
    if (checkboxItems.length == values.length) {
      checkAll = true;
    }

this.setData({
      'goodList': checkboxItems,
      'checkAll': checkAll
    });
    this.calculateTotal();
  },
```
商品的加减操作。当前数量大于1，可以进行加减操作；当前数量为1时，只能进行加操作。
```
  /**
   * 用户点击商品减1
   */
  subtracttap: function (e) {
    var index = e.target.dataset.index;
    var goodList = this.data.goodList;
    var count = goodList[index].count;
    if (count <= 1) {
      return;
    } else {
      goodList[index].count--;
      this.setData({
        'goodList': goodList
      });
      this.calculateTotal();
    }
  },
  
  /**
   * 用户点击商品加1
   */
  addtap: function (e) {
    var index = e.target.dataset.index;
    var goodList = this.data.goodList;
    var count = goodList[index].count;
    goodList[index].count++;
    this.setData({
      'goodList': goodList
    });
    this.calculateTotal();
  },
```
用户点击全选/全不选，遍历购物车所有商品设置当前选中状态。
```
  /**
   * 用户点击全选
   */
  selectalltap: function (e) {
    console.log('用户点击全选，携带value值为：', e.detail.value);
    var value = e.detail.value;
    var checkAll = false;
    if (value && value[0]) {
      checkAll = true;
    }

var goodList = this.data.goodList;
    for (var i = 0; i < goodList.length; i++) {
      var good = goodList[i];
      good['checked'] = checkAll;
    }

this.setData({
      'checkAll': checkAll,
      'goodList': goodList
    });
    this.calculateTotal();
  }
```
选中商品数量发生改变时，进行商品总数量和总价格的计算。
```
  /**
   * 计算商品总数
   */
  calculateTotal: function () {
    var goodList = this.data.goodList;
    var totalCount = 0;
    var totalPrice = 0;
    for (var i = 0; i < goodList.length; i++) {
      var good = goodList[i];
      if (good.checked) {
        totalCount += good.count;
        totalPrice += good.count * good.price;
      }
    }
    totalPrice = totalPrice.toFixed(2);
    this.setData({
      'totalCount': totalCount,
      'totalPrice': totalPrice
    })
  },
```
### 三、运行效果
![运行效果](/contentImages/image/20180118/PNurRCrQmE2hYO59JBq.gif "运行效果")

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

微信小程序实战购物车功能

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子

微信小程序实战 购物车功能

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子

微信小程序实战购物车功能