UniApp 项目组件复杂功能解析

摘要

本文将深入解析 UniApp 商城项目中的核心业务功能，包括商品 SKU 选择、购物车数据同步、订单流程优化、微信支付集成及性能优化。通过实际案例与代码示例，帮助开发者更高效地构建商城应用。

1. 商品 SKU 选择组件设计

在商城开发中，商品的 SKU（Stock Keeping Unit） 选择是核心功能，尤其是具有多规格组合的商品，如颜色、尺寸等。UniApp 提供了 picker 组件，但对于复杂 SKU 需要自定义逻辑。

1.1 SKU 数据结构

{
  "id": 1,
  "title": "智能手机",
  "skus": [
    { "color": "黑色", "size": "128GB", "price": 3999, "stock": 10 },
    { "color": "黑色", "size": "256GB", "price": 4299, "stock": 5 },
    { "color": "白色", "size": "128GB", "price": 3899, "stock": 8 }
  ]
}

1.2 SKU 选择组件实现

<template>
  <view class="sku-container">
    <view v-for="(group, index) in skuOptions" :key="index">
      <text>{{ group.name }}</text>
      <view class="sku-options">
        <button v-for="(item, i) in group.values" :key="i" @click="selectSku(group.name, item)">
          {{ item }}
        </button>
      </view>
    </view>
    <text>价格：{{ selectedSku.price || '请选择规格' }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const skuOptions = ref([
  { name: '颜色', values: ['黑色', '白色'] },
  { name: '存储', values: ['128GB', '256GB'] }
]);
const selectedSku = ref({});
const skuData = [
  { color: '黑色', size: '128GB', price: 3999 },
  { color: '黑色', size: '256GB', price: 4299 },
  { color: '白色', size: '128GB', price: 3899 }
];

function selectSku(type, value) {
  selectedSku.value[type] = value;
  selectedSku.value = skuData.find(sku => sku.color === selectedSku.value['颜色'] && sku.size === selectedSku.value['存储']) || {};
}
</script>

---

2. 购物车数据同步

2.1 本地存储 vs. 服务器存储

本地存储（localStorage 或 Vuex） 适合未登录用户，减少 API 请求，但同步问题较多。

服务器存储（数据库） 适合已登录用户，能在多设备同步购物车，但需要优化 API 请求频率。

2.2 购物车数据同步策略

• 未登录状态：存储到 localStorage，用户登录时再同步到服务器。
• 已登录状态：每次修改购物车都同步到服务器，减少用户换设备时数据丢失。

2.3 代码示例（使用 Pinia）

import { defineStore } from 'pinia';
export const useCartStore = defineStore('cart', {
  state: () => ({ cartItems: [] }),
  actions: {
    addToCart(product) {
      this.cartItems.push(product);
      uni.setStorageSync('cart', this.cartItems);
    },
    syncCartWithServer() {
      uni.request({ url: '/api/cart/sync', method: 'POST', data: this.cartItems });
    }
  }
});

---

3. 订单流程优化

3.1 订单创建

订单数据结构：

{
  "order_id": "20250312001",
  "user_id": 1,
  "items": [
    { "product_id": 1, "quantity": 2, "price": 3999 }
  ],
  "status": "pending"
}

3.2 订单状态管理

• pending（待支付）：订单创建成功但未支付
• paid（已支付）：支付成功
• shipped（已发货）：商家发货
• completed（已完成）：交易完成
• canceled（已取消）：用户或超时取消

3.3 订单状态自动更新

在支付回调中更新订单状态：

uni.request({
  url: '/api/order/update',
  method: 'POST',
  data: { order_id: '20250312001', status: 'paid' }
});

---

4. 微信支付集成

4.1 生成支付订单

uni.request({
  url: '/api/wechat/pay',
  method: 'POST',
  data: { order_id: '20250312001', amount: 3999 },
  success(res) {
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: res.timeStamp,
      nonceStr: res.nonceStr,
      package: res.package,
      signType: 'MD5',
      paySign: res.paySign,
      success() { console.log('支付成功'); },
      fail() { console.log('支付失败'); }
    });
  }
});

---

5. 性能优化

5.1 分包加载

"subPackages": [
  {
    "root": "pages/cart",
    "pages": ["cart"]
  }
]

5.2 使用缓存加速

const cachedData = uni.getStorageSync('productList');
if (!cachedData) {
  uni.request({ url: '/api/products', success(res) { uni.setStorageSync('productList', res.data); }});
}

---