更新记录

v1.0.1（2026-01-19） 下载此版本

功能： 实时天气查询：支持全国城市实时天气查询 城市管理：可添加、删除、切换关注城市 空气质量监测：提供详细的空气质量指数和污染物信息 生活指数建议：包括紫外线、穿衣、运动、洗车等指数 天气预警：实时推送天气预警信息，包括雷电、暴雨、高温等 日出日落：提供准确的日出日落时间 天气资讯：最新天气相关新闻和资讯 我的收藏：收藏常用城市，快速访问 浏览历史：记录浏览过的城市天气 通知中心：接收天气预警和重要更新 个人信息：支持头像和个人资料编辑

平台兼容性

🌤️

天气查询小程序

基于UniApp开发的多功能天气查询小程序

扫码体验

扫描二维码或点击 https://demo.h5.furture.cn/weather 体验H5版本

项目简介

天气查询小程序是基于 RuoYi-App 框架开发的一款多功能天气服务应用，采用 UniApp 框架实现一份代码多终端适配，同时支持小程序、H5、Android 和 iOS。

该应用提供全面的天气信息服务，包括实时天气查询、空气质量监测、生活指数建议、天气预警等功能，并集成了广告系统，支持多种广告形式。

• 基于 RuoYi-App 框架开发
• 应用框架采用 uniapp，支持多端部署
• 前端组件使用 uni-ui，全端兼容的高性能UI框架

功能特点

核心功能

• 实时天气查询：支持全国城市实时天气查询
• 城市管理：可添加、删除、切换关注城市
• 空气质量监测：提供详细的空气质量指数和污染物信息
• 生活指数建议：包括紫外线、穿衣、运动、洗车等指数
• 天气预警：实时推送天气预警信息，包括雷电、暴雨、高温等
• 日出日落：提供准确的日出日落时间
• 天气资讯：最新天气相关新闻和资讯

个性化功能

• 我的收藏：收藏常用城市，快速访问
• 浏览历史：记录浏览过的城市天气
• 通知中心：接收天气预警和重要更新
• 个人信息：支持头像和个人资料编辑

广告系统

• Banner广告：顶部和底部Banner广告位
• 激励视频广告：观看视频去除广告
• 插屏广告：页面切换时的插屏广告

项目结构

├── pages/
│   ├── index.vue              # 天气首页
│   ├── weather/
│   │   ├── detail.vue         # 天气详情
│   │   ├── city-management.vue # 城市管理
│   │   ├── air-quality.vue    # 空气质量
│   │   ├── weather-warning.vue # 天气预警
│   │   ├── life-advice.vue    # 生活建议
│   │   ├── sunrise-sunset.vue # 日出日落
│   │   ├── uv-index.vue       # 紫外线指数
│   │   └── weather-news.vue   # 天气资讯
│   ├── work/
│   │   └── index.vue          # 工作台
│   ├── mine/
│   │   ├── index.vue          # 我的主页
│   │   ├── favorites.vue      # 我的收藏
│   │   ├── history.vue        # 浏览历史
│   │   ├── notifications.vue  # 通知中心
│   │   └── profile.vue        # 个人信息
│   └── common/
│       └── feedback.vue       # 反馈建议
├── components/                # 公共组件
├── static/                    # 静态资源
├── pages.json                 # 页面路由配置
└── manifest.json              # 应用配置

运行方式

环境要求

• HBuilderX 3.0+ 或 微信开发者工具
• Node.js 12.0+（可选，用于npm依赖管理）

开发步骤

1. 克隆或下载项目代码
2. 使用 HBuilderX 打开项目
3. 在 HBuilderX 中配置微信小程序 AppID
4. 运行到微信开发者工具或直接运行到手机

构建部署

• 小程序：使用 HBuilderX 发行 -> 微信小程序
• H5：使用 HBuilderX 发行 -> H5
• App：使用 HBuilderX 发行 -> 原生App云打包

技术栈

开发规范

1. 页面命名采用小写字母+连字符格式
2. 组件命名采用大驼峰格式
3. CSS使用SCSS预处理器，采用BEM命名规范
4. 使用Vue 3 Composition API进行开发
5. 代码注释清晰，关键逻辑添加说明

许可证

本项目基于 MIT 许可证开源，详见 LICENSE 文件。

联系方式

如有问题或建议，欢迎通过以下方式联系：

• 提交 Issue：在项目仓库提交问题
• 技术交流：加入相关技术交流群

更新日志

v1.0.0

• 初始版本发布
• 实现核心天气查询功能
• 添加城市管理功能
• 集成空气质量监测
• 实现生活指数建议
• 添加天气预警功能
• 实现"我的"页面相关功能
• 集成广告系统

感谢使用天气查询小程序！ 🎉