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

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

所有代码基于微信小程序官方文档（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>
      &