基于微信小程序的天气预报app

1. 项目概述

天气预报是日常生活中最常用的功能之一，开发一个微信小程序版的天气预报应用不仅能服务用户，也是学习小程序开发的绝佳实践。本文将详细介绍如何基于和风天气API开发一个功能完整的天气预报小程序，涵盖核心功能实现、数据管理、UI设计等关键技术点。

2. 功能模块思维导图

3. 配置和风天气API

首先需要注册和风天气开发者账号，获取API Key ，和风天气官网地址： 和风天气官网地址

4. 创建小程序项目

使用微信开发者工具创建一个新项目，选择JavaScript或TypeScript作为开发语言。项目结构如下：

wechat-weather/
├── pages/
│ ├── index/ # 首页-天气展示
│ ├── search/ # 城市搜索页
│ ├── city/ # 城市管理页
│ ├── splash/ # app启动页面
│ └── skin/ # 换肤
├── components/ # 公共组件
├── net/ # 网络请求模块
├── assets/ # 静态资源
├── app.js # 小程序入口
├── app.json # 全局配置
└── app.wxss # 全局样式

5. 核心功能实现

1. 当前天气展示

首页需要展示当前城市的天气概况，包括温度、气压、能见度等基础信息。

 /*** 通过城市ID获取实时天气*/getWeatherNow(city_id) {const params = {location: city_id,key: this.data.key}http.get('https://devapi.qweather.com/v7/weather/now', params, {isLoading: true}).then(res => {this.setData({now: res.data.now})//将回传数据保存let weathers = wx.getStorageSync('weathers') || [];// 检查是否已存在（假设每个item有唯一的id属性）const exists = weathers.some(item => item.cityName === this.data.cityName);if (!exists) {let weather = {...this.data.now,cityName: this.data.cityName,}weathers.push(weather)wx.setStorageSync('weathers', weathers);}})},

2. 获取未来七天天气

通过城市ID 获取未来7天预报

/*** 通过城市ID 获取未来7天预报*/getV7Weather(city_id) {const params = {location: city_id,key: this.data.key}http.get('https://devapi.qweather.com/v7/weather/7d', params, {isLoading: false}).then(res => {// 只处理daily数组const processedDaily = this.processDailyWeather(res.data.daily);console.log(processedDaily)this.setData({// 保持原有数据结构，只替换daily数组weatherData: processedDaily});})},/*** 在获取到天气数据后处理*/processDailyWeather(daily) {const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];const today = new Date();const todayStr = this.formatDate(today);return daily.map((item, index) => {// 创建新对象，保留所有原有属性const processedItem = {...item};// 添加格式化日期字段 (MM-DD)processedItem.fxDateFormatted = item.fxDate.slice(5).replace('-', '-');// 添加星期显示字段if (item.fxDate === todayStr) {processedItem.dayDisplay = '今天';} else if (index === 1) {processedItem.dayDisplay = '明天';} else {const date = new Date(item.fxDate);processedItem.dayDisplay = weekMap[date.getDay()];}return processedItem;});},// 辅助函数：格式化日期为YYYY-MM-DDformatDate(date) {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0');const day = String(date.getDate()).padStart(2, '0');return `${year}-${month}-${day}`;},

4. 换肤功能实现

换肤功能通过CSS变量和动态class实现，然后通过setStorageSync来实现本地保存，确保下次app启动后仍然生效

// pages/skin/skin.js
Page({/*** 页面的初始数据*/data: {skins: [{"bg": "background: linear-gradient(135deg, #FFC371 0%, #FF5F6D 100%)"},{"bg": "background: linear-gradient(to bottom, #D3CCE3 0%, #E9E4F0 100%)"},{"bg": "background: linear-gradient(to bottom, #4b6cb7 0%, #182848 100%)"},{"bg": "background: linear-gradient(to bottom, #a1c4fd 0%, #c2e9fb 100%)"},{bg: "background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%)"},{bg: "background: linear-gradient(to bottom, #398ffa 0%, #39b7ff 100%)"},{bg: "background: linear-gradient(45deg, #BDC3C7 0%, #F5D76E 50%)"},{bg: "background: linear-gradient(to bottom, #FF5F6D 0%, #6A11CB 100%)"},{bg: "background: linear-gradient(to top, #0F2027 0%, #2C5364 100%)"}],currentSkin: null},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.setData({currentSkin: wx.getStorageSync('skin')})console.log(this.data.currentSkin)},/*** 点击当前皮肤，并保存*/onClickItemHandle(options) {const skin = options.currentTarget.dataset.itemwx.setStorageSync('skin', skin)wx.showToast({title: '设置成功',})this.timer = setInterval(() => {wx.navigateBack()}, 1000)},onUnload() {// 必须清除定时器！clearInterval(this.timer);}
})

6. 总结

通过本文，我们完成了一个功能完整的微信小程序天气预报应用开发，主要特点包括：

1. 基于和风天气API获取实时和预报数据
2. 实现城市搜索、管理功能
3. 支持多种主题换肤

开发过程中需要注意的几个关键点：

1. API调用频率限制处理
2. 网络异常情况的友好提示
3. 主题切换的性能优化
4. 小程序包体积控制

7.项目运行效果截图

8. 关于作者其它项目视频教程介绍

本人在b站录制的一些视频教程项目，免费供大家学习

1. Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
2. Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
3. Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
4. Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
5. Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8