一个基于 Taro 开发的购物小程序项目开源

项目地址：
https://gitee.com/otherside-code/quick-shop-app

一个基于 Taro 开发的购物小程序，提供便捷的在线购物和订单管理服务。

功能特点

• 🛒 首页，列表，详情，搜索，购物车管理
• 📝 订单支付发货，退款，确认
• 🏠 个人信息管理，钱包，地址管理
• ⏰ 预约送货上门时间
• 💰 优惠券系统
• 💳 微信支付

项目截图

首页

展示推荐商品、优惠券活动等

列表页

根据商品分类展示商品，加入购物车

搜索页

根据关键字搜索商品，热门商品推荐

商品页

展示商品详细信息

购物车

管理已选商品、修改数量

订单确认

选择地址、预约时间、使用优惠券

地址管理

管理收货地址、设置默认地址

个人中心

查看订单、管理个人信息

钱包

查看余额、提现

订单列表

查看订单 、取消订单、支付订单、订单确认等

退款申请

退款原因和凭证上传

发货

配送信息 快递单号，快递公司

订单评价

好评、中评、差评

技术栈

• Taro 3.x
• React
• TypeScript
• SCSS
• 微信小程序原生API

项目结构

quick-shop-app/
├── src/
│   ├── components/           # 公共组件
│   │   ├── TimePopUp/       # 时间选择弹窗组件
│   │   ├── AddressItem/     # 地址项组件
│   │   └── ServiceItem/     # 服务项组件
│   │
│   ├── pages/              # 页面文件
│   │   ├── index/          # 首页
│   │   ├── cart/           # 购物车页面
│   │   ├── orderConfirm/   # 订单确认页面
│   │   ├── orderList/      # 订单列表页面
│   │   ├── orderDetail/    # 订单详情页面
│   │   ├── addressList/    # 地址列表页面
│   │   ├── addAddress/     # 新增地址页面
│   │   └── my/             # 个人中心页面
│   │
│   ├── image/              # 图片资源
│   │   ├── common/         # 公共图片
│   │   └── icons/          # 图标资源
│   │
│   ├── api/                # API 接口
│   │   ├── order.ts        # 订单相关接口
│   │   ├── address.ts      # 地址相关接口
│   │   ├── cart.ts         # 购物车相关接口
│   │   └── user.ts         # 用户相关接口
│   │
│   ├── utils/              # 工具函数
│   │   ├── request.ts      # 请求封装
│   │   ├── storage.ts      # 存储工具
│   │   └── format.ts       # 格式化工具
│   │
│   ├── styles/             # 全局样式
│   │   ├── variables.scss  # 变量定义
│   │   └── mixins.scss     # 混入样式
│   │
│   ├── types/              # 类型定义
│   │   ├── order.d.ts      # 订单相关类型
│   │   └── user.d.ts       # 用户相关类型
│   │
│   ├── constants/          # 常量定义
│   │   ├── api.ts          # API 常量
│   │   └── config.ts       # 配置常量
│   │
│   ├── app.config.ts       # 应用配置
│   ├── app.scss            # 应用样式
│   └── app.ts              # 应用入口
│
├── config/                 # 项目配置
│   ├── dev.js             # 开发环境配置
│   └── prod.js            # 生产环境配置
│
├── scripts/               # 构建脚本
├── .eslintrc             # ESLint 配置
├── .prettierrc           # Prettier 配置
├── tsconfig.json         # TypeScript 配置
├── package.json          # 项目依赖
└── README.md             # 项目说明

开发环境要求

• Node.js >= 12
• npm >= 6
• 微信开发者工具

安装和运行

1. 克隆项目

git clone [项目地址]
cd quick-shop-app

2. 安装依赖

npm install

3. 开发模式运行

npm run dev:weapp

4. 生产环境构建

npm run build:weapp

主要功能模块

购物车

• 商品数量修改
• 商品选择
• 价格计算

订单确认

• 地址选择
• 上门时间预约
• 优惠券使用
• 订单备注
• 在线支付

地址管理

• 新增地址
• 编辑地址
• 默认地址设置

订单管理

• 订单支付
• 订单确认
• 订单列表
• 订单发货
• 订单详情
• 订单退款
• 订单评价

个人信息

• 用户信息修改
• 用户钱包管理

开发规范

• 使用 TypeScript 进行开发
• 遵循 ESLint 规范
• 组件化开发
• 统一的代码风格

注意事项

1. 支付相关
   • 需要配置正确的商户信息
   • 支付回调需要正确配置