TDesign 零售小程序模板：腾讯 TDesign 零售行业 starter 克隆与运行指南

TDesign 零售行业模版示例小程序是腾讯 TDesign 团队基于 TDesign 微信小程序组件库搭建的单店版电商小程序，涵盖首页、商品、购物车、结算、订单、售后等完整电商黄金链路，共 28 个页面，采用 mock 数据展示，可作为零售类小程序的二次开发起点。

一、项目官方信息

二、官方图片

TDesign 官方 Logo：

零售模版小程序页面总览：

三、环境要求

• 微信开发者工具；
• Node.js 与 npm（用于安装依赖）；
• 小程序基础库 >= 2.6.5；
• 工程采用 JavaScript + WXSS + ESLint 构建，门槛低。

四、部署/接入步骤

1. 克隆仓库

git clone https://github.com/Tencent/tdesign-miniprogram-starter-retail.git
cd tdesign-miniprogram-starter-retail

2. 安装依赖

npm install

3. 用微信开发者工具导入工程

打开微信开发者工具 → 导入项目 → 选择本工程目录。

4. 构建 npm

在开发者工具菜单「工具 → 构建 npm」，使 TDesign 组件库等依赖生效。

完成后即可在模拟器中看到完整的零售小程序效果。

五、使用方法

项目目录结构

|-- tdesign-miniprogram-starter
    |-- app.js
    |-- app.json
    |-- app.wxss
    |-- components   // 公共组件库
    |-- config       // 基础配置
    |-- custom-tab-bar // 自定义 tabbar
    |-- model        // mock 数据
    |-- pages
        |-- cart          // 购物车
        |-- coupon        // 优惠券
        |-- goods         // 商品
        |-- home          // 首页
        |-- order         // 订单售后
        |-- promotion-detail // 营销活动
        |-- usercenter   // 个人中心/收货地址
    |-- services     // 请求接口
    |-- style        // 公共样式与 iconfont
    |-- utils        // 工具库

涵盖业务流程

• 商品 → 购物车 → 结算 → 订单完整链路；
• 首页、商品详情、个人中心、售后流程；
• 采用 mock 数据模拟后端返回逻辑，展示完整购物场景。

新增页面

1. 在 pages 目录下创建对应页面文件夹；
2. 在 app.json 的 pages 数组中加入页面路径；
3. （可选）在 project.config.json 的 miniprogram-list 下补充页面配置。

代码风格

项目内置 eslint + prettier 做代码风格控制。

六、常见问题 FAQ

Q1：这个模板是做什么的？ 它是单店版零售电商小程序，包含 28 个完整页面，覆盖首页、商品、购物车、结算、订单、售后，用 mock 数据演示完整链路。

Q2：怎么跑起来？ 克隆仓库 → npm install → 微信开发者工具导入工程 → 菜单「工具 → 构建 npm」。

Q3：依赖哪个组件库？ 依赖腾讯 TDesign 微信小程序组件库（tdesign-miniprogram）。

Q4：最低基础库版本是多少？ 最低基础库版本为 ^2.6.5。

Q5：怎么新增页面？ 在 pages 下建目录，再在 app.json 的 pages 数组注册路径即可。

Q6：数据是真实接口吗？ 用 mock 数据模拟后端返回逻辑，接入真实业务时在 services 层替换请求接口。

七、跳转链接

• GitHub 仓库：https://github.com/Tencent/tdesign-miniprogram-starter-retail
• 组件库：https://github.com/Tencent/tdesign-miniprogram
• TDesign 小程序文档：https://tdesign.tencent.com/miniprogram/overview
• Issues 反馈：https://github.com/Tencent/tdesign-miniprogram/issues