作者:知晓云 - 小程序开发快人一步
来源:知晓课堂
在上一节,我们已经简单地完成一个天气查询小程序的静态页面,现在,我们就来为它加上逻辑代码。
获取当前位置天气
想象一下,当小程序加载,默认进入天气详情页面,此时页面初始化时应该做哪些工作呢?
初始化逻辑分3步走,具体如下:
-
首先获取当前地理位置信息,取得经纬度。
-
调用腾讯地理位置逆解析服务,获取当前位置信息。
-
调用心知天气 API,获取当前城市天气。
首先我们需要获取当前地理位置信息。小程序提供了 wx.getLocation API,可以让我们有能力获取到当前使用者的地理位置信息。
wx.getLocation 使用方法如下:
wx.getLocation({
success: function (res) {
// success 属性是获取成功回调函数
console.log(res)
that.setData({
hasLocation: true,
location: formatLocation(res.longitude, res.latitude)
})
}
})
我解释一下上述语句:我们给 wx.getLocation 函数传递了一个对象,对象中有 success 属性,该属性为一个 Function 类型,用于绑定获取地理位置成功事件的回调,在这个回调事件中,我们可以拿到一个 res 对象,res 对象包含 longitude 和 latitude,分别是经度、纬度。
接下来我们要通过经纬度获取城市信息,这里我们使用地理位置逆解析服务,使用前需要在腾讯地图注册,申请 API,然后请求 http://apis.map.qq.com/ws/geocoder/v1/?location=,取得当前城市信息。
发起请求的代码如下:
wx.request({
url: 'http://apis.map.qq.com/ws/geocoder/v1/',
data: {
location: '39.984154,116.307490'
},
success: function(r