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

举报
愚公搬代码 发表于 2025/01/28 15:47:17 2025/01/28
35 0 0
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,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: '获取天气失败',
          icon: 'none'
        });
      }
    });
  },

  // 选择城市事件
  selectCityEvent: function () {
    wx.navigateTo({
      url: '../selectCity/selectCity?type=1'  // 跳转到城市选择页面
    });
  }
});

说明

  • onShow:每次页面显示时,检查缓存中的 currentCity,并调用 refreshWeatherData 函数请求天气数据。
  • refreshWeatherData:通过 networkModule 请求天气数据,并将数据保存到 weatherData
  • selectCityEvent:点击选择城市按钮时,跳转到城市选择页面。

🔎2.页面布局:index.wxml

index.wxml 中,我们设计了天气信息的展示。整个布局分为两部分:上部显示当前城市和选择城市按钮,下部显示天气信息。

🦋2.1 index.wxml

<!-- index.wxml -->
<view class="container">
  <!-- 上部分:显示城市和选择城市按钮 -->
  <view class="header">
    <view class="location">
      <text class="currentCity">{{currentCity}}</text>
      <text class="selectBtn" bindtap="selectCityEvent">选择城市</text>
    </view>
    <view class="now_top">
      <view class="now_left">
        <text class="now_temperature">{{weatherData.now.temperature ? weatherData.now.temperature : "~"}}℃</text>
      </view>
      <view class="now_right">
        <view class="new_right_item">{{weatherData.now.weather}}<image class="new_right_item_icon" src="{{weatherData.now.weather_pic}}"></image></view>
        <view class="new_right_item">空气湿度:{{weatherData.now.sd}}</view>
        <view class="new_right_item">空气指数:{{weatherData.now.aqi}}</view>
        <view class="new_right_item">{{weatherData.now.wind_direction}}  {{weatherData.now.wind_power}}</view>
        <view class="new_right_item">降水量:{{weatherData.now.rain}}mm</view>
      </view>
    </view>
    <view class="now_bottom">
      <view class="now_left">
        <view class="now_bottom_item">空气质量:{{weatherData.now.aqiDetail.quality}}</view>
        <view class="now_bottom_item">一氧化碳均值:{{weatherData.now.aqiDetail.co}}mg/m³</view>
        <view class="now_bottom_item">二氧化氮均值:{{weatherData.now.aqiDetail.no2}}μg/m³</view>
        <view class="now_bottom_item">臭氧均值:{{weatherData.now.aqiDetail.o3}}μg/m³</view>
        <view class="now_bottom_item">二氧化硫均值:{{weatherData.now.aqiDetail.so2}}μg/m³</view>
      </view>
      <view class="now_right">
        <view class="now_bottom_item">PM10:{{weatherData.now.aqiDetail.pm10}}</view>
        <view class="now_bottom_item">PM2.5:{{weatherData.now.aqiDetail.pm2_5}}</view>
        <view class="now_bottom_item">污染:{{weatherData.now.aqiDetail.primary_pollutant}}</view>
        <view class="now_bottom_item">城市排名:{{weatherData.now.aqiDetail.num}}</view>
      </view>
    </view>
    <view class="now_time">数据更新时间:{{weatherData.now.temperature_time}}</view>
  </view>
</view>

说明

  • 上部区域显示当前城市和天气信息,包括温度、天气状况、湿度、空气质量等。
  • 使用 {{weatherData.now.temperature}} 和其他数据绑定来动态显示天气信息。
  • selectCityEvent 用于跳转到城市选择页面,用户可以选择其他城市查看天气。

🔎3.样式:index.wxss

你还需要在 index.wxss 中添加样式来布局和美化页面。

🦋3.1 index.wxss

/**index.wxss**/
.header {
  background-image: linear-gradient(to left bottom, #8b82f2,#4b3fa0);
  width: 100%;
  height: 800rpx;
}

.location {
  color: white;
  margin: 15px;
}

.selectBtn {
  font-size: 12px;
}

.currentCity {
  margin-right: 4px;
}

.now_top{
  display: flex;
  flex-direction: row;
  margin-left: 15px;
}

.now_bottom {
  display: flex;
  flex-direction: row;
  margin-left: 15px;
  margin-top: 15px;
}

.now_temperature {
  color: white;
  font-size: 80px;

}

.now_right {
  color: white;
  margin-left: 15px;
}

.new_right_item {
  margin-top: 2px;
  margin-bottom: 2px;
}

.new_right_item_icon {
  width: 18px;
  height: 18px;
  margin-left: 5px;
}

.now_bottom_item {
  color:white;
  margin-bottom: 5px;
  font-size: 13px;
}

.now_time {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color:white;
}

说明

  • 使用 flex 布局来使城市和选择按钮显示在一行,天气信息则分为左右两部分。
  • 温度使用较大的字体显示,其他信息则小一些。

🔎5.总结

这个模块的核心功能是通过服务端 API 获取天气数据,并在页面中进行展示。用户可以选择城市,系统会保存城市信息并默认提供该城市的天气。你可以根据需求进一步扩展功能,比如显示未来几天的天气预报、优化 UI 设计等。
在这里插入图片描述

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。