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

文章目录

- [1. 项目概述](#1. 项目概述)
- [2. 功能模块思维导图](#2. 功能模块思维导图)
- [3. 配置和风天气API](#3. 配置和风天气API)
- [4. 创建小程序项目](#4. 创建小程序项目)
- [5. 核心功能实现](#5. 核心功能实现)
- - - [1. 当前天气展示](#1. 当前天气展示)
    - [2. 获取未来七天天气](#2. 获取未来七天天气)
    - [4. 换肤功能实现](#4. 换肤功能实现)
- [6. 总结](#6. 总结)
- 7.项目运行效果截图
- [8. 关于作者其它项目视频教程介绍](#8. 关于作者其它项目视频教程介绍)

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. 当前天气展示

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

javascript 复制代码

 /**
   * 通过城市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天预报

javascript 复制代码

/**
   * 通过城市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-DD
  formatDate(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启动后仍然生效

javascript 复制代码

// 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.item
    wx.setStorageSync('skin', skin)
    wx.showToast({
      title: '设置成功',
    })
    this.timer = setInterval(() => {
      wx.navigateBack()
    }, 1000)
  },
  onUnload() {
    // 必须清除定时器！
    clearInterval(this.timer);
  }
})

6. 总结

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

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

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

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

7.项目运行效果截图

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

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

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