实验2：天气查询小程序

一、实验目标

1、掌握服务器域名配置和临时服务器部署；2、掌握 wx.request 接口的用法。

二、实验步骤

1. 申请api密钥并申请为开发者
   
2. 在应用管理中创建应用，选择web api并申请key值
   
3. 创建项目，构建HTML结构

<!-- <view class="container"> -->
  <picker mode="region" bindchange='regionChange'>
    <text wx:for="{{region}}">{{item}}</text>
  </picker>
  <view class="textContainer">
    <text>{{temp}}℃</text>
    <text>{{weather}}</text>
  </view>
  <image src="/node_modules/qweather-icons/icons/{{imgsrc}}.svg" mode="widthFix"></image>
  <view class="infoContainer">
    <view wx:for="{{nowInfo}}">
      <text>{{item.name}}</text> 
      <text>{{item.num}}</text>
    </view>
  </view>
<!-- </view> -->

4. 编写css样式

picker{
  margin: 0 auto;
  text-align: center;
}
picker text{
  font-size: 30px;
}
picker :nth-child(2){
  margin: 0 10px;
}
page{
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content:space-around;
  align-items: center;
}
.textContainer{
  font-size: 25px;
  text-align: center;
}
image{
  width: 200px;
  margin: 0 auto;
}
.textContainer text{
  margin-left: 10px;
}
.infoContainer{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content:space-around;
}
.infoContainer view{
  flex: 33%;
  display: flex;
  font-size: 20px;
  line-height: 45px;
  text-align: center;
  flex-direction: column;
}

5. 配置服务器请求合法域名

6. 分析需求，需要获取查询地的详细天气情况，需要使用到实时天气的接口，而实时天气的请求接口需要携带地区的LocationID，这个id的查询需要用到另外一个城市信息查询的接口

7. 明确第一步应该获取id，而获取id需要请求携带地名，这可以从picker组件中获得，将其绑定函数

regionChange(e){
    this.setData({
      region:e.detail.value,
    })
    this.getLocationID(e.detail.value[1],e.detail.value[2])
    this.getinfo(this.localID)
  },

8. 获取到地区名字之后，将其传给获取id的函数处理，这里避免模糊搜索，将地区及其上级都传给函数处理，请求成功之后修改本地数据，通过id请求具体信息

  getLocationID(city,area){
    var that=this
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?',
      method:"GET",
      data:{
        location:area,
        adm:city,
        key:'583ed323bb62490dba0158e445e81d2f'
      },
      success:function(res){
        that.getinfo(res.data.location[0].id)
        that.setData({
          localID:res.data.location[0].id
        })
      }
    })
  },

9. 请求具体的天气信息，并修改本地的值进行渲染

  getinfo(id){
    var that=this
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now?',
      data:{
        location:id,
        key:'583ed323bb62490dba0158e445e81d2f'
      },
      success(res){
        var resdata=res.data.now
        console.log(resdata);
        var restemp=resdata.temp
        that.setData({
          temp:restemp,
          weather:resdata.text,
          imgsrc:resdata.icon,
          nowInfo:[{
            name:"湿度",
            num:resdata.humidity+'%'
          },{
            name:"气压",
            num:resdata.pressure+'hPa'
          },{
            name:"能见度",
            num:resdata.vis+'km'
          },{
            name:"风向",
            num:resdata.windDir
          },{
            name:"风速",
            num:resdata.windSpeed+'km/h'
          },{
            name:"风力",
            num:resdata.windScale+'级'
          }]
        })
      }
    })
  },

10. 在onload函数中默认初始请求青岛崂山的数据

  onLoad() {
    this.getLocationID('青岛','崂山区')
    this.getinfo(101120202)
  },

完整js代码

// index.js
// 获取应用实例
Page({
  data: {
    region:['山东省','青岛市','崂山区'],
    nowInfo:[{
      name:"温度",
      num:''
    },{
      name:"气压",
      num:''
    },{
      name:"能见度",
      num:''
    },{
      name:"风向",
      num:''
    },{
      name:"风速",
      num:''
    },{
      name:"风力",
      num:''
    }],
    temp:0,
    weather:'晴',
    imgsrc:'999-fill',
    localID:101120202
  },
  regionChange(e){
    this.setData({
      region:e.detail.value,
    })
    this.getLocationID(e.detail.value[1],e.detail.value[2])
    this.getinfo(this.localID)
  },
  getinfo(id){
    var that=this
    wx.request({
      url: 'https://devapi.qweather.com/v7/weather/now?',
      data:{
        location:id,
        key:'583ed323bb62490dba0158e445e81d2f'
      },
      success(res){
        var resdata=res.data.now
        console.log(resdata);
        var restemp=resdata.temp
        that.setData({
          temp:restemp,
          weather:resdata.text,
          imgsrc:resdata.icon,
          nowInfo:[{
            name:"湿度",
            num:resdata.humidity+'%'
          },{
            name:"气压",
            num:resdata.pressure+'hPa'
          },{
            name:"能见度",
            num:resdata.vis+'km'
          },{
            name:"风向",
            num:resdata.windDir
          },{
            name:"风速",
            num:resdata.windSpeed+'km/h'
          },{
            name:"风力",
            num:resdata.windScale+'级'
          }]
        })
      }
    })
  },
  getLocationID(city,area){
    var that=this
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?',
      method:"GET",
      data:{
        location:area,
        adm:city,
        key:'583ed323bb62490dba0158e445e81d2f'
      },
      success:function(res){
        that.getinfo(res.data.location[0].id)
        that.setData({
          localID:res.data.location[0].id
        })
      }
    })
  },
  
  onLoad() {
    this.getLocationID('青岛','崂山区')
    this.getinfo(101120202)
  },

})

三、程序运行结果

四、问题总结与体会

遇到的问题是在函数请求的时候例如下

  getLocationID(city,area){
    var that=this
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup?',
      method:"GET",
      data:{
        location:area,
        adm:city,
        key:'583ed323bb62490dba0158e445e81d2f'
      },
      success:function(res){
        that.getinfo(res.data.location[0].id)
        that.setData({
          localID:res.data.location[0].id
        })
      }
    })
  },

在请求成功中的this指向的是wx这个对象，所以后续操作的时候发生请求404的问题，定义一个that来存储this的指向，解决问题