微信小程序天气预报实战

api接口用的和风天气

代码如下

// pages/weather/weather.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    apiKey: "1f5e75b8a3f0472aaf2f618268b30b4e",

    City: '',

    Country:'',

    locationid:"",

    latlongFlag: false

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) { 

    this.checkAuth()

  },

  checkAuth(){

    // 将当前页面的 this 赋值给 vm, 以区别于下面回调函数中的 this 

    const that = this

    wx.getSetting({

      success(res) {

        console.log(res)

        // 1. scope.userLocation 为真, 代表用户已经授权

        //第一次判断的时候scope.userLocation为undefined,需要运行一次wx.getLocation才可以设置位置允许

        if ((typeof (res.authSetting['scope.userLocation']) == "undefined") ||

          (res.authSetting['scope.userLocation'])) {

          wx.getLocation({

            type: 'wgs84',

            success(res){

              that.setData({

                latitude: res.latitude,

                longitude:res.longitude,

                latlongFlag: true

              })

              console.log(res)

              console.log(that.data.longitude,that.data.latitude)

              that.getCityByLoaction()

            }

          })

        }else {

          // 2. 用户未授权的情况下, 打开授权界面, 引导用户授权.

          that.requireLocation()

        }

      }

    })

  },

  requireLocation(){

    const that = this

    wx.showModal({

      title: '提示',

      content: '需要获取您的位置信息,请前往设置界面开启位置权限。',

      success: function (res) {

        if (res.confirm) {

          // 用户点击确定按钮,打开设置界面

          wx.openSetting({

            success: (settingRes) => {

              console.log("settingRes",settingRes)

              if (settingRes.authSetting['scope.userLocation']) {

                // 用户已经同意授权

                wx.showToast({

                  title: '授权成功',

                  icon: 'success',

                  duration: 2000

                });

                that.checkAuth()

              } else {

                // 用户依然拒绝授权

                wx.showToast({

                  title: '授权失败',

                  icon: 'none',

                  duration: 2000

                });

              }

            }

          });

        } else if (res.cancel) {

          // 用户点击取消按钮

          wx.showToast({

            title: '您取消了授权',

            icon: 'none',

            duration: 2000

          });

        }

      }

    });

  },

  queryWeather(){

    this.weather_now()

  },

 //通过经纬度获取城市的id

  getCityByLoaction() {

      var that = this

      wx.request({

        url: 'https://geoapi.qweather.com/v2/city/lookup?', 

        method: 'GET',

        data: {

          key: this.data.apiKey,

          location: that.data.longitude.toString() + ',' + that.data.latitude.toString()

        },

        success: (res) => {

          if(res.data.code === "200"){

            this.setData({

              locationid: res.data.location[0].id,

              City:res.data.location[0].name,

              Country:res.data.location[0].country

            })

            // Fetch weather information using locationid

            this.getWeatherInfo(this.data.locationid);

          }else{

            console.log("fail to input city")

          }

        },

      })

  },

  //通过输入城市名获取城市的id

  weather_now(){

    wx.request({

      url: 'https://geoapi.qweather.com/v2/city/lookup?', 

      method: 'GET',

      data: {

        key: this.data.apiKey,

        location: this.data.city

      },

      success: (res) => {

        if(res.data.code === "200"){

          this.setData({

            locationid: res.data.location[0].id,

            City:res.data.location[0].name,

            Country:res.data.location[0].country

          })

          // Fetch weather information using locationid

          this.getWeatherInfo(this.data.locationid);

        }else{

          console.log("fail to input city")

        }

      },

    });

  },

  formatTime(date) {

    const year = date.getFullYear()

    const month = date.getMonth() + 1

    const day = date.getDate()

    const hour = date.getHours()

    const minute = date.getMinutes()

    const second = date.getSeconds()

    const weekArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]

    const isToday = date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)

    return {

        hourly: [hour, minute].map(this.formatNumber).join(":"),

        daily: [month, day].map(this.formatNumber).join("-"),

        dailyToString: isToday ? "今天" : weekArray[date.getDay()]

    }

  },

  formatNumber(n) {

    n = n.toString()

    return n[1] ? n : '0' + n

  },

  // 根据空气质量值返回对应的颜色类

  getAqiCategory(value) {

    // 根据实际情况定义不同的空气质量范围

    if (value <= 50) {

      return 'good';

    } else if (value <= 100) {

      return 'moderate';

    } else if (value <= 150) {

      return 'unhealthy';

    } else {

      return 'severe';

    }

  },

    // 获取天气信息的方法

    getWeatherInfo(locationid) {

      const that = this

      wx.request({

        url: `https://devapi.qweather.com/v7/weather/now?location=${locationid}&key=${that.data.apiKey}`,

        method: 'GET',

        success: (res) => {

          if(res.data.code === "200"){

            that.setData({

              now: res.data.now

            })

          }

          // Handle the weather information response

          console.log('Weather Now:', res.data);

        },

        fail: (error) => {

          // Handle the request failure

          console.error('Failed to fetch weather information:', error);

        }

      });

      wx.request({

        url: `https://devapi.qweather.com/v7/weather/24h?location=${locationid}&key=${that.data.apiKey}`,

        method: 'GET',

        success: (res) => {

          if(res.data.code === "200"){

            res.data.hourly.forEach(function(item){

                item.time = that.formatTime(new Date(item.fxTime)).hourly

            })

            that.setData({

              hourly: res.data.hourly

            })

          }

          // Handle the weather information response

          console.log('Weather 24 hour:', res.data);

        },

        fail: (error) => {

          // Handle the request failure

          console.error('Failed to fetch weather information:', error);

        }

      });

      wx.request({

        url: `https://devapi.qweather.com/v7/weather/7d?location=${locationid}&key=${that.data.apiKey}`,

        method: 'GET',

        success: (res) => {

          if(res.data.code === "200"){

            that.setData({

              daily: res.data.daily

            })

          }

          // Handle the weather information response

          console.log('Weather 7d:', res.data);

        },

        fail: (error) => {

          // Handle the request failure

          console.error('Failed to fetch weather information:', error);

        }

      });

      wx.request({

        url: `https://devapi.qweather.com/airquality/v1/now/${locationid}?key=${that.data.apiKey}`,

        method: 'GET',

        success: (res) => {

          console.log('Aqi Information:', res.data);

          if(res.data.code === "200"){

            that.setData({

              aqiAvailable:true,

              aqi: res.data.aqi[0],

              aqicolor : this.getAqiCategory(res.data.aqi[0].value)

            })

          }else{

            that.setData({

              aqiAvailable:false

            })

          }

        },

        fail: (error) => {

          // Handle the request failure

          console.error('Failed to fetch aqi information:', error);

        }

      });

    },

  //获取输入框的值

  getInutValue(e) {

    console.log(e);

    this.setData({

      city: e.detail.value  //获取页面input输入框输入的值,并传给city

    })

    console.log(this.data.city);

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady() {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow() {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide() {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload() {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh() {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage() {

  }

  

})

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值