更新记录

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云打包

技术栈

技术 版本 说明
UniApp 3.0+ 跨平台应用框架
Vue 3.0+ 前端开发框架
SCSS 4.0+ CSS预处理器
uni-ui 2.0+ 全端兼容UI组件库

开发规范

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

许可证

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

联系方式

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

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

更新日志

v1.0.0

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

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。