xcy960815/study-uniapp repository overview
项目简介
项目说明
Study UniApp 学习项目，基于 uni-app 框架开发的跨平台电商应用。
当前仓库是 uni-app 开发的学习项目，通过条件编译能兼容 H5 端、微信小程序端 和 App 端。
在线体验
| 体验小程序端 | 体验 H5 端 | 体验 App 端(安卓) |
 |  |  |
资料说明
📀 视频学习
https://www.bilibili.com/video/BV1Bp4y1379L/
📗 接口文档
https://www.apifox.cn/apidoc/shared-0e6ee326-d646-41bd-9214-29dbf47648fa/
✏️ 在线笔记
https://megasu.atomgit.net/uni-app-shop-note/
📦 项目源码
https://gitcode.com/Megasu/study-uniapp-vue3-ts/
项目架构
项目演示
在线演示
项目为学习演示项目，支持 H5、微信小程序、App 等多端运行。
项目截图
 |  |  |  |  |  |
 |  |  |  |  |  |
小兔鲜儿-微信小程序
项目简介
微信小程序端：该项目包含了从首页浏览商品，到商品详情，微信登录，加入购物车，提交订单，微信支付，订单管理等功能。
技术栈
项目模块
- 项目起步
- 首页模块
- 推荐模块
- 分类模块
- 详情模块
- 登录模块
- 用户模块
- 地址模块
- SKU 模块
- 购物车模块
- 订单模块
- 项目打包
开发环境
- Windows 版本： Windows 11 家庭中文版 / MacOS 15.0
- 开发工具： VS Code 、 HbuilderX 、 微信开发者工具
- Node 版本： v16.15.0 / v22.15.0
- pnpm 版本：v8.6.10 / v9.15.3
运行程序
- 安装依赖
# npm
npm i --registry=https://registry.npmmirror.com
# pnpm
pnpm i --registry=https://registry.npmmirror.com
- 运行程序
# 微信小程序端
npm run dev:mp-weixin
# H5端
npm run dev:h5
# App端
需 HbuilderX 工具，运行 - 运行到手机或模拟器
- 微信开发者工具导入
/dist/dev/mp-weixin目录
工程结构解析
├── .husky # Git Hooks
├── .vscode # VS Code 插件 + 设置
├── dist # 打包文件夹（可删除重新打包）
├── src # 源代码
│ ├── components # 全局组件
│ ├── composables # 组合式函数
│ ├── pages # 主包页面
│ ├── index # 首页
│ ├── category # 分类页
│ ├── cart # 购物车
│ ├── my # 我的
│ ├── goods # 商品详情
│ └── hot # 热门推荐
│ └── login # 登录页
│ ├── pagesMember # 分包页面(用户模块)
│ ├── address # 地址管理
│ ├── address-form # 地址表单
│ ├── profile # 用户信息
│ └── settings # 用户设置
│ ├── pagesOrder # 分包页面(订单模块)
│ ├── create # 创建订单
│ ├── detail # 订单详情
│ ├── list # 订单列表
│ └── payment # 支付结果
│ ├── services # 所有请求
│ ├── static # 存放应用引用的本地静态资源的目录
│ ├── images # 普通图片
│ └── tabs # tabBar 图片
│ ├── stores # 全局 pinia store
│ ├── modules # 模块
│ └── index.ts # store 入口
│ ├── styles # 全局样式
│ └── fonts.scss # 字体图标
│ ├── types # 类型声明文件
│ ├── utils # 全局方法
│ ├── App.vue # 入口页面
│ ├── main.ts # Vue初始化入口文件
│ ├── pages.json # 配置页面路由等页面类信息
│ ├── manifest.json # 配置appid等打包信息
│ └── uni.scss # uni-app 内置的常用样式变量
├── .eslintrc.cjs # eslint 配置
├── .prettierrc.json # prettier 配置
├── .gitignore # git 忽略文件
├── index.html # H5 端首页
├── package.json # package.json 依赖
├── tsconfig.json # typescript 配置
└── vite.config.ts # vite 配置
Docker 部署
本项目支持 Docker 部署，提供了 Dockerfile 和 study-uniapp-compose.yml 文件。
1. 构建镜像
docker build -t study-uniapp .
2. 启动服务
使用 Docker Compose 启动服务：
docker-compose -p study-uniapp -f study-uniapp-compose.yml up -d
或者使用 Docker 命令直接运行：
docker run -d -p 80:80 --name study-uniapp study-uniapp
3. 访问应用
启动成功后，访问 http://localhost 即可查看应用。
4. 自动化部署
本项目配置了 GitHub Actions，当推送 v* 标签时，会自动构建并推送到 Docker Hub。
git tag v1.0.0
git push origin v1.0.0
Tag summary
Content type
Image
Digest
sha256:45e2bf53a…
Size
19.9 MB
Last updated
9 months ago
docker pull xcy960815/study-uniapp