# whs-mp

**Repository Path**: gzyy/whs-mp

## Basic Information

- **Project Name**: whs-mp
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-07
- **Last Updated**: 2026-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 小威进度条 - 微信小程序

基于 uni-app 框架开发的"小威进度条"金融服务小程序，为用户提供贷款审批进度查询、实名认证等功能。

## 运行方式（二选一）

### 方式一：命令行运行（推荐）

```bash
# 1. 安装依赖
npm install

# 2. 运行到微信小程序模拟器
npm run dev:mp-weixin

# 3. 在微信开发者工具中导入项目
# 选择 dist/dev/mp-weixin 目录
```

### 方式二：HBuilderX 运行

```bash
# 1. 安装依赖
npm install

# 2. HBuilderX 导入项目
# 文件 -> 导入 -> 从本地目录导入 -> 选择本项目

# 3. 运行
# 点击工具栏 "运行" -> "运行到小程序模拟器" -> "微信开发者工具"
```

### 方式三：微信开发者工具直接运行

```bash
# 1. 先执行命令行编译
npm install
npm run dev:mp-weixin

# 2. 打开微信开发者工具
# 点击 "+" -> 导入项目
# 项目目录选择：dist/dev/mp-weixin
# AppID 选择：测试号 或填写你的 AppID
```

## 项目结构

```
whs/                          # 项目根目录
├── src/                      # 源码目录
│   ├── common/              # 公共样式
│   │   └── style/
│   │       └── common.scss  # 全局公共样式
│   ├── components/          # 公共组件
│   ├── pages/               # 主包页面
│   │   ├── login/          # 登录页
│   │   ├── index/          # 首页
│   │   ├── message/        # 消息中心
│   │   ├── center/         # 个人中心
│   │   └── loan/           # 贷款详情
│   ├── subpackage-products/ # 产品分包
│   │   └── pages/
│   │       ├── products/   # 产品列表
│   │       └── detail/     # 轮播详情
│   ├── subpackage-user/     # 用户分包
│   │   └── pages/
│   │       ├── auth/       # 实名认证
│   │       ├── center/     # 编辑资料、客服
│   │       ├── feedback/   # 意见反馈
│   │       ├── help/       # 帮助中心
│   │       ├── loan/       # 历史申请、还款
│   │       └── setting/    # 设置
│   ├── subpackage-about/    # 关于分包
│   │   └── pages/
│   │       └── about/      # 关于我们、协议、隐私政策
│   ├── static/              # 静态资源
│   │   ├── images/         # 图片
│   │   ├── icons/          # 图标
│   │   └── css/            # 字体图标
│   ├── api/                 # API 接口
│   │   └── index.js        # 接口定义
│   ├── utils/               # 工具函数
│   │   ├── request.js      # 请求封装
│   │   └── index.js        # 常用工具
│   ├── config/              # 配置文件
│   │   └── env.js          # 环境配置
│   ├── App.vue              # 应用入口组件
│   ├── main.js              # 主入口文件
│   ├── manifest.json        # 应用配置文件（微信小程序配置）
│   └── pages.json           # 页面路由配置
├── dist/                    # 编译输出目录（自动生成）
├── package.json             # 项目依赖
├── vite.config.js           # Vite 构建配置
├── tsconfig.json            # TypeScript 配置
├── uni.scss                 # uni-app 全局样式变量
└── README.md                # 项目说明
```

## 分包策略

为满足微信小程序 **2MB 主包限制**，采用以下分包策略：

| 分包名称 | 大小估算 | 包含页面 |
|---------|---------|---------|
| 主包 | ~800KB | 首页、登录、消息、个人中心、贷款详情 |
| subpackage-products | ~600KB | 产品列表、轮播详情 |
| subpackage-user | ~700KB | 实名认证、设置、帮助、反馈、还款 |
| subpackage-about | ~400KB | 关于我们、协议、隐私政策 |

### 预加载配置

在 `pages.json` 中配置了分包预加载：
- 首页预加载 `subpackage-products`
- 个人中心预加载 `subpackage-user`

## 技术栈

- **框架**: uni-app (Vue 3)
- **UI**: 自定义组件 + SCSS
- **状态管理**: Vue 响应式数据 + localStorage
- **网络请求**: uni.request 封装
- **构建工具**: Vite

## 环境配置

在 `config/env.js` 中配置不同环境：

```javascript
// 开发环境
baseURL: 'http://localhost:3000/api'

// 生产环境  
baseURL: 'https://api.xiaowei.com/api'
```

## 打包上传方式

### 方式一：命令行构建

```bash
# 构建生产版本
npm run build:mp-weixin

# 构建后的代码在 dist/build/mp-weixin 目录
# 用微信开发者工具导入后点击 "上传"
```

### 方式二：HBuilderX 发行

```
菜单栏 → 发行 → 小程序-微信 → 填写 AppID → 发行
```

### 方式三：微信开发者工具

```
先执行 npm run build:mp-weixin
导入 dist/build/mp-weixin 目录
点击上传
```

## API 接口对接

### 当前状态

所有页面已预留 API 接口调用位置（注释形式），当前使用 Mock 数据可正常运行。

### 对接步骤

1. 打开 `api/index.js`，查看已定义的接口列表
2. 在每个页面中取消 API import 注释
3. 取消 API 调用示例注释
4. 删除原有 Mock 数据代码
5. 根据后端接口调整参数

**示例**（登录页）：
```javascript
// 1. 取消 import 注释
import { sendSmsCode, login } from '@/api/index'

// 2. 调用真实接口
async sendCode() {
  const res = await sendSmsCode({
    phone: this.phone,
    captchaCode: this.captchaCode
  })
}
```

## 重要提示

1. **修改 AppID**：打开 `src/manifest.json`，将 `mp-weixin.appid` 替换为你的小程序 AppID
2. **首次运行前**：务必执行 `npm install` 安装依赖
3. **微信开发者工具导入路径**：
   - 开发模式：`dist/dev/mp-weixin`
   - 生产模式：`dist/build/mp-weixin`

## 已完成功能

- [x] 登录页（手机号+验证码，图形验证码防刷）
- [x] 首页（轮播广告、8节点之字形进度）
- [x] 个人认证（姓名、手机号、身份证、证件上传）
- [x] 企业认证（企业信息、法人信息、营业执照上传）
- [x] 消息中心（贷款进度、系统通知、还款提醒）
- [x] 个人中心（用户信息、功能菜单）
- [x] 贷款详情（贷款信息、审批进度、业务经理）
- [x] 历史申请（申请记录列表）
- [x] 我的还款（还款计划、还款记录）
- [x] 设置（账户安全、通知设置、清除缓存）
- [x] 帮助中心（常见问题、联系客服）
- [x] 意见反馈（问题反馈、图片上传）
- [x] 关于我们（品牌信息、隐私政策、用户协议）
- [x] 产品详情（经营贷、理财通、信用卡三个产品页）

## 项目大小估算

| 包名 | 估算大小 | 限制 |
|------|---------|------|
| 主包 | ~800KB | < 2MB ✅ |
| 产品分包 | ~600KB | < 2MB ✅ |
| 用户分包 | ~700KB | < 2MB ✅ |
| 关于分包 | ~400KB | < 2MB ✅ |
| **总计** | ~2.5MB | < 20MB ✅ |

## 许可证

MIT License