最近在搞微信小程序,突然想来搞一个天气API,来获取实时的天气。话不多说,直接开搞。。
1. 选择一个天气API
百度上随便一搜,都是天气API,但是我感觉用起来都太烦了,
无论是注册,还是说要付费,还有各种广告。很讨厌。我一个都没有选
所以我决定偷一个天气API。
2. 偷一个天气API !?
这波我看中了腾讯天气 , 简约大方,重要的是好看
但是有一点就是,他并没有直接给我们开放一个API,所以这里我们使用 F12进行抓包,(为啥我不使用Fiddler抓包,可能是因为我比较菜吧)
1. 没有异步请求!?
f12打开查看,点到XHR筛选异步的AJAX请求,但是发现无论怎么刷新都没有。
- 从全部请求中排查异步包
在所有的请求包中,我发现,发送的是回调的异步请求,这才导致了在XHR中找不到。
3. 获取请求地址,删掉回调参数,用postman发请求来进一步筛选我们要的信息
进一步发现,这个api需要一些参数,来源,天气状态,省份和城市,如果我要获取动态的获取天气的话,省份和城市是肯定不能写死的。
进一步查看请求包发现了一个这样的请求
可以通过ip地址来获取天气
3. 渲染到微信小程序中
现在获取了两个api,
一个是通过发送http请求的ip地址来获取省份城市
https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5
还有一个是通过省份城市来获取天气
https://wis.qq.com/weather/common?source=pc&weather_type=observe%7Cforecast_24h&province=省份&city=你的城市
这里我对两个api进行了一些处理,因为我不需要那么多的信息。
//通过当前的ip地址获取城市,来自腾讯的api
getCity(){
var that = this
let url = 'https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5'
wx.request({
method:'get',
url: url,
success(res){
if(res.statusCode===200){
let adinfo = res.data.result.ad_info
console.log(adinfo.province);
that.setData({
city:adinfo.city,
province: adinfo.province,
})
}
}
})
}
//获取天气的API
getWether(){
let that = this
let url = `https://wis.qq.com/weather/common?source=pc&weather_type=observe%7Cforecast_24h&province=${that.data.province}&city=${that.data.city}`
wx.request({
url: url,
method:'GET',
success(res){
let todayWether = res.data.data.forecast_24h[1]
console.log(todayWether);
if(res.statusCode===200){
that.setData({
weather:`${todayWether.min_degree}~${todayWether.max_degree}° ${todayWether.day_weather} ${todayWether.day_wind_direction}${todayWether.day_wind_direction_code}级`
})
}
}
})
}
4. 还有一个问题!?
因为腾讯的这个api是需要通过省份和城市来获取天气的,
所以说,需要先执行获取省份和城市的方法!
所以我这里使用了setTime()这个方法
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getCity()
//获取天气的时候慢200ms
setTimeout(()=>{
this.getWether()
},500)
},
5. 渲染到页面上
这个就比较简单了,
<view class="wether">
<text>{{today}}</text><text>{{city}} {{weather}}</text>
</view>