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

最新推荐文章于 2021-05-29 01:40:48 发布

M_Mango

最新推荐文章于 2021-05-29 01:40:48 发布

阅读量719

点赞数

本文链接：https://blog.csdn.net/M_Mango/article/details/93434816

版权

本文介绍如何在实训中实现天气预报界面。首先，通过wx.request方法发起HTTPS请求获取天气数据，接着对获取的数据进行编辑处理，最终展示出完整的天气预报界面。

摘要由CSDN通过智能技术生成

在实现天气预报界面之前，需要获取相关数据，通过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
        })
      }
    })

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

<view class='container'>
  <view class='padb' style='font-size:16px; font-weight:bold;'>{
  {weather.city}}实况天气预报</view>
  <view class='padb'>气象台 {
  {weather.update_time}} 更新</view>
  <view class='img'>