微信小程序：简单实现查看天气小程序-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序：简单实现查看天气小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

准备工作

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

天气小程序,javascript,git,css,html,Powered by 金山文档

获取位置location

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

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

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

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

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

配置页面

在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]
           })
          }
        })
    },

获取的天气数据（三天）