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

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

---

🚀前言

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

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

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

🔎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