【愚公系列】《微信小程序与云开发从入门到实践》053-天气预报小程序的开发（当日天气模块开发）

愚公搬代码

已于 2024-12-31 04:03:50 修改

阅读量4.5w

点赞数 30

分类专栏：愚公系列-书籍专栏文章标签：微信小程序小程序

于 2024-10-01 18:07:00 首次发布

本文链接：https://blog.csdn.net/aa2528877987/article/details/142673107

版权

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在现代生活中，天气预报已成为人们日常决策的重要参考之一。随着小程序的普及，开发一款功能齐全的天气预报小程序成为了许多开发者的目标。而当日天气模块则是小程序中最为核心的功能之一，它直接为用户提供实时、准确的天气信息，帮助他们更好地安排日常活动。

本文将深入探讨天气预报小程序中当日天气模块的开发过程。我们将详细介绍如何获取和展示当日天气数据，包括温度、湿度、风速、降水概率等关键指标。我们还将讨论数据的抓取、解析和展示方式，确保信息的准确性和用户体验的流畅性。此外，用户界面的设计和交互体验也是我们关注的重点，旨在让用户能够轻松获取所需的天气信息。

🚀一、当日天气模块开发

当日天气模块是此小程序的核心，其需要详细地展示所选择地区当前的天气情况，包括温度、湿度、风向风速、空气质量等数据。

🔎1.页面逻辑：index.js

在 index.js 中，首先准备好 currentCity（当前城市）和 weatherData（天气数据）这两个变量。然后，当页面展示时，通过调用服务端 API 获取天气数据，并将结果显示到页面上。点击“选择城市”按钮后，跳转到 selectCity 页面进行城市选择。

🦋1.1 index.js

// index.js
let networkModule = require('../../utils/network.js');

Page({
   
  data: {
   
    currentCity: "北京市",  // 当前城市，默认值为北京市
    weatherData: {
   }         // 存储天气数据
  },

  onShow: function () {
   
    // 获取存储的当前城市，如果没有则默认设置为“北京市”
    let city = wx.getStorageSync('currentCity') || "北京市";
    this.setData({
   
      currentCity: city
    });
    this.refreshWeatherData();  // 获取天气数据
  },

  // 刷新天气数据
  refreshWeatherData: function () {
   
    networkModule.network.getWeatherData(this.data.currentCity, (res, error) => {
   
      if (res) {
   
        this.setData({
   
          weatherData: res.data.showapi_res_body
        });
      } else {
   
        wx.showToast({
   
          title: '获取天气失败'