# hanggold-shop-uniapp **Repository Path**: hanggold/hanggold-shop-uniapp ## Basic Information - **Project Name**: hanggold-shop-uniapp - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-08-28 - **Last Updated**: 2025-11-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README
# 🛍️ hanggold-shop-uniapp **一个基于 uni-app 的多端商城前端项目** [![uni-app](https://img.shields.io/badge/uni--app-2.0+-green.svg)](https://uniapp.dcloud.io/) [![Vue](https://img.shields.io/badge/Vue-3.x-brightgreen.svg)](https://vuejs.org/) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) 一套代码，多端运行：H5、微信小程序、支付宝小程序、字节跳动小程序、App [在线演示](#-在线演示) • [快速开始](#-快速开始) • [功能特性](#-功能特性) • [文档](#-目录结构)
--- ## 📖 项目简介 `hanggold-shop-uniapp` 是一个功能完善的多端商城前端解决方案，基于 **uni-app** 框架开发，支持一套代码同时构建 **H5**、各类**小程序**（微信/支付宝/字节等）与 **App**（uni-app 原生打包）。 ### ✨ 核心优势 - 🚀 **一次开发，多端运行** - 基于 uni-app 跨平台框架 - 🎨 **组件化设计** - 丰富的可复用 UI 组件和业务模块 - ⚙️ **高度可配置** - 统一的配置管理，轻松切换环境 - 📦 **开箱即用** - 完善的电商业务能力，快速上手 - 🔧 **易于扩展** - 清晰的代码结构，便于二次开发 --- ## 🌐 在线演示 ### H5 端演示 👉 **[点击访问 H5 演示地址](https://h5.hanggold.com/#/)** > 💡 **提示**：如果想查看微信小程序的展示样式，请在留言中附上微信账号，我们会定期加入权限展示。 --- ## 📸 主要功能预览
| 首页 | 商品分类 | 登录 | |:---:|:---:|:---:| | ![首页](image/index.png) | ![商品分类](image/goods_catelog.png) | ![登录](image/login.png) |
--- ## ✨ 功能特性 ### 🎯 核心功能 - ✅ **多端一键构建** - 基于 uni-app，适配 H5/各小程序/App - ✅ **电商业务完善** - 商品、购物车、下单、支付、订单、售后、优惠券、拼团/秒杀等常见电商能力（以实际接口为准） - ✅ **组件化与模块化** - `shop/components` 提供大量可复用 UI 模块与业务组件 - ✅ **可配置化** - `shop/config/index.js` 统一管理接口域名、环境变量、主题/层级等配置 - ✅ **请求封装** - `shop/request/index.js` 封装请求、拦截器、错误处理 - ✅ **状态管理** - `shop/store` 管理应用全局状态（购物车、用户、应用配置等） - ✅ **路由与页面结构** - `pages` 下按业务域划分，清晰可维护 --- ## 🛠️ 技术栈 | 技术 | 说明 | |:---:|:---| | **uni-app** | 基于 Vue 的跨平台应用开发框架 | | **Vue** | 渐进式 JavaScript 框架 | | **Sass/SCSS** | CSS 预处理器，主题、工具、样式模块化 | | **Vuex / Pinia** | 状态管理（以项目当前实现为准） | | **自定义组件库** | 位于 `shop/components` 与 `shop/ui` 的业务组件 | ## 📁 目录结构 ``` hanggold-shop-uniapp/ ├── App.vue # 应用入口组件 ├── main.js # 应用入口文件 ├── pages/ # 📄 业务页面（首页、分类、商品、订单、支付、活动等） ├── shop/ # 🏪 核心业务模块 │ ├── api/ # 🔌 业务 API 定义 │ ├── components/ # 🧩 业务组件（卡片、弹窗、选择器等） │ ├── config/ # ⚙️ 全局配置（接口域名、zIndex 等） │ ├── helper/ # 🛠️ 工具与辅助方法 │ ├── hooks/ # 🎣 组合式/复用逻辑（useApp、useGoods 等） │ ├── libs/ # 📚 第三方能力封装（支付、分享、权限等） │ ├── platform/ # 🔄 平台相关适配（支付、分享 Provider 等） │ ├── request/ # 🌐 请求封装与拦截器 │ ├── router/ # 🧭 路由辅助（如导航工具） │ ├── scss/ # 🎨 全局样式、主题、图标 │ ├── store/ # 📦 全局状态管理 │ ├── ui/ # 🎨 UI 基础组件（倒计时、图片、导航条等） │ ├── url/ # 🔗 链接常量与拼接 │ └── validate/ # ✅ 表单/字段校验 ├── static/ # 📦 静态资源 ├── uni_modules/ # 📦 uni 官方与第三方插件 └── index.html # 🌐 H5 入口（仅 H5 平台） ``` ## 🚀 快速开始 ### 📋 环境准备 #### 1. 安装开发工具 推荐使用 **HBuilderX**（官方 IDE，开箱即用） - 📥 **下载地址**：[https://www.dcloud.io/hbuilderx.html](https://www.dcloud.io/hbuilderx.html) - 💡 **说明**：本项目以 HBuilderX 为主要开发与构建工具，推荐使用 HBuilderX 进行运行与打包 #### 2. 安装依赖 为避免部分依赖的 peerDependencies 冲突，建议使用以下命令安装依赖： ```bash npm install --legacy-peer-deps ``` ### ⚙️ 接口与环境配置 #### 配置接口域名 统一在 `shop/config/index.js` 配置接口域名、环境开关、主题等： ```js // shop/config/index.js（示例，实际请以仓库代码为准） export default { baseURL: 'https://your-api.example.com', // ... 其他配置 }; ``` #### 相关配置说明 - **请求封装**：`shop/request/index.js`（拦截器、错误码处理、Token 注入等） - **平台支付/分享适配**：`shop/platform/` 与 `shop/libs/` 下的适配与 SDK 封装 > ⚠️ **重要提示**：请确保后端服务 `hanggold-management` 正常启动并可被前端访问。 ### 🏃 本地运行 #### 使用 HBuilderX（推荐） 1. 使用 HBuilderX 打开项目根目录 2. 选择运行到目标平台： - 🌐 **H5** - 浏览器运行 - 💬 **微信小程序** - 微信开发者工具 - 💰 **支付宝小程序** - 支付宝小程序 IDE - 📱 **App** - App 模拟器或真机 > 💡 **真机调试**：如需真机调试，请根据目标平台官方文档进行配置（如微信开发者工具、支付宝小程序 IDE 等）。 ## 📦 打包与发布 ### 使用 HBuilderX 打包 | 平台 | 打包步骤 | 说明 | |:---:|:---|:---| | 🌐 **H5** | HBuilderX 菜单「发行」→「网站-H5-移动端」 | 生成打包产物（通常在 `unpackage/dist/build/h5`） | | 💬 **微信小程序** | HBuilderX「发行」→「微信小程序」 | 用微信开发者工具导入生成目录，预览/上传发布 | | 💰 **支付宝小程序** | HBuilderX「发行」→「支付宝小程序」 | 使用支付宝小程序 IDE 导入并发布 | | 🎵 **字节/抖音小程序** | HBuilderX「发行」→「字节跳动小程序」 | 使用字节小程序开发者工具导入并发布 | | 📱 **App** | HBuilderX「发行」→「原生App-云打包」（或本地打包） | 完成签名与上架流程 | --- ## 🤝 与后端/后台的协作 ### 相关项目 - 🔌 **接口服务**：`hanggold-management`（Gitee 地址见顶部链接） - 🖥️ **运营后台**：`hanggold-management-web`，用于配置商品、活动、订单管理等运营动作 ### 开发建议 建议在开发环境中约定接口域名（如 `dev`/`staging`/`prod`），并在 `shop/config/index.js` 中进行区分。 --- ## 📝 代码规范与提交 ### 代码规范 - ✅ 命名统一、模块清晰、组件职责单一 - ✅ 提交信息建议遵循约定式提交（如 `feat`、`fix`、`refactor`、`docs` 等） - ✅ 样式遵循 SCSS 模块化，公共变量/混入位于 `shop/scss` ## ❓ 常见问题（FAQ）
Q：本地调试接口 404 或跨域？ **A：** - 确认后端 `hanggold-management` 已启动 - 本地 H5 可能存在跨域问题，可通过代理或后端配置 CORS - 小程序端走小程序域名白名单与合法域名配置
Q：小程序端无法支付/分享？ **A：** - 检查 `shop/platform/` 与 `shop/libs/` 的平台适配是否启用 - 在对应小程序后台完成支付、分享能力的申请与开通
Q：样式覆盖/主题设置在哪？ **A：** 主题、图标、工具样式位于 `shop/scss` 与其 `theme/`、`icon/` 等子目录，可按需扩展。
Q：接口域名切换在哪？ **A：** `shop/config/index.js`
--- ## 🤝 贡献指南 欢迎提交 Issue 与 PR！我们非常欢迎社区贡献。 ### 贡献流程 1. 🍴 Fork 本仓库 2. 🌿 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 💾 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 📤 推送到分支 (`git push origin feature/AmazingFeature`) 5. 🔀 开启 Pull Request ### 贡献规范 - ✅ 新功能请先讨论达成一致再提交实现 - ✅ 保持代码风格与目录结构一致 - ✅ 附带必要的说明与使用文档更新 --- ## 📄 许可证 本项目沿用上游与依赖项目的开源协议。若未在仓库根目录附带 LICENSE，请在使用前确认合规性与授权条款。 --- ## 🙏 致谢 感谢以下项目与服务的支持： - 🔌 **后端接口服务**：[hanggold-management](https://gitee.com)（Gitee） - 🖥️ **管理后台前端**：[hanggold-management-web](https://gitee.com)（Gitee） - 📚 **参考项目**：[sheepjs/shopro-uniapp](https://gitee.com)（Gitee） --- ## 📞 联系与支持 ### 获取帮助 - 📖 如在集成或二开中遇到问题，请先参阅本文档与注释 - 🐛 若仍无法解决，可在对应 Gitee 仓库提交 Issue 反馈 - 💼 商务/定制可通过企业支持渠道联系 ---
**如果这个项目对你有帮助，请给一个 ⭐ Star！** Made with ❤️ by hanggold team