微信小程序开发——调用免费天气api接口（高德、天气API）

开发一个现实天气信息的微信小程序，主要的是从网上请求到天气信息数据，网上也有很多介绍免费天气api接口的，我试了好多没法用，或者就是像百度api一样弄了半天没搞明白，我这里使用了高德和“天气API”提供的两种天气api接口。

一、使用高德天气接口：

网址链接为：

https://lbs.amap.com/api/webservice/guide/api/weatherinfo

（一）注册并获取Key

使用时候需要注册获取Key，因为是阿里旗下公司，可以使用支付宝扫码注册。注册后在图中所示的页面中点击 申请Key：

在打开的页面中点击右上角的“创建新应用”，填写应用名称和类型，我这里随便把应用名称定为Weather，创建好之后点击“添加”

可以给Key添加名字，服务平台注意要选择 Web服务，这个选项才能使用天气查询API（这里不需要再点击它了）

提交之后就可以找到申请的Key了，这时候就可以去使用API了。

（二）调用API接口

页面中介绍了接口地址和请求方式，以及请求参数，应该比较好理解。
注意，使用微信开发者工具进行开发时，需要将网址添加到request的合法域名中，如果只是调试而不发布，可以在开发者工具本地设置中勾选不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书，不过这样的设置是没法发布的，最后发布还是需要将网址添加到request的合法域名中。
根据请求参数，我们需要添加Key和city城市编码，我们可以先测试下：

新建项目后，在index.js（或者新建一个页面）中加入以下代码：

//index.js
//获取应用实例
const app = getApp()

Page({
   
  data: {
   
  },
  onLoad:function(){
   
    var self = this;
    wx.request({
   
      url: 'https://restapi.amap.com/v3/weather/weatherInfo',
      data:{
   
        'key': '***************************',//填入自己申请到的Key
        'city': '120102',
      },
      header:{
   
        'content-type': 'application/json'
      },
      success:function(res){
   
        console.log(res.data);
      }
    })
  }
})

上面代码会在页面加载好后向网络请求数据，在console中可以看到返回的信息：

其中返回的数据在api介绍页面中都有介绍，默认返回的是实况天气，也可以在请求中将extensions选项设置为all，就可以得到当天以及以后三天的天气信息，如图：

得到这些信息之后，后面的步骤就简单了，可以在页面中展示出来，我这里写了一个很简单的展示页面，没有调格式，有兴趣的可以再编写wxss文件调整样式。

index.wxml

<