微信小程序實戰購物車功能

代碼地址以下：<br>http://www.demodashi.com/demo/12400.htmlhtml

1、準備工做

軟件環境：微信開發者工具官方下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html小程序

基本需求

顯示圖書基本信息：名稱、做者、描述、價格、數量。
點擊複選框進行toggle操做。當前選中，則變成未選中；當前未選中，則變成選中。
圖書數量的加減操做。
根據選中商品進行價格彙總。
全選/全不選。

目錄結構

2、程序實現步驟

複選框進行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
    })
  },

3、運行效果

微信小程序實戰購物車功能this

代碼地址以下：<br>http://www.demodashi.com/demo/12400.htmlurl