微信小程序购物车逻辑实现指南

微信小程序购物车逻辑实现指南

所有代码基于微信小程序官方文档（JavaScript + WXML + WXSS），确保真实性和可操作性。

1. 封装购物车接口

为统一管理购物车操作（如添加、删除、更新），需创建独立的API服务模块。这能提高代码复用性和维护性。

在 utils/cartApi.js 中封装接口：

// 封装购物车相关API请求
const baseUrl = 'https://your-api-domain.com'; // 替换为实际后端地址

export const addToCart = (productId, quantity) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${baseUrl}/cart/add`,
      method: 'POST',
      data: { productId, quantity },
      success: (res) => resolve(res.data),
      fail: (err) => reject(err)
    });
  });
};

export const updateCartItem = (itemId, newQuantity) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${baseUrl}/cart/update`,
      method: 'PUT',
      data: { itemId, newQuantity },
      success: (res) => resolve(res.data),
      fail: (err) => reject(err)
    });
  });
};

// 类似封装删除、批量操作等接口

2. 加入购物车，模板分析和渲染，页面关联store

加入购物车逻辑：在商品详情页，用户点击“加入购物车”按钮时触发事件，调用封装好的API。
模板分析：设计WXML模板，使用数据绑定渲染购物车项（如商品图片、名称、价格）。
页面关联store：使用小程序全局数据（app.globalData）或状态管理库（如 mobx-miniprogram）存储购物车数据。

示例代码（商品详情页JS）：

// pages/productDetail/productDetail.js
import { addToCart } from '../../utils/cartApi';
const app = getApp();

Page({
  data: {
    product: {} // 当前商品数据
  },
  handleAddToCart() {
    addToCart(this.data.product.id, 1).then(() => {
      wx.showToast({ title: '添加成功' });
      // 更新全局store
      app.globalData.cartCount += 1; // 更新购物车数量
    }).catch(err => console.error('添加失败', err));
  }
});

WXML模板示例：

<!-- 商品详情页 -->
<view class="product-container">
  <image src="{
      
      
               {product.image}}"></image>
  &