# 基金app

**Repository Path**: Chenfangyijie_code/applets

## Basic Information

- **Project Name**: 基金app
- **Description**: 基于 uni-app + Vue 2 + uView UI 开发的金融交易类多端应用，支持 H5、微信小程序、App 三端运行
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-05
- **Last Updated**: 2026-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 路人App - 金融交易多端应用

## 项目介绍

这是一个基于 **uni-app + Vue 2 + uView UI** 开发的金融交易类多端应用，支持 H5、微信小程序、App 三端运行。主要功能包括：

- 用户注册、登录、找回密码
- 首页行情展示、商品列表
- 充值、提现功能
- 持仓明细、历史明细
- 资金流水、提现记录
- K线图表（TradingView）实时行情
- 在线客服

## 技术栈

| 技术 | 说明 |
|------|------|
| uni-app | 跨端框架，一套代码多端运行 |
| Vue 2 | 前端框架 |
| uView UI | uni-app 生态 UI 组件库 |
| SCSS | CSS 预处理器 |
| TradingView | 专业K线图表库 |
| WebSocket | 实时行情数据推送 |

## 目录结构

```
applets/
├── common/              # 公共模块
│   ├── api.js           # 网络请求封装
│   ├── utils.js         # 通用工具方法
│   └── config-check.js  # 启动配置校验
├── components/          # 公共组件
│   ├── index.vue        # 首页内容
│   ├── user.vue         # 我的页面
│   ├── position.vue     # 持仓页面
│   ├── service.vue      # 客服页面
│   ├── tabbar.vue       # 底部导航栏
│   └── wechat.vue       # 微信客服
├── pages/               # 页面目录
│   ├── index/           # 首页（Tab切换）
│   ├── login/           # 登录
│   ├── reg/             # 注册
│   ├── forget/          # 忘记密码
│   ├── money/           # 充值/提现
│   ├── order/           # 下单（K线图）
│   └── record/          # 记录
├── hybrid/html/         # TradingView K线图表
├── static/              # 静态资源
├── uview-ui/            # uView UI 组件库
├── App.vue              # 应用入口
├── main.js              # 主文件
├── manifest.json        # 应用配置
├── pages.json           # 页面路由配置
└── uni.scss             # 全局样式
```

## 部署教程（小白友好）

### 1. 环境准备

1. 下载安装 **HBuilderX**（官方IDE）：https://www.dcloud.io/hbuilderx.html
2. 安装 **Node.js**（建议 v14 以上）：https://nodejs.org

### 2. 打开项目

1. 打开 HBuilderX
2. 点击「文件」→「打开目录」→ 选择本项目文件夹
3. 等待编辑器自动识别为 uni-app 项目

### 3. 安装依赖

在项目根目录右键 →「使用命令行窗口打开」，执行：

```bash
npm install
```

### 4. 运行项目

#### H5 端运行
- 点击 HBuilderX 菜单「运行」→「运行到浏览器」→ 选择浏览器

#### 微信小程序端运行
1. 下载安装 **微信开发者工具**
2. 点击 HBuilderX 菜单「运行」→「运行到小程序模拟器」→「微信开发者工具」
3. 首次运行需在微信开发者工具中设置 → 安全设置 → 开启「服务端口」

#### App 端运行
- 点击 HBuilderX 菜单「运行」→「运行到手机或模拟器」

### 5. 打包发布

- H5：菜单「发行」→「网站-PC Web或手机H5」
- 小程序：菜单「发行」→「小程序-微信」
- App：菜单「发行」→「原生App-云打包」

## 使用教程

### 首次使用

1. 打开应用，自动跳转到登录页
2. 点击「注册」创建新账号
   - 输入手机号（11位手机号格式）
   - 输入密码并确认
   - 点击「获取」获取验证码，输入后点击「立即注册」
3. 注册成功后跳转到登录页，输入账号密码登录

### 主要功能

- **首页**：查看轮播图、可用余额、商品列表，点击商品进入K线图
- **充值**：首页点击充值按钮，选择金额或自定义金额
- **提现**：首页点击提现按钮，输入提现金额（最低100元）
- **持仓**：底部Tab切换到持仓，查看持仓明细和历史明细
- **我的**：底部Tab切换到我的，查看余额、资金流水、提现记录等

## 常见问题排错（FAQ）

### Q1：运行报错「找不到 uview-ui」
**解决**：确认 `uview-ui` 文件夹在项目根目录下，执行 `npm install` 重新安装依赖。

### Q2：登录提示「网络异常」
**解决**：
1. 检查手机/电脑是否联网
2. 检查后端接口地址是否正确（`common/api.js` 中的 `baseUrl`）
3. 如果是小程序，需在微信开发者工具中关闭域名校验（详情 → 本地设置 → 不校验合法域名）

### Q3：K线图不显示
**解决**：
1. 确认 `hybrid/html/` 目录下文件完整
2. 检查 WebSocket 连接是否正常（火币行情接口）
3. 查看浏览器控制台是否有报错

### Q4：微信小程序无法运行
**解决**：
1. 确认已安装微信开发者工具
2. 在 `manifest.json` 中填写正确的微信小程序 `appid`
3. 微信开发者工具 → 设置 → 安全设置 → 开启服务端口

### Q5：App 端白屏
**解决**：
1. 清除应用缓存后重新打开
2. 确认 `manifest.json` 中 App 配置正确
3. 检查 `hybrid/html` 资源是否完整打包

### Q6：验证码收不到
**解决**：
1. 确认手机号输入正确（11位、1开头）
2. 等待60秒倒计时结束后重新获取
3. 联系后端确认短信服务是否正常

## 配置说明

### 后端接口地址
在 `common/api.js` 中修改 `baseUrl`：
```javascript
const baseUrl = 'http://your-domain.com/app/'
```

### 微信小程序 AppID
在 `manifest.json` → `mp-weixin` → `appid` 中配置。

### WebSocket 行情地址
在 `hybrid/html/websocket.js` 中修改 WebSocket 地址。

## 参与贡献

1. Fork 本仓库
2. 新建功能分支
3. 提交代码
4. 新建 Pull Request

## 许可证

详见 [LICENSE](LICENSE) 文件。