# hyundai-miniprogram

**Repository Path**: sunlli/hyundai-miniprogram

## Basic Information

- **Project Name**: hyundai-miniprogram
- **Description**: vue3 uniapp best-uniapp pinia 微信小程序

- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-10
- **Last Updated**: 2025-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Hyundai-miniprogram

这是一个基于 [unibest](https://unibest.tech/) 框架搭建的项目。

## 开发环境
``` bash
Node.js - >=v20 (当前 v22.13.0)
pnpm - >=9+ (当前 10.11.0)
VSCode
HBuilderX - APP 的运行和发布还是离不开它
```

## 快速开始

```bash
pnpm install

# 开发模式
pnpm dev:h5        # H5 开发
pnpm dev:mp        # 微信小程序开发
pnpm dev:app       # App 开发

# 构建打包
pnpm build:h5      # H5 打包
pnpm build:mp      # 微信小程序打包
pnpm build:app     # App 打包
```

## 微信小程序开发环境配置
1. 下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2. pnpm dev:mp
3. 用微信开发者工具也导入 dist/dev/mp-weixin

---

## 📁 项目结构

### 根目录文件

```
/
├── package.json           # 项目配置和脚本命令
├── pages.config.ts        # 页面路由配置
├── manifest.config.ts     # 应用清单配置（多平台配置）
├── vite.config.ts         # Vite 构建配置
├── uno.config.ts          # UnoCSS 样式配置
├── tsconfig.json          # TypeScript 配置
├── eslint.config.mjs      # 代码规范配置
└── index.html             # H5 入口文件
```

### 核心目录 `/src`

#### 📱 页面模块

- **`/src/pages/`** - 主包页面
  - `index/` - 首页模块

#### 🎨 UI 组件

- **`/src/components/`** - 全局公共组件
- **`/src/layouts/`** - 页面布局组件 参考: https://unibest.tech/base/3-plugin#vite-plugin-uni-layouts
- **`/src/tabbar/`** - 自定义底部导航栏
  - `config.ts` - tabbar 配置（支持原生/自定义多种模式）
  - `index.vue` - 自定义 tabbar 组件
  - `store.ts` - tabbar 状态管理

#### 🔧 核心功能

- **`/src/http/`** - 网络请求封装
  - `http.ts` - 基础请求方法封装
  - `interceptor.ts` - 请求拦截器
  - `alova.ts` - Alova 请求库配置
  - `vue-query.ts` - Vue Query 配置

- **`/src/api/`** - API 接口定义
  - `login.ts` - 登录相关接口
  - `foo*.ts` - 示例接口（展示不同请求库用法）

- **`/src/service/`** - 业务服务层
  - 包含 OpenAPI 自动生成的接口服务
  - 支持 Vue Query 和普通调用两种方式

#### 🗂️ 状态管理

- **`/src/store/`** - Pinia 状态管理
  - `index.ts` - store 配置和导出
  - `user.ts` - 用户信息
  - `token.ts` - token 管理
  - `theme.ts` - 主题配置

#### 🛣️ 路由系统

- **`/src/router/`** - 路由配置
  - `config.ts` - 路由策略配置（登录拦截等）
  - `interceptor.ts` - 路由拦截器

#### 🛠️ 工具函数

- **`/src/utils/`** - 工具函数库
  - `platform.ts` - 平台判断
  - `systemInfo.ts` - 系统信息
  - `uploadFile.ts` - 文件上传
  - `updateManager.wx.ts` - 微信小程序更新管理

- **`/src/hooks/`** - 自定义 Hooks
  - `useRequest.ts` - 请求 Hook
  - `useUpload.ts` - 上传 Hook

#### 📦 静态资源

- **`/src/static/`** - 静态资源文件
  - `images/` - 图片资源
  - `tabbar/` - tabbar 图标
  - `app/icons/` - 应用图标（多尺寸）

- **`/src/style/`** - 全局样式
  - `index.scss` - 全局样式入口
  - `iconfont.css` - 图标字体

#### 🔌 插件模块

- **`/src/uni_modules/`** - uni-app 插件
  - `uni-icons/` - 图标组件
  - `uni-scss/` - SCSS 工具库

### 辅助目录

- **`/scripts/`** - 构建脚本
  - `create-base-files.js` - 基础文件生成
  - `postupgrade.js` - 升级后处理
  - `window-path-loader.js` - Windows 路径处理

- **`/codes/`** - 代码片段参考

- **`/.husky/`** - Git Hooks 配置

- **`/.vscode/`** - VSCode 编辑器配置

---

### Git 正确提交的格式
- feat: 新功能
- fix: 修复bug(eg: `fix: resolve some issue`)
- docs: 文档更新
- style: 代码格式化
- refactor: 重构代码
- test: 添加测试
- chore: 构建过程或辅助工具的变动

---
### 开发参考网站

- 韩国网站: https://www.hyundai.co.kr/uxstudio/main
- UniAPP: https://uniapp.dcloud.net.cn/
- Unibest: https://unibest.tech/
#### Unibest常见问题:
- https://unibest.tech/base/14-faq
- https://unibest.tech/base/15-faq

---

## 用户登录一般流程: 
> * vue 用户登录: src\pages\demo\index.vue
> * server 是用 node.js实现, 参考文件夹 server-nodejs-demo下代码.
> * 注意: 个人开发账号只能获取用户头像和昵称, ~~手机号不允许~~.
> * 手机号必须是企业认证账号.

```mermaid
flowchart TD
  A[用户进入页面] --> B{本地是否有 token?}
  B -- 有 --> C[调用 /user/profile 获取用户信息]
  C --> D{返回是否成功?}
  D -- 成功 --> E[设置 isLogin=true, 显示资料编辑界面]
  D -- 失败或401 --> F[清除 token, 设置 isLogin=false, 显示登录按钮]
  B -- 无 --> F

  E --> G{用户是否修改头像?}
  G -- 是 --> H[选择头像 -> 调用 /upload 上传]
  H --> I[后端自动更新 avatar_url]
  G -- 否 --> J[保留原头像]

  E --> K{用户是否修改昵称?}
  K -- 是 --> L[点击保存 -> 调用 /user/update 更新 nickname]
  K -- 否 --> M[保留原昵称]

  F --> N[用户点击登录按钮]
  N --> O[调用 wx.login 获取 code]
  O --> P[调用 /login 获取 token]
  P --> Q{是否成功?}
  Q -- 成功 --> R[保存 token -> 重新调用 /user/profile]
  Q -- 失败 --> S[提示登录失败]

  style A fill:#f9f,stroke:#333,stroke-width:1px
  style E fill:#bbf,stroke:#333,stroke-width:1px
  style F fill:#fbb,stroke:#333,stroke-width:1px

```