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

标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,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: '获取天气失败'
微信小程序提供了日期时间选择器组件`picker`和日历组件`calendar`,但如果需要自定义样式或者功能,可以考虑封装一个日期时间组件。 以下是一个简单的日期时间组件的封装示例: 1. 在`/components`目录下创建一个`datetime-picker`文件夹,创建`datetime-picker.wxml`、`datetime-picker.wxss`、`datetime-picker.js`和`datetime-picker.json`四个文件。 2. 在`datetime-picker.json`中定义组件的属性: ```json { "component": true, "usingComponents": {}, "properties": { "startDate": { "type": String, "value": "2023-02-15", }, "endDate": { "type": String, "value": "2023-02-20", }, "startTime": { "type": String, "value": "00:00", }, "endTime": { "type": String, "value": "23:59", }, "defaultDate": { "type": String, "value": "", }, "defaultTime": { "type": String, "value": "", }, "format": { "type": String, "value": "datetime", }, "showTime": { "type": Boolean, "value": true, }, "showDate": { "type": Boolean, "value": true, }, "startPlaceholder": { "type": String, "value": "开始时间", }, "endPlaceholder": { "type": String, "value": "结束时间", }, "bind:change": { "type": Function, "value": "", } }, "options": { "styleIsolation": "apply-shared" } } ``` 上述属性中: - `startDate`和`endDate`为日期范围,用于限制可选日期的范围; - `startTime`和`endTime`为时间范围,用于限制可选时间的范围; - `defaultDate`和`defaultTime`为默认值; - `format`为显示格式,支持`datetime`、`date`和`time`三种格式; - `showTime`和`showDate`分别控制是否显示时间和日期选择器; - `startPlaceholder`和`endPlaceholder`为开始时间和结束时间的占位符; - `bind:change`为选择器值变化时的回调函数。 3. 在`datetime-picker.wxml`中定义选择器组件: ```html <view class="datetime-picker"> <view wx:if="{{showDate}}" class="datetime-picker-item"> <picker mode="date" start="{{startDate}}" end="{{endDate}}" value="{{selectedDate}}" bindchange="onDateChange"> <view class="datetime-picker-value"> <text wx:if="{{selectedDate}}">{{selectedDate}}</text> <text wx:else>{{startPlaceholder}}</text> </view> </picker> </view> <view wx:if="{{showTime}}" class="datetime-picker-item"> <picker mode="time" start="{{startTime}}" end="{{endTime}}" value="{{selectedTime}}" bindchange="onTimeChange"> <view class="datetime-picker-value"> <text wx
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

愚公搬代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值