微信小程序实现购物车功能的代码

微信小程序实现购物车功能的代码主要分为两部分：前端和后端。前端代码实现用户界面的展示和交互，后端代码实现数据存储和处理。

前端代码：

1. 在页面的 .json 文件中添加购物车数据和购物车总价的变量

{
  "data": {
    "cartList": [], // 购物车数据
    "cartTotalPrice": 0 // 购物车总价
  }
}

2. 在页面的 .wxml 文件中渲染购物车数据

<view wx:for="{{cartList}}" wx:key="index">
  <view>{{item.name}}</view>
  <view>{{item.price}}</view>
  <view>{{item.count}}</view>
  <view>{{item.totalPrice}}</view>
</view>

3. 绑定加入购物车事件，将商品数据添加到购物车数据中，并计算购物车总价

onAddCart: function(event) {
  const item = event.currentTarget.dataset.item;
  let cartList = this.data.cartList;
  let index = cartList.findIndex(i => i.id === item.id);
  if (index === -1) {
    cartList.push({
      id: item.id,
      name: item.name,
      price: item.price,
      count: 1,
      totalPrice: item.price
    });
  } else {
    let count = cartList[index].count + 1;
    let totalPrice = count * item.price;
    cartList[index] = {
      ...cartList[index],
      count,
      totalPrice
    };
  }
  let cartTotalPrice = cartList.reduce((total, i) => total + i.totalPrice, 0);
  this.setData({
    cartList,
    cartTotalPrice
  });
}

4. 绑定移除购物车事件，将商品数据从购物车数据中删除，并计算购物车总价

onRemoveCart: function(event) {
  const item = event.currentTarget.dataset.item;
  let cartList = this.data.cartList;
  let index = cartList.findIndex(i => i.id === item.id);
  if (index !== -1) {
    cartList.splice(index, 1);
  }
  let cartTotalPrice = cartList.reduce((total, i) => total + i.totalPrice, 0);
  this.setData({
    cartList,
    cartTotalPrice
  });
}

后端代码：

1. 创建一个云数据库集合 cart，用于存储购物车数据

2. 在云函数中编写添加购物车数据的函数

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
  const { id, name, price } = event
  try {
    const res = await db.collection('cart').where({
      id
    }).get()
    if (res.data.length > 0) {
      const count = res.data[0].count + 1
      const totalPrice = count * price
      await db.collection('cart').doc(res.data[0]._id).update({
        data: {
          count,
          totalPrice
        }
      })
    } else {
      const count = 1
      const totalPrice = price
      await db.collection('cart').add({
        data: {
          id,
          name,
          price,
          count,
          totalPrice
        }
      })
    }
    return {
      success: true
    }
  } catch (err) {
    return {
      success: false,
      errMsg: err.message
    }
  }
}

3. 在云函数中编写获取购物车数据的函数

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
exports.main = async (event, context) => {
  try {
    const res = await db.collection('cart').get()
    return {
      success: true,
      data: res.data
    }
  } catch (err) {
    return {
      success: false,
      errMsg: err.message
    }
  }
}

4. 在页面的 .js 文件中调用云函数，实现前端与后端的数据交互

onAddCart: function(event) {
  const item = event.currentTarget.dataset.item;
  wx.cloud.callFunction({
    name: 'add-to-cart',
    data: item,
    success: res => {
      console.log(res);
      this.getCartList();
    },
    fail: err => {
      console.log(err);
    }
  });
},
getCartList: function() {
  wx.cloud.callFunction({
    name: 'get-cart-list',
    success: res => {
      console.log(res);
      let cartList = res.result.data;
      let cartTotalPrice = cartList.reduce((total, i) => total + i.totalPrice, 0);
      this.setData({
        cartList,
        cartTotalPrice
      });
    },
    fail: err => {
      console.log(err);
    }
  });
}