【愚公系列】《微信小程序与云开发从入门到实践》059-迷你商城小程序的开发（加入购物车与创建订单功能开发）

🚀前言

在数字化消费日益普及的今天，小程序已经成为商家与消费者互动的重要平台。迷你商城小程序凭借其快捷的访问和丰富的功能，正逐渐改变着传统购物的方式。在这一过程中，购物车与订单创建功能的开发尤为关键，它们不仅是用户购物流程中的重要环节，更直接影响着消费者的购买体验和商家的销售转化率。

购物车功能的实现，使用户能够轻松管理和选择商品，提升了购物的灵活性。而创建订单功能则是购物流程的最后一步，它涉及到用户信息的确认、支付方式的选择等一系列重要操作。如何设计一个直观易用的购物车，以及一个高效流畅的订单创建流程，是每个小程序开发者必须认真考虑的任务。

🚀一、加入购物车与创建订单功能开发

🔎1.购物车功能

在电商类小程序中，购物车是一个核心功能，用户可以将商品添加到购物车、删除不需要的商品，并最终创建订单进行结算。下面是如何通过云函数实现购物车功能的详细步骤，包括添加商品、删除商品、获取购物车信息，以及在小程序端实现相关功能。

🦋1.1 云函数开发

☀️1.1.1 添加商品到购物车 (addToCar)

此云函数用于将商品添加到用户的购物车。

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
   
  env: '' // 填写您的云环境ID
})
const db = cloud.database();
// 云函数入口函数
exports.main = async (event, context) => {
   
    const wxContext = cloud.getWXContext()
    let openId = wxContext.OPENID;
    let gid = event.gid;
    let collection = db.collection("shop_car");
    return collection.add({
   
        data:{
   
            gid:gid,
            openId:openId
        }
    });
}

☀️1.1.2 删除购物车中的商品 (deleteCar)

此云函数用于删除购物车中的指定商品。

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
   
  env: '' // 填写您的云环境ID
})
const db = cloud.database();
// 云函数入口函数
exports.main = async (event, context) => {
   
    const wxContext = cloud.getWXContext()
    let openId = wxContext.OPENID;
    let gid = event.gid;
    let collection = db.collection("shop_car");
    return collection.where({
   
        gid:gid,
        openId:openId
    }).remove();
}

☀️1.1.3 获取购物车信息 (carInfo)

此云函数用于获取当前用户的购物车信息，并结合商品信息返回详细数据。

const cloud = require('wx-server-sdk')
cloud.init({
   
  env: '' // 填写您的云环境ID
})
const db = cloud.database();
exports.main = async (event, context) => {
   
    const wxContext = cloud.getWXContext();
    let openId = wxContext.OPENID;
    let collection = db.collection("shop_car");
    let productC = db.collection("shop_product");
    let data = await collection.where({
   
        openId:openId
    }).get();
    let gArray = data.data;
    for (let j = 0; j < gArray.length; j++) {
   
        let v = gArray[j];
        let p = await productC.where({
   
            gid:v.gid
        }).get();
        v.detail = p.data[0];
    }
    return gArray;
}

🦋1.2 小程序端 server.js 实现

在小程序端，封装对云函数的调用，方便其他页面调用购物车相关功能。

// utils/server/server.js
const server = {
   
    addToCar:function(gid, callback) {
   
        wx.cloud.callFunction({
   
            name:"addToCar",
            data:{
   
                gid:gid
            }
        }).then(res=>{
   
            callback();
        }).catch(error=>{
   
            wx.showToast({
   
              title: `加入购物车失败`,
              icon:"none"
            })
            console.log(error);
        });
    },
    getCarInfo:function(callback) {
   
        wx.cloud.callFunction({
   
            name:"carInfo",
        }).then(res=>{
   
            callback(res.result);
        }).catch(error=>{
   
            wx.showToast({
   
              title: `获取购物车详情失败`,
              icon:"none"
            })
            console.log(error);
        });
    },
    deleteCar:function(gid, callback) {
   
        wx.cloud.callFunction({
   
            name:"deleteCar",
            data:{
   
                gid:gid
            }
        }).then(res=>{
   
            callback(res.result);
        }).catch(error=>{
   
            wx.showToast({
   
              title: `删除商品失败`,
              icon:"none"
            })
            console.log(error);
        });
    },
};

module.exports = {
    server };

🦋1.3 商品详情页 addCar 方法

在商品详情页中，用户可以点击“加入购物车”按钮，将商品添加到购物车。这个方法会调用云函数 addToCar