校内综合实训——实现天气预报界面

在实现天气预报界面之前,需要获取相关数据,通过wx.request(Object object)方法发起HTTPS网络请求。

 wx.request({
      url: 'https://www.tianqiapi.com/api/', 
      method: "get",
      dataType: "json",
      data: {
        version: "v1",
        city: '湛江'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data);
        _this.setData({
          weather: res.data,
          weatherweek: res.data.data
        })
      }
    })

请求成功后,可以将获得的数据进行编辑。


  {{weather.city}}实况天气预报
  气象台 {{weather.update_time}} 更新
  
  
  
  {{weather.data[0].tem}}  {{weather.data[0].wea}}
  {{weather.data[0].win}} {{weather.data[0].win_speed}} {{weather.data[0].win_meter}}
  湿度: {{weather.data[0].humidity}}
  空气质量 {{weather.data[0].air_level}}
  {{weather.air_tips}}
 {{weather.city}}七日天气


{{item.day}}

{{item.wea}}
{{item.win[0]}}
{{item.tem1}}/{{item.tem2}}


编辑完成,将会得到以下界面:

校内综合实训——实现天气预报界面_第1张图片

你可能感兴趣的:(校内综合实训——实现天气预报界面)