微信小程序加入购物车
-
2026-10-17
昆明
- 返回列表
在电商类微信小程序的开发中，购物车是连接用户浏览与下单支付的核心枢纽。一个体验流畅、逻辑清晰的购物车功能，能显著提升用户留存与转化率。本文将手把手带你实现一个具备商品增删改查、实时计算、数据持久化等核心能力的购物车模块。我们将从项目结构搭建开始，逐步完成前端页面、后端逻辑与本地存储的完整闭环。
一、 开发前准备与环境搭建
在开始编写代码之前，请确保已完成以下基础准备：
1. 注册小程序账号：前往微信公众平台注册小程序账号，获取仅此的 AppID。
2. 安装开启者工具：下载并安装微信开启者工具，这是官方推荐的开发、调试与预览环境。
3. 创建小程序项目：使用开启者工具新建项目，填入你的 AppID，选择合适的模板（建议选择“不使用云服务”）。
4. 规划项目结构：在项目根目录下，我们主要需要以下文件：
`pages/cart/cart.js` (购物车页面逻辑)
`pages/cart/cart.wxml` (购物车页面结构)
`pages/cart/cart.wxss` (购物车页面样式)
`pages/cart/cart.json` (购物车页面配置)
商品数据通常可放在 `utils/data.js` 中模拟，或通过 `app.js` 设置全局变量。
二、 数据模型设计与模拟
购物车的核心是数据。我们首先设计商品和购物车项的数据结构。
1. 商品信息模型 (Goods)：
每个商品至少应包含以下字段：
```javascript
id: '1001', // 商品仅此标识
name: '经典T恤',
price: 89.90, // 商品单价
image: '/images/goods/tshirt.jpg', // 商品主图
stock: 100 // 商品库存
```
2. 购物车项模型 (CartItem)：
购物车中每一条记录代表一个商品及其购买状态。
```javascript
goods_id: '1001', // 关联商品ID
name: '经典T恤',
price: 89.90,
image: '/images/goods/tshirt.jpg',
num: 2, // 购买数量
selected: true // 是否选中（用于结算）
```
3. 初始化模拟数据：
在 `app.js` 的 `onLaunch` 函数中，或在 `cart.js` 的 `data` 中初始化购物车数据。
```javascript
// 在 cart.js 的 data 中
cartList: [], // 购物车列表，初始为空
// 模拟的商品列表，实际开发中由商品页传入或从服务器获取
goodsList: [
{id: '1001', name: '经典T恤', price: 89.90, image: '/...', stock: 100},
{id: '1002', name: '休闲长裤', price: 159.00, image: '/...', stock: 50}
```
三、 购物车页面布局与样式实现 (WXML & WXSS)
购物车页面通常包含商品列表、数量操作、选择框、汇总栏等部分。
1. 核心WXML结构：
```xml
合计：
```
2. 基础样式要点 (WXSS)：
使用 Flex 布局灵活排列商品项内的元素。
为按钮、选择框设置合适的尺寸、颜色和反馈状态（如 `:active`）。
空状态页面居中显示，并配以友好的插图和文案。
底部汇总栏使用 `position: fixed` 固定在底部，注意留出安全区域（如 iPhone 底部黑条）。
四、 购物车核心逻辑实现 (JS)
这是购物车功能的大脑，所有交互行为都在这里处理。
1. 添加商品到购物车：
此功能通常在商品详情页触发。我们需要一个全局可访问的方法。
```javascript
// 在 app.js 中定义全局方法
addToCart(goods) {
const cart = wx.getStorageSync('cart') || []; // 从本地存储读取
const index = cart.findIndex(item => item.goods_id === goods.id);
if (index > -1) {
// 已存在，数量+1
cart[index].num += 1;
} else {
// 新商品，加入列表
cart.push({
goods_id: goods.id,
..goods, // 展开商品信息
num: 1,
selected: true
});
wx.setStorageSync('cart', cart); // 保存到本地
// 可选：触发自定义事件，更新购物车角标
this.updateCartBadge;
```
2. 购物车页面逻辑 (cart.js)：
```javascript
Page({
cartList: [],
isAllSelected: false,
totalPrice: 0,
selectedCount: 0
},
onShow {
// 页面显示时，从本地存储加载购物车数据
this.loadCartData;
},
loadCartData {
const cartList = wx.getStorageSync('cart') || [];
this.setData({ cartList });
this.calculateTotal; // 加载后迅速计算总价和数量
},
// 增加商品数量
increaseNum(e) {
const index = e.currentTarget.dataset.index;
let { cartList } = this.data;
cartList[index].num += 1;
this.updateCartAndCalculate(cartList);
},
// 减少商品数量
decreaseNum(e) {
const index = e.currentTarget.dataset.index;
let { cartList } = this.data;
if (cartList[index].num > 1) {
cartList[index].num -= 1;
this.updateCartAndCalculate(cartList);
},
// 切换单项选择状态
toggleSelect(e) {
const index = e.currentTarget.dataset.index;
let { cartList } = this.data;
cartList[index].selected = !cartList[index].selected;
this.updateCartAndCalculate(cartList);
},
// 删除商品项
deleteItem(e) {
const index = e.currentTarget.dataset.index;
let { cartList } = this.data;
wx.showModal({
title: '提示',
content: '确定删除该商品吗？',
success: (res) => {
if (res.confirm) {
cartList.splice(index, 1);
this.updateCartAndCalculate(cartList);
});
},
// 全选/反选
toggleSelectAll {
let { cartList, isAllSelected } = this.data;
const newSelectStatus = !isAllSelected;
cartList.forEach(item => item.selected = newSelectStatus);
this.updateCartAndCalculate(cartList);
},
// 更新本地存储并计算总价和数量
updateCartAndCalculate(cartList) {
wx.setStorageSync('cart', cartList);
this.setData({ cartList });
this.calculateTotal;
},
// 计算总价和选中数量
calculateTotal {
let totalPrice = 0;
let selectedCount = 0;
let isAllSelected = true;
this.data.cartList.forEach(item => {
if (item.selected) {
totalPrice += item.price item.num;
selectedCount += 1;
} else {
isAllSelected = false;
});
// 处理空购物车时全选状态
if (this.data.cartList.length === 0) isAllSelected = false;
this.setData({
totalPrice: totalPrice.toFixed(2),
selectedCount,
isAllSelected
});
// 同步更新购物车角标
wx.setTabBarBadge({
index: 1, // 假设购物车在第二个tab
text: this.data.cartList.length.toString
});
},
// 去结算
goToSettle {
const selectedItems = this.data.cartList.filter(item => item.selected);
if (selectedItems.length === 0) {
wx.showToast({ title: '请选择商品', icon: 'none' });
return;
// 将选中商品数据传递到结算页
wx.navigateTo({
url: `/pages/order/confirm?items=${encodeURIComponent(JSON.stringify(selectedItems))}&total=${this.data.totalPrice}`
});
})
```
五、 数据持久化与状态同步
1. 本地存储 (Storage)：
我们使用 `wx.setStorageSync` 和 `wx.getStorageSync` 将购物车数据保存在用户设备本地。这确保了用户关闭小程序再打开后，购物车内容不丢失。
2. 购物车角标 (TabBar Badge)：
在 `calculateTotal` 方法中，我们调用 `wx.setTabBarBadge` 更新角标数字，实时反映购物车内商品总数，提升用户体验。
3. 与商品页的通信：
添加商品：商品页通过 `getApp.addToCart(goods)` 调用全局方法。
数据同步：购物车页面在 `onShow` 生命周期函数中加载蕞新数据，确保从商品页返回时数据是蕞新的。
六、 功能优化与体验提升建议
1. 性能优化：
对于长列表，使用 `wx:for` 时务必指定仅此的 `wx:key`。
频繁的计算（如总价）可使用函数节流（throttle）避免过度渲染。
2. 体验增强：
数量输入框：除了加减按钮，可提供直接输入数量的输入框。
库存校验：在增加数量时，实时检查库存并给出提示。
失效商品处理：定期或从服务器同步，将已下架或库存为0的商品标记为“失效”，并提示用户移除。
动画反馈：为添加、删除操作添加简单的CSS动画，使交互更生动。
3. 错误处理：
对本地存储操作进行 `try...catch` 包装。
网络请求（如果涉及服务端）添加加载状态和失败提示。
通过以上六个步骤，我们完成了一个功能完备的微信小程序购物车模块。其核心流程可概括为：设计数据结构 -> 构建页面视图 -> 实现交互逻辑 -> 处理数据持久化 -> 完善细节体验。关键在于理解购物车数据（CartItem）与商品数据（Goods）的关联，以及通过本地存储实现状态的跨页面、跨生命周期维护。开启者可以根据实际业务需求，在此基础上扩展优惠券计算、运费计算、商品推荐等更复杂的功能，清晰的代码结构和良好的用户体验永远是电商功能开发的首要追求。
