微信小程序中购物车的简单实例

1. 购物车概述

在电商网站或者APP中，购物车是一个非常重要的功能模块，用户在购买商品的过程中，可以把想买的商品放到购物车中，最后统一结算下单。在微信小程序中也可以实现购物车功能，因此本篇文章将为大家介绍如何在微信小程序中实现购物车功能。

2. 界面设计

在界面设计中，我们需要对购物车的页面UI进行设计，常见的购物车页面有三个部分：header、商品列表区、结算栏。其中header用于显示标题和返回键，商品列表区用于列出购物车中的所有商品，结算栏用于显示总金额和结算按钮等信息。

2.1 header

header部分在小程序中通常使用导航栏来实现，页面的标题和返回按钮都可以通过导航栏来实现。导航栏的使用可以参考微信小程序开发文档中的详细说明：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/navigationbar.html

  wx.setNavigationBarTitle({
    title: '购物车'
  })
  wx.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#2d8cf0',
    animation: {
      duration: 400,
      timingFunc: 'easeIn'
    }
  })

2.2 商品列表区

商品列表区需要展示购物车中所有的商品信息，包括商品的名称、价格、数量等信息。基本的布局可以使用<view></view>标签来实现。

针对商品列表中的一些操作，我们可以使用<swiper></swiper>标签实现左右滑动效果，同时可以通过监听事件来处理删除、修改数量等操作。

  <swiper-item>
    <view class="cart-item">
      <view class="cart-item-img">
        <image src="{{ item.img }}" mode="widthFix"></image>
      </view>
      <view class="cart-item-right">
        <view class="cart-item-right-top">
          <view class="cart-item-right-top-title">{{ item.title }}</view>
          <view class="cart-item-right-top-del" bindtap="delItem" data-id="{{ item.id }}"></view>
        </view>
        <view class="cart-item-right-bottom">
          <view class="cart-item-right-bottom-price">{{ item.price }}</view>
          <view class="cart-item-right-bottom-num">
            <button class="cart-item-right-bottom-num-plus" bindtap="addItem" data-id="{{ item.id }}">+</button>
            <text class="cart-item-right-bottom-num-text">{{ item.count }}</text>
            <button class="cart-item-right-bottom-num-minus" bindtap="delOneItem" data-id="{{ item.id }}">-</button>
          </view>
        </view>
      </view>
    </view>
  </swiper-item>

2.3 结算栏

结算栏主要用于显示总金额和结算按钮，通过下面的代码可以实现结算栏的布局和JS代码处理。

  <view class="cart-footer">
    <view class="cart-footer-left">
      <view class="cart-footer-left-check">
        <checkbox bindchange="selectAll" checked="{{ selectAllStatus }}"></checkbox>
        <text>全选</text>
      </view>
      <view class="cart-footer-left-price">合计: <strong>¥{{ totalPrice.toFixed(2) }}</view>
    </view>
    <view class="cart-footer-right">
      <button class="cart-footer-right-btn" bindtap="toPay">去结算</button>
    </view>
  </view>

3.购物车逻辑处理

接下来我们需要实现购物车的逻辑处理，包括添加商品、修改数量、删除商品、全选/取消全选等操作。下面的代码块包括了购物车页面的相关逻辑处理。

  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    // 获取购物车商品列表
    let cartData = wx.getStorageSync('cartData') || []
    this.setData({
      cartData: cartData
    })
    // 计算总价
    this.getTotalPrice()
  },
  // 修改商品数量
  addItem: function (e) {
    let id = e.currentTarget.dataset.id
    let cartData = this.data.cartData
    for (let i = 0; i < cartData.length; i++) {
      if (cartData[i].id === id) {
        cartData[i].count++
        break
      }
    }
    wx.setStorageSync('cartData', cartData)
    this.setData({
      cartData: cartData
    })
    this.getTotalPrice()
  },
  delOneItem: function (e) {
    let id = e.currentTarget.dataset.id
    let cartData = this.data.cartData
    for (let i = 0; i < cartData.length; i++) {
      if (cartData[i].id === id) {
        if (cartData[i].count > 1) {
          cartData[i].count--
        } else {
          cartData.splice(i, 1)
        }
        break
      }
    }
    wx.setStorageSync('cartData', cartData)
    this.setData({
      cartData: cartData
    })
    this.getTotalPrice()
  },
  delItem: function (e) {
    let id = e.currentTarget.dataset.id
    let cartData = this.data.cartData
    for (let i = 0; i < cartData.length; i++) {
      if (cartData[i].id === id) {
        cartData.splice(i, 1)
        break
      }
    }
    wx.setStorageSync('cartData', cartData)
    this.setData({
      cartData: cartData
    })
    this.getTotalPrice()
  },
  // 全选
  selectAll: function () {
    let selectAllStatus = !this.data.selectAllStatus
    let cartData = this.data.cartData
    for (let i = 0; i < cartData.length; i++) {
      cartData[i].selected = selectAllStatus
    }
    wx.setStorageSync('cartData', cartData)
    this.setData({
      cartData: cartData,
      selectAllStatus: selectAllStatus
    })
    this.getTotalPrice()
  },
  // 计算总价
  getTotalPrice: function () {
    let cartData = this.data.cartData
    let totalPrice = 0
    let selectAllStatus = true
    for (let i = 0; i < cartData.length; i++) {
      if (cartData[i].selected) {
        totalPrice += cartData[i].price * cartData[i].count
      } else {
        selectAllStatus = false
      }
    }
    this.setData({
      totalPrice: totalPrice,
      selectAllStatus: selectAllStatus
    })
  },
  // 去结算
  toPay: function () {
    // ...
  }

4. 结语

至此，购物车的基本功能已经实现。

购物车在电商网站或者APP中是一个必不可少的功能，通常用于收集用户选购的商品信息，并在结算时生成订单，可谓是电商系统不可或缺的中枢模块，我们希望通过本篇文章的介绍能够使大家更深入地了解购物车的实现原理，同时希望本篇文章能够对您有所启发。