TinyShop-UniApp 完整使用指南：从零搭建多端电商小程序
项目地址: https://gitcode.com/gh_mirrors/ti/TinyShop-UniApp TinyShop-UniApp 是一款基于 UniApp 开发的开源电商系统，支持微信小程序、支付宝小程序、百度小程序、H5 等多端适配。无论你是电商创业者还是开发者，都能通过本指南快速上手搭建自己的电商平台。
🚀 项目核心优势与价值
多端适配能力：一次开发，多端发布，大幅降低开发成本和时间投入。完整电商功能：包含商品展示、购物车、订单管理、用户中心等核心模块。开源免费：基于 Apache2 协议开源，商业友好。
📁 项目结构深度解析
核心目录功能说明
-
src/api - 接口请求模块
- basic.js - 基础接口
- login.js - 登录相关接口
- product.js - 商品接口
- userInfo.js - 用户信息接口
-
src/components - 自定义组件库
- rf-product-list/ - 商品列表组件
- rf-search-bar/ - 搜索栏组件
- rf-image/ - 图片组件
- rf-loading/ - 加载组件
-
src/pages - 业务页面模块
- index/ - 首页相关
- product/ - 商品详情页
- cart/ - 购物车页面
- order/ - 订单管理页面
-
src/config - 全局配置文件
- index.config.js - 主配置文件
- assets.config.js - 资源路径配置
- routes.config.js - 路由配置
🛠️ 环境搭建与项目启动
前置条件检查
确保你的开发环境满足以下要求：
- Node.js 版本 12.x 或以上
- 包管理器 npm 或 yarn
- 小程序开发工具（如微信开发者工具）
项目获取与安装
- 克隆项目仓库
git clone https://gitcode.com/gh_mirrors/ti/TinyShop-UniApp.git
- 安装项目依赖
cd TinyShop-UniApp
npm install
# 或使用 yarn
yarn install
多端运行指南
根据目标平台选择对应的运行命令：
| 平台 | 运行命令 | 开发工具 |
|---|---|---|
| H5 网页 | npm run dev:h5 | 浏览器 |
| 微信小程序 | npm run dev:mp-weixin | 微信开发者工具 |
| 支付宝小程序 | npm run dev:mp-alipay | 支付宝开发者工具 |
| 百度小程序 | npm run dev:mp-baidu | 百度开发者工具 |
| 头条小程序 | npm run dev:mp-toutiao | 字节跳动开发者工具 |
⚙️ 核心配置文件详解
全局配置 (index.config.js)
项目的主配置文件，包含以下关键设置：
- 应用标题 - 设置商城名称
- API基础URL - 配置后端接口地址
- 路由白名单 - 无需登录即可访问的页面
- 主题颜色配置 - 自定义商城主题色
路由配置 (routes.config.js)
定义应用的页面导航结构，包括：
- 页面路径映射
- 页面访问权限控制
- 导航守卫配置
🔧 关键功能模块说明
商品展示模块
位于 src/pages/product/ 目录，提供：
- 商品列表展示
- 商品详情页面
- 搜索筛选功能
用户中心模块
src/pages/user/ 目录包含完整的用户功能：
- 用户信息管理
- 收货地址管理
- 我的收藏列表
- 优惠券管理
订单处理模块
订单相关功能集中在 src/pages/order/：
- 订单创建流程
- 订单状态跟踪
- 退款售后处理
📦 打包与部署指南
H5 平台部署
# 生产环境打包
npm run build:h5
打包后生成 dist/build/h5 目录，可直接部署到Web服务器。
小程序平台发布
- 运行对应平台的构建命令
- 在小程序开发者工具中打开生成的项目
- 提交审核并发布
原生 App 打包
配合 HBuilderX 工具：
- 导入项目到 HBuilderX
- 配置 App 相关信息
- 云端打包或本地打包
🎯 最佳实践与优化建议
开发效率提升
- 组件复用：充分利用项目中已有的组件
- 配置驱动：通过修改配置文件快速定制功能
- 多端调试：使用条件编译适配不同平台特性
性能优化策略
- 图片懒加载配置
- 请求接口缓存优化
- 页面路由预加载
📚 进阶学习资源
- 官方文档：docs/CONFIG.md
- 更新日志：docs/UPDATE.md
- API 接口文档：api/
通过本指南，你可以快速掌握 TinyShop-UniApp 的核心功能和使用方法，搭建属于自己的电商平台。项目持续更新维护，为你的电商业务提供稳定可靠的技术支持。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
