微信小程序电商实战 01：技术栈全景选型
微信小程序电商实战 01 技术选型 ← 本文 | 02 脚手架搭建 | 03 NutUI 配置 | 04 云开发环境 | 05 商品模块 | 06 购物车与订单 | 07 微信支付 | 08 用户中心 | 09 性能优化 | 10 上线部署
# 微信小程序电商技术选型
## 框架层
### 原生 WXML/JS
- 零包体增量，冷启动 680ms
- 仅限微信，无跨平台
### Taro 3 + Vue 3（推荐）
- 运行时方案，+150~200KB
- 首屏 450ms，多端复用
- React / Vue 二选一
### uni-app
- 编译时方案，+80~120KB
- 首屏 380ms
- App 端支持更完整
## UI 组件库
### NutUI（Taro 路线）
- 官方包：@nutui/nutui-taro
- 不支持 uni-app 原生包
- 80+ 电商组件
### Vant Weapp（原生路线）
- 组件丰富，文档完善
- 不支持 Taro/uni-app 直用
### TDesign Mobile
- 腾讯官方，原生 + uni-app
## 状态管理
### Pinia（推荐）
- Taro + Vue 3 官方验证
- uni-app 需锁版本 2.0.36
- DevTools 支持
### Vuex 4
- 已不推荐，迁移成本高
## 后端 / 云开发
### 微信云开发 CloudBase（推荐）
- 国内延迟 20~40ms
- 微信支付模板一键生成
- 冷启动 ~80ms
### 自建 Node/Go 服务
- 中大型项目适用
- 需自实现支付签名
### Supabase
- 国内 200ms+ 延迟
- 不适合国内用户
## 微信支付
### wx.requestPayment
- 5 个必填参数
- package 格式固定
- 前端回调不可靠
### CloudBase 支付模板
- 自动生成 5 个云函数
- 三段式：下单/支付/回调
## 工具链
### 微信开发者工具
- 必需，用于预览调试
### VS Code / Cursor
- Taro 代码编写主力
### pnpm + Vite
- Taro 3.6+ 支持 Vite
一、为什么不直接用原生小程序？
原生 WXML/JS 性能最好（冷启动 680ms，零包体增量），但电商项目通常需要：
- 多端覆盖：同一套代码跑微信 + 支付宝 + H5，触达更多用户
- 组件复用：React/Vue 生态的 UI 库和工具直接可用
- 团队协作：前端开发者更熟悉 Vue/React 范式，降低学习成本
原生方案适合：性能敏感的游戏小程序、团队只做微信、已有大量 WXML 存量代码。
二、框架横向对比
flowchart LR
A[源代码<br/>Vue/React] --> B{框架机制}
B -->|Taro 3<br/>运行时| C[DOM/BOM API<br/>注入小程序]
B -->|uni-app<br/>编译时| D[Vue模板<br/>→平台模板]
B -->|原生<br/>直写| E[WXML/WXSS]
C --> F[微信/支付宝/H5]
D --> F
E --> G[仅微信]
| 维度 | 原生 | Taro 3 + Vue 3 | uni-app |
|---|---|---|---|
| 包体增量 | 0 | +150~200 KB | +80~120 KB |
| 首屏渲染（500 项列表） | 320ms | 450ms | 380ms |
| 跨平台支持 | 仅微信 | 微信/支付宝/H5/RN | 微信/支付宝/H5/App |
| 语法风格 | WXML 专有 | Vue 3 / React | Vue 3 |
| TypeScript 支持 | 需手动配 | 官方模板内置 | 官方模板内置 |
| 电商模板生态 | 少 | 丰富（Taro UI 生态） | 丰富（uni-ui / DCloud 市场） |
| 社区活跃度（2026） | 官方文档为主 | GitHub 活跃 | DCloud 社区活跃 |
选型结论
本系列使用 Taro 3 + Vue 3 + TypeScript，原因：
- 运行时方案让 Vue 3 Composition API 完整可用，不存在编译时的语法限制
- 支持微信 + 支付宝 + H5 三端，电商覆盖面更广
- 与 NutUI（京东出品）官方适配，电商组件开箱即用
- confirmed 案例：
yanbowe/taro-vue3-pinia模板已验证 Taro 3 + Vue 3 + NutUI + Pinia 组合可用
uni-app 更适合需要同时开发 Android/iOS App 的团队，跨端兼容成本更低但包体更小。如果你的项目只需要小程序 + H5，Taro 是更好的选择。
三、UI 组件库
电商场景核心诉求：商品卡片、SKU 选择器、购物车角标、地址选择器、订单状态流程。
flowchart LR
A{框架路线} -->|Taro + Vue 3| B[NutUI<br/>@nutui/nutui-taro]
A -->|原生小程序| C[Vant Weapp<br/>@vant/weapp]
A -->|uni-app| D[TDesign Mobile<br/>tdesign-miniprogram]
B --> E[80+ 电商组件<br/>京东设计体系]
C --> F[组件丰富<br/>文档完善]
D --> G[腾讯官方<br/>原生+uni双支持]
重要坑点：NutUI 官方包 @nutui/nutui-taro 不支持 uni-app。如果你用 uni-app 路线想用 NutUI，需要安装社区扩展 nutui-uniapp（非官方维护，稳定性存疑）。
| 库 | 安装包名 | 适用框架 | 电商组件 |
|---|---|---|---|
| NutUI | @nutui/nutui-taro |
Taro | SKU、购物车、地址、订单 |
| Vant Weapp | @vant/weapp |
原生小程序 | 齐全 |
| TDesign | tdesign-miniprogram |
原生 + uni-app | 基础组件为主 |
四、状态管理
小程序电商的全局状态：购物车数量（角标）、用户登录态、收货地址、当前订单。
推荐：Pinia
- Vue 3 官方推荐替代 Vuex
- Taro 3 + Vue 3 组合中 3-0 核实可用
- DevTools 支持，Store 模块化更清晰
- 比 Zustand/MobX 对 Vue 生态更友好
uni-app 专属坑：
# HBuilder X < 4.14 必须锁定版本，否则运行报错
npm install pinia@2.0.36// main.js — Pinia 必须显式 return，否则不生效
import { createPinia } from 'pinia'
const pinia = createPinia()
export function createApp() {
const app = createSSRApp(App)
app.use(pinia)
return { app, pinia } // ← 必须 return pinia
}本系列基于 Taro，无此限制，直接安装最新版 Pinia 即可。
五、后端 / 云开发选型
flowchart LR
A[电商小程序] --> B{后端方案}
B -->|快速上线<br/>纯微信生态| C[微信云开发<br/>CloudBase]
B -->|中大型项目<br/>已有服务器| D[自建 Node/Go<br/>+ 微信支付API]
B -->|国际化<br/>非中国用户| E[Supabase]
C --> F[国内延迟 20-40ms<br/>支付模板一键]
D --> G[完全控制<br/>需自实现签名]
E --> H[国内 200ms+<br/>❌ 不推荐]
本系列选择微信云开发（CloudBase），适合：
- 独立开发者 / 小团队
- 快速验证 MVP
- 不想维护服务器和 SSL 证书
CloudBase 相对自建服务的核心优势：
- 微信支付模板：安装后自动生成完整的下单/查询/退款云函数，不用手写签名逻辑
- 免鉴权：小程序端调用云函数无需手动处理 token，微信环境自动验证
- 数据库 + 存储 + 函数一体，不需要单独配置 MySQL、OSS、API Gateway
六、微信支付集成概览
支付是电商最核心的环节，也是坑最多的地方。完整流程分三段：
sequenceDiagram
participant U as 用户（小程序）
participant CF as 云函数
participant WX as 微信支付服务器
U->>CF: 点击支付，传商品/金额
CF->>WX: wxpay_order（统一下单）
WX-->>CF: 返回 prepay_id
CF-->>U: 返回签名参数
U->>WX: wx.requestPayment(5个参数)
WX-->>U: 支付结果回调
Note over U,WX: ⚠️ 前端回调不可靠！
WX->>CF: 异步支付通知（服务端回调）
CF->>CF: wxpay_query 轮询确认
wx.requestPayment() 5 个必填参数（缺一报错）：
wx.requestPayment({
timeStamp: res.timeStamp, // 服务端返回
nonceStr: res.nonceStr, // 服务端返回
package: 'prepay_id=' + res.prepay_id, // 格式固定！
signType: 'RSA', // 仅支持 RSA
paySign: res.paySign, // 服务端签名
success: () => { /* 不可靠，仅做 UI 提示 */ },
fail: (err) => { console.error(err) }
})关键原则：
success回调触发不代表支付真正成功，必须通过后端轮询wxpay_query_order_by_out_trade_no或等待微信异步通知来确认最终状态。
七、开发工具链
| 工具 | 版本 | 用途 |
|---|---|---|
| 微信开发者工具 | 最新稳定版 | 调试预览（必装） |
| VS Code / Cursor | — | 主力代码编写 |
| Node.js | 18 LTS | Taro CLI 运行环境 |
| pnpm | 8+ | 包管理（Taro 官方推荐） |
| Taro CLI | 3.6+ | 项目脚手架 |
| Vite | 4+ | Taro 3.6+ 默认构建工具 |
Taro 3.6 开始支持 Vite 构建，热更新速度大幅提升，推荐新项目使用。
八、最终技术栈
微信小程序电商
├── 框架：Taro 3.6+ + Vue 3 + TypeScript
├── UI：NutUI（@nutui/nutui-taro）
├── 状态：Pinia
├── 构建：Vite
├── 后端：微信云开发（CloudBase）
│ ├── 数据库：云数据库（MongoDB-like）
│ ├── 存储：云存储（商品图片）
│ └── 函数：云函数（业务逻辑 + 微信支付）
├── 支付：微信支付 v3 API（通过 CloudBase 模板）
└── 工具：微信开发者工具 + VS Code + pnpm
后续每篇教程都基于这套栈展开，不再重复说明选型原因。
微信小程序电商实战 01 技术选型 ← 本文 | 02 脚手架搭建 | 03 NutUI 配置 | 04 云开发环境 | 05 商品模块 | 06 购物车与订单 | 07 微信支付 | 08 用户中心 | 09 性能优化 | 10 上线部署
实操清单
- 确认项目目标平台：仅微信 / 微信+支付宝 / 微信+H5+支付宝（影响框架选择）
- 注册微信小程序账号，获取 AppID（mp.weixin.qq.com）
- 注册微信支付商户号（个人主体可注册，需营业执照的选企业主体）
- 安装微信开发者工具（developers.weixin.qq.com/miniprogram/dev/devtools）
- 安装 Node.js 18 LTS 和 pnpm（
npm install -g pnpm） - 对比 NutUI 与 Vant Weapp 官网组件截图，确认 UI 风格符合电商定位
- 在微信云开发控制台创建环境，记录环境 ID（下一篇用）
- 阅读下一篇：02 脚手架搭建