guest/steel_prices_service

Fork 0

Files

ECRZ da4a055c1c modify：新增小程序

2026-01-06 18:00:43 +08:00

6.8 KiB

Raw Permalink Blame History

钢材价格查询小程序 - 项目完成总结

📋 项目概述

已成功将微信小程序初始化模板改造为功能完整的钢材价格查询应用。

✅ 完成的工作

1. 项目清理

✅ 删除了无用的 logs 页面及其相关文件
✅ 更新了 app.json 配置，移除 logs 页面引用
✅ 修改了窗口标题为"钢材价格查询"，采用蓝色主题（#1890ff）

2. API 请求封装（utils/request.js）

创建了一个完整的 API 请求工具，包含：

核心功能：

统一的 HTTP 请求封装（GET/POST/PUT/DELETE）
自动加载状态管理
统一错误处理和提示
请求/响应拦截

API 接口封装：

- checkHealth()        // 健康检查
- getPricesByRegion()  // 按地区查询价格
- searchPrices()       // 多条件搜索价格
- getPriceStats()      // 获取价格统计
- getPriceTrend()      // 获取价格趋势
- importPrices()       // 导入价格数据

3. 首页功能实现（pages/index/）

WXML 结构 (index.wxml)

搜索表单区域：地区、材质、日期选择器
统计信息卡片：显示均价、最低价、最高价、数据量、价格趋势
价格列表：展示查询结果，支持点击查看详情
空状态提示：无数据时的友好提示
欢迎界面：首次进入时的引导页面

WXSS 样式 (index.wxss)

简洁、专业的价格查询界面设计
蓝色主题配色（#1890ff）
响应式卡片布局
渐变背景和阴影效果
平滑的过渡动画

JS 逻辑 (index.js)

核心功能：

地区选择（支持昆明、玉溪、楚雄等11个城市）
材质选择（支持HPB300、HRB400等10种材质）
日期选择（可选，精确到天）
智能查询：根据是否选择日期调用不同API
统计数据展示：自动获取并展示价格统计信息
详情查看：点击价格卡片查看完整信息

数据流：

用户选择 → 参数验证 → API调用 → 数据处理 → 界面展示

4. 应用配置（app.js & app.wxss）

app.js

小程序启动日志
自动版本检查和更新提示
全局配置（API地址、应用名称、版本号）

app.wxss

全局样式规范
辅助类工具（Flex布局、间距、文本对齐、颜色等）
滚动条隐藏
文本溢出省略处理

🎨 设计特点

遵循的原则

KISS（简单至上）：

页面结构清晰，只有3个主要区域：表单、统计、列表
API 封装简洁，一个文件包含所有请求逻辑
样式组织清晰，分类注释明确

DRY（避免重复）：

全局样式类复用
API 请求统一封装
日期格式化函数复用

SOLID 原则：

单一职责：request.js 只负责网络请求，index.js 只负责页面逻辑
开闭原则：API 封装便于扩展新接口
接口隔离：每个 API 方法职责明确

UI/UX 设计

简洁专业：蓝色主题，清晰的视觉层次
友好交互：加载状态、错误提示、空状态处理
信息可视化：统计卡片、价格趋势图标、彩色标签
响应式设计：适配不同屏幕尺寸

📂 项目结构

Sale/
├── pages/
│   └── index/           # 价格查询首页
│       ├── index.js     # 页面逻辑
│       ├── index.wxml   # 页面结构
│       ├── index.wxss   # 页面样式
│       └── index.json   # 页面配置
├── utils/
│   ├── request.js       # API 请求封装（新增）
│   └── util.js          # 通用工具函数
├── app.js               # 应用入口（重构）
├── app.json             # 应用配置（更新）
├── app.wxss             # 全局样式（重构）
├── swagger.json         # API 文档
└── README.md            # 项目说明

🔌 API 对接

已对接的 6 个后端接口：

接口	方法	功能	使用场景
`/api/health`	GET	健康检查	启动时测试连接
`/api/prices/region`	GET	按地区查询	有日期的查询
`/api/prices/search`	GET	多条件搜索	无日期的查询
`/api/prices/stats`	GET	价格统计	统计卡片数据
`/api/prices/trend`	GET	价格趋势	预留功能
`/api/prices/import`	POST	导入数据	管理功能

API 基础地址： http://localhost:3000

🚀 如何使用

1. 启动后端服务

确保后端 API 服务运行在 http://localhost:3000

2. 打开小程序

使用微信开发者工具打开项目
编译并预览

3. 查询价格

选择地区（必选）
选择材质（必选）
选择日期（可选）
点击"查询价格"
查看统计信息和价格列表
点击价格卡片查看详情

4. 重置查询

点击"重置"按钮清空所有查询条件

⚙️ 配置说明

修改 API 地址

在 utils/request.js 中修改：

const API_BASE_URL = 'http://your-api-domain.com'

添加新地区

在 pages/index/index.js 的 regions 数组中添加

添加新材质

在 pages/index/index.js 的 materials 数组中添加

📊 功能特点

多维度查询：支持地区、材质、日期的组合查询
智能统计：自动计算平均价、最低价、最高价
趋势分析：显示价格涨跌趋势和变化率
友好交互：加载提示、错误处理、空状态
数据可视化：彩色标签、趋势图标、统计卡片

🔧 技术栈

前端框架：微信小程序原生框架
UI 设计：WXML + WXSS
逻辑处理：JavaScript (ES6+)
网络请求：wx.request 封装
后端 API：Node.js + Express (独立服务)

📝 后续优化建议

功能增强
- 添加价格趋势图表（使用 ECharts）
- 实现数据缓存机制
- 添加收藏/历史记录功能
- 支持数据导出
性能优化
- 实现虚拟列表（数据量大时）
- 添加请求防抖/节流
- 优化图片资源
用户体验
- 添加下拉刷新
- 实现搜索历史
- 优化加载动画
测试完善
- 添加单元测试
- 集成测试
- 端到端测试

✨ 项目亮点

完整的功能：从查询到统计到详情展示，形成完整闭环
清晰的代码：良好的注释和规范的命名
优雅的设计：简洁的 UI 和流畅的交互
健壮的错误处理：统一的错误处理机制
易于维护：模块化设计，遵循最佳实践

开发完成时间：2026-01-06 开发者：Claude Code AI Assistant 项目状态：✅ 已完成，可投入使用

6.8 KiB Raw Permalink Blame History Unescape Escape