实时开发微信小程序——从网络获取数据(3) part 1

主要概况：

1.调用天气API获取Json数据

2.解析Json数据并展示

3.在页面展示动态数据

4.最后实现下拉刷新功能

此时我们的页面中以下变量应该被替换成动态变量：气温、图片描述、图片路径、导航栏颜色。

此处要提出作者对生命周期的理解还是不到位。因为作者同时还是前端的程序员，主要是Vue.js相关的，此处链接一个Vue.js相关的关于生命周期的理解，提供给大家做参考：

https://segmentfault.com/a/1190000011381906

--------------------------------------------------------手动分割线-----------------------------CSDN没有分割线真是难受死了----------------------------

GET /api/weather/now

参数

参数名	类型	描述	必填
city	String	城市名	是

参考返回

{
    "code": 200,
    "message": "success",
    "result": {
        "now": {
            "temp": 0,
            "weather": "lightrain"
        },
        "today": {
            "minTemp": 0,
            "maxTemp": 11
        },
        "forecast": [
            {
                "weather": "lightrain",
                "temp": 0,
                "id": 0
            },
            {
                "weather": "lightrain",
                "temp": -2,
                "id": 1
            },
            {
                "weather": "lightrain",
                "temp": 11,
                "id": 2
            },
            {
                "weather": "sunny",
                "temp": 18,
                "id": 3
            },
            {
                "weather": "lightrain",
                "temp": 8,
                "id": 4
            },
            {
                "weather": "sunny",
                "temp": 10,
                "id": 5
            },
            {
                "weather": "lightrain",
                "temp": 1,
                "id": 6
            },
            {
                "weather": "heavyrain",
                "temp": -7,
                "id": 7
            }
        ]
    }
}

GET /api/weather/future

参数

参数名	类型	描述	必填
city	String	城市名	是
time	TimeStamp	时间戳	是

参考返回

{
    "code": 200,
    "message": "success",
    "result": [
        {
            "weather": "overcast",
            "minTemp": 3,
            "maxTemp": 13
        },
        {
            "weather": "sunny",
            "minTemp": 1,
            "maxTemp": 11
        },
        {
            "weather": "snow",
            "minTemp": -8,
            "maxTemp": -3
        },
        {
            "weather": "overcast",
            "minTemp": 3,
            "maxTemp": 17
        },
        {
            "weather": "cloudy",
            "minTemp": 3,
            "maxTemp": 19
        },
        {
            "weather": "cloudy",
            "minTemp": 6,
            "maxTemp": 8
        },
        {
            "weather": "cloudy",
            "minTemp": 5,
            "maxTemp": 8
        }
    ]
}

此时获得天气应用的API如下图，我们将其保存展示：

tips:

URL格式说明

URL（统一资源定位符）是 URI（通用资源标识）的特定类型。

URL 通常由以下三或四个组成部分组成，第四部分可省略：

协议。它可以是 HTTP（不带 SSL）或 HTTPS（带 SSL）。
主机。例如：cn.baidu.com。
路径。例如：/course/wechat-mini-program--nd666-cn-1。
查询字符串。规则为?后显示参数查询值，伪url为：?param1=value1&param2=value2。

综上，url的书写规则为：http:/path/path/path?param1=value1&param2=value2

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

数据通过"名称":"值"成对出现, eg.,
"firstName" : "John"
数据间由逗号分隔, eg.,
"firstName":"John" , "lastName":"Doe"
花括号用于保存对象, eg.,
{ "firstName":"John" , "lastName":"Doe" }
方括号用于保存数组, eg.,
{"employees": [{ "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" }]}

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

JSON 扁平化的代码可以通过在线格式化网站显示成缩紧行的形式，常用的格式化网站推荐，如下图是数组的格式化效果。

我们查看官方文档中的示例代码：

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: res => {
    console.log(res.data)
  }
})

示例代码通过 wx.request 访问了 test.php ，传入参数 x 和 y, 最后从 res.data 中获取了返回的数据。

调用天气 API

参照示例代码，我们就可以写出访问天气 API 的代码了。

wx.request({
  url: 'https://test-miniprogram.com/api/weather/now', 
  data: {
     city: '广州市' 
  },
  success: res => {
    console.log(res)
  }
})

现在我们就应该在我们的微信小程序中调用这些数据：

在这里它能够帮助我们从网络下载数据。我们用 JSON 格式向它传入参数，可以看到，在这里我们指定了三个参数，分别为 url、data、success。

Url 是请求服务的服务求接口地址，在这里就使用我们天气的 API 地址。
Data 是请求的参数，在这里我们仅使用了一个 city 参数。
Success 确定了我们在获取数据成功时进行的操作，它的值应当是一个方法/函数。

我们来仔细研究一下 success 参数。success 参数的类型为 Function。所以我们要传入一个函数作为参数。因此，我们会定义一个函数，函数会在 wx.request 执行成功后被调用。作为一个函数，它本身也有参数。在官方文档中我们可以看到 success返回参数包括 data, statusCode, header, 我们可以从 data 中获得服务器返回的数据。

我们查看官方文档中的示例代码：

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: res => {
    console.log(res.data)
  }
})

调用天气 API

参照示例代码，我们就可以写出访问天气 API 的代码了。

wx.request({
  url: 'https://test-miniprogram.com/api/weather/now', 
  data: {
     city: '广州市' 
  },
  success: res => {
    console.log(res)
  }
})

此处需要补充箭头函数的解释文档，此文档解释了箭头函数的意义：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

写在最下面的话：因为此时要写的东西非常多，所以我把它分成不同的Part，方便观看。