# 开源一个贵金属投资管理小程序：完整的前端实现
> 一个基于微信小程序原生框架开发的贵金属投资管理工具，提供实时行情查询、资产管理、价格换算等实用功能。
## 📱 项目简介
这是一个功能完整的贵金属投资管理微信小程序前端项目，采用深色主题设计，提供直观的用户体验。项目实现了从设计稿到完整产品的全流程开发，包含实时行情展示、个人资产管理、价格换算工具等核心功能。
测试demo可以在微信搜索小程序: 小钱记忆通
GitHub 地址: [https://github.com/jiazhizhong/bullion-premium-miniprogram](https://github.com/jiazhizhong/bullion-premium-miniprogram)
Gitee 地址：[https://gitee.com/recallg/bullion-premium-miniprogram](https://gitee.com/recallg/bullion-premium-miniprogram)
## ✨ 核心功能
### 1. 实时行情展示
- 实时显示贵金属价格（支持图标展示，避免敏感词汇）
- 价格走势图表（支持日/周/月切换）
- 涨跌幅显示（红涨绿跌）
- 自动刷新机制
### 2. 资产管理
- 资产添加、编辑、删除
- 按日期、渠道筛选
- 资产统计（持仓数量、价值、均价、盈亏）
- 支持分类管理（通过图标区分）
### 3. 价格换算工具
- 国际价格转人民币
- 支持实时汇率
- 自动计算和格式化
### 4. 溢价计算器
- 自动/手动基准价格
- 溢价金额、溢价率计算
- 溢价等级评估（正常/偏高/高溢价）
### 5. 用户系统
- 微信登录集成
- JWT Token 认证
- 自动登录和 Token 刷新
- 退出登录数据清理
## 🎨 设计特色
### 深色主题
- 背景色#1A1A1C（深黑）
- 卡片色#242426（深灰）
- 强调色#C9A962（金色）
- 完整的颜色系统设计
### 响应式设计
- 使用 rpx 单位适配不同屏幕
- 支持安全区域适配
- 下拉刷新功能
- 流畅的动画效果
### 用户体验优化
- 图标化展示（避免敏感词汇）
- 智能登录检查
- 友好的错误提示
- 数据缓存机制
## 🛠 技术栈
- 框架: 微信小程序原生框架
- 语言: JavaScript (ES6+)
- 样式: WXSS
- 数据格式化: WXS
- 图表绘制: Canvas API
- 网络请求: wx.request
- 状态管理: 全局 App 数据 + 本地存储
## 📁 项目结构
```
miniprogram/
├── app.js # 全局逻辑和状态管理
├── app.json # 全局配置（TabBar、页面路由等）
├── app.wxss # 全局样式
├── pages/ # 页面目录
│ ├── index/ # 首页（实时行情、热门产品）
│ ├── market/ # 行情页（价格走势图）
│ ├── assets/ # 资产页
│ │ ├── assets.js # 资产首页（统计展示）
│ │ ├── gold-list/ # 资产列表页
│ │ ├── silver-list/# 资产列表页
│ │ └── add-asset/ # 添加/编辑资产页
│ ├── profile/ # 我的页（用户中心）
│ ├── convert/ # 价格换算页
│ └── premium/ # 溢价计算页
├── utils/ # 工具函数
│ ├── api.js # API 请求封装（含登录检查）
│ ├── calculator.js # 计算工具
│ └── chart.js # 图表绘制工具
└── images/ # 图片资源
```
## 🚀 快速开始
### 1. 克隆项目
```bash
git clone https://github.com/jiazhizhong/bullion-premium-miniprogram.git
cd bullion-premium-miniprogram
```
### 2. 配置小程序
1. 使用微信开发者工具打开项目
2. 在 project.config.json 中配置你的 AppID
3. 修改 utils/api.js 中的 BASE_URL 为你的后端 API 地址
```javascript
// utils/api.js
const BASE_URL = 'https://your-api-domain.com/api';
```
### 3. 配置后端服务
本项目需要配合后端 API 使用，后端项目地址：
- [后端服务](https://github.com/jiazhizhong/bullion-premium-server)
后端需要提供以下接口：
- 微信登录接口
- 实时行情接口
- 资产管理接口（增删改查）
- 汇率接口
- 价格换算接口
- 溢价计算接口
### 4. 运行项目
1. 在微信开发者工具中点击"编译"
2. 在模拟器或真机上预览
## 🔑 核心特性详解
### 1. 登录认证机制
项目实现了完整的 JWT Token 认证机制：
```javascript
// 自动登录检查
if (!api.checkLoginStatus()) {
api.promptLogin();
return;
}
```
- 自动检测登录状态
- Token 失效自动刷新
- 退出登录时清空所有缓存数据
### 2. 数据缓存策略
- 行情数据：实时从 API 获取，支持缓存
- 资产数据：本地存储 + 云端同步
- 汇率数据：定时更新，本地缓存
### 3. 图表绘制
使用 Canvas API 实现价格走势图：
```javascript
// 支持单线和双线图表
drawPriceChart(canvasId, data, options)
drawDualPriceChart(canvasId, goldData, silverData, options)
```
### 4. 响应式布局
所有尺寸使用 rpx 单位，自动适配不同屏幕：
```css
.price-card {
padding: 28rpx;
border-radius: 28rpx;
}
```
## 📊 功能演示
### 首页
- 实时行情卡片展示
- 热门产品列表（可展开查看资产）
- 支持搜索和筛选
### 行情页
- 实时价格走势图
- 支持切换查看不同数据
- 历史数据展示
### 资产页
- 资产统计卡片
- 分类展示（通过图标区分）
- 快速添加资产入口
### 工具页
- 价格换算工具
- 溢价计算器
- 支持自动获取基准价格
## 🔒 安全特性
1. 登录验证: 所有资产相关接口都需要 JWT Token
2. 数据隔离: 用户只能访问自己的资产数据
3. Token 管理: 自动处理 Token 过期和刷新
4. 数据清理: 退出登录时清空所有敏感数据
## 📝 开发规范
### 代码风格
- 使用 ES6+ 语法
- 统一的命名规范
- 完善的错误处理
- 详细的代码注释
### 文件组织
- 按功能模块划分页面
- 工具函数统一管理
- 样式文件与页面文件对应
### 最佳实践
- 使用 rpx 适配不同屏幕
- 合理使用本地存储
- 优化网络请求
- 友好的用户提示
## 🤝 贡献指南
欢迎提交 Issue 和 Pull Request！
### 代码规范
- 遵循项目现有的代码风格
- 添加必要的注释
- 确保代码通过测试
- 更新相关文档
## 📮 联系方式
- Issues: [GitHub Issues](https://github.com/jiazhizhong/bullion-premium-miniprogram/issues)
---
如果这个项目对你有帮助，欢迎 Star ⭐ 和 Fork 🍴！
## 🔗 相关链接
- [GitHub 仓库](https://github.com/jiazhizhong/bullion-premium-miniprogram)
- [API 调试指南](./miniprogram/API调试指南.md)
---
最后更新：2026-01-28