微信小程序开发——调用免费天气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,就可以得到当天以及以后三天的天气信息,如图: