微信小程序:简单实现查看天气小程序

  1. 准备工作

首先注册和风天气账号,创建一个免费版的项目,准备好api接口,查看自己的key

  1. 获取位置location

如果想获取某个城市天气信息就必须知道这个城市的location和key去请求

https://devapi.qweather.com/v7/weather/3d?location='地址参数'&key='自己的key'

那么官方也提供了获取地址location的api,调用即可,其中location和key必填,location支持文字、以英文逗号分隔的经度,纬度坐标(十进制,最多支持小数点后两位)、LocationIDAdcode(仅限中国城市)

https://geoapi.qweather.com/v2/city/lookup?[请求参数]

返回的数据:可以取到想要的id

  1. 配置页面

在wxml中写一个picker省级选择器用于选择城市

 <picker mode="region" bindchange="bindRegionChange" value="{{region}}">
    <view class="picker">
     请选择城市:{{region[0]}} {{region[1]}} {{region[2]}}
    </view>
    </picker>

绑定事件获取城市信息

    bindRegionChange(e){
        this.setData({
            region:e.detail.value
        })
        this.getLocationid()//获取地址location
        setTimeout(()=>{    //设置计时器保证先获取到location再请求天气信息
            this.getWeather()
        },500)
    },

调用接口

//获取地址location的方法
 getLocationid(){
        wx.request({
          url: `https://geoapi.qweather.com/v2/city/lookup?location=${this.data.region[2]}&key=${this.data.key}`,
          method:'GET',
          success:(res)=>{
              this.setData({
                  location:res.data.location[0].id
              })
          }
        })
    },
//获取天气的方法
     getWeather(){
         wx.request({
          url: `https://devapi.qweather.com/v7/weather/3d?location=${this.data.location}&key=${this.data.key}`,
          method:'GET',
          success:(res)=>{
           this.setData({
               todayList:res.data.daily[0]
           })
          }
        })
    },

获取的天气数据(三天)

  1. 渲染页面

最后将得到的数据根据自己的需求渲染到页面即可得到一个简易查看各个城市天气的小程序

接口请求失败记得配置小程序域名,将https://devapi.qweather.com配置到域名中

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值