微信小程序－微天气（上）

基本结构介绍完了， 接下来咱们可以开始 Coding 了。 对于这个天气程序来说， 首先要处理的一个事情就是天气数据的获取了。 那咱们就一步一步的来做。

首先，我们需要获取当前的地理位置， 微信给我们提供了相应的接口， 我们在 util.js 中可以定义这样一个方法：

1. function getLocation(callback) {
2.  
3.     wx.getLocation({
4.         
5.         success: function(res) {
6.  
7.                 callback(true, res.latitude, res.longitude);
8.  
9.         },
10.         fail: function() {
11.  
12.                 callback(false);
13.  
14.         }
15.  
16.     })
17.  
18. }

复制代码
wx.getLocation 方法给我们返回一个我们当前位置的经纬度信息。 如果成功，我们将信息传回给 callback， 如果失败我们给 callback 传回 false。 注意，失败的情况在实际开发中是需要注意处理的。比如，如果一些用户没有开启定位权限，不处理失败的话，就有可能产生预期之外的情况了。

获取到当前位置之后，我们还要获取什么呢？ 天气数据。 相关的 API 很多， 我们这个小程序用的是 darksky.net 提供的天气 API。 它提供了一个很简单的 API 接口:

1. function getWeatherByLocation(latitude, longitude, callback) {
2.  
3.     var apiKey = “你自己的Key”;
4.     var apiURL = “https://api.darksky.net/forecast/” + apiKey + “/” + latitude + “,” + longitude + “?lang=zh&units=ca”;
5.     
6.     wx.request({
7.         url: apiURL,
8.         success: function(res){
9.  
10.             var weatherData = parseWeatherData(res.data);
11.             getCityName(latitude, longitude, function(city){
12.                 weatherData.city = city;
13.                 callback(weatherData);
14.             });            
15.  
16.         }
17.     });
18.  
19. }

复制代码
getWeatherByLocation 这个方法依然写在 util.js 里面，它的逻辑也很简单，拼接出 darksky 的 API 的 URL，然后调用 wx.request 请求网络数据。 因为我们不需要用到 API 返回的所有数据， 只需要获得当天的天气，以及未来 7 天的预报即可。 所以这里还使用 parseWeatherData 方法取得我们需要的数据并重组成新的结果。 这个方法的定义如下：

1. function parseWeatherData(data) {
2.  
3.     var weather = {};
4.     weather[“current”] = data.currently;
5.     weather[“daily”] = data.daily;
6.  
7.     return weather;
8.  
9. }

复制代码

大家可能注意到了，这个 API 给我们返回的数据中，有些数据的格式我们还需要继续处理一下。 比如 time 是用时间戳的形式给我们返回的，但我们需要将时间显示在 UI 上， 所以我们就需要进行一下格式转换。 另外 temperature 字段的格式也不是我们需要的。温度数据我们不需要显示到小数点之后，取整数就可以。

定义几个格式化数据的方法：

1. //将时间戳格式化为日期
2. function formatDate(timestamp) {
3.  
4.     var date = new Date(timestamp * 1000);
5.     return date.getMonth()+1 + “月” + date.getDate() + “日 ” + formatWeekday(timestamp);
6.  
7. }
8.  
9. //将时间戳格式化为时间
10. function formatTime(timestamp) {
11.  
12.     var date = new Date(timestamp * 1000);
13.     return date.getHours() + “:” + date.getMinutes();
14.  
15. }
16.  
17. //中文形式的每周日期
18. function formatWeekday(timestamp) {
19.  
20.     var date = new Date(timestamp * 1000);
21.     var weekday = [“周日”, “周一”, “周二”, “周三”, “周四”, “周五”, “周六”];
22.     var index = date.getDay();
23.  
24.     return weekday[index];
25.  
26.  
27. }

复制代码
这三个方法都是对日期进行格式化输出。具体功能代码里的注释已经说明了，不多赘述。 最后，我们把前面所有的方法整合起来，组成给应用层的接口：

1. //加载天气数据
2. function requestWeatherData(cb) {
3.  
4.     getLocation(function(success, latitude, longitude){
5.  
6.       //如果 GPS 信息获取不成功， 设置一个默认坐标
7.       if(success == false) {
8.           
9.           latitude = 39.90403;
10.           longitude = 116.407526;
11.  
12.       }      
13.       
14.       //请求天气数据 API
15.       getWeatherByLocation(latitude, longitude, function(weatherData){
16.                             
17.             cb(weatherData);    
18.  
19.       });
20.  
21.     });
22.  
23. }

复制代码

紧接着，在里面又调用了 getWeatherByLocation 方法获取天气数据，然后将原始的天气数据返回。

原始数据读取成功后， 我们再封装一层，将原始数据进行加工：

1. function loadWeatherData(callback) {
2.  
3.     requestWeatherData(function(data){
4.       
5.       //对原始数据做一些修整， 然后输出给前端
6.       var weatherData = {};
7.       weatherData = data;      
8.       weatherData.current.formattedDate = formatDate(data.current.time);
9.       weatherData.current.formattedTime = formatTime(data.current.time);
10.       weatherData.current.temperature = parseInt(weatherData.current.temperature);
11.  
12.       var wantedDaily = [];
13.       for(var i = 1;i < weatherData.daily.data.length;i++) {
14.         
15.         var wantedDailyItem = weatherData.daily.data[i];
16.         var time = weatherData.daily.data[i].time;
17.         wantedDailyItem[“weekday”] = formatWeekday(time);
18.         wantedDailyItem[“temperatureMin”] = parseInt(weatherData.daily.data[i][“temperatureMin”])
19.         wantedDailyItem[“temperatureMax”] = parseInt(weatherData.daily.data[i][“temperatureMax”])
20.         
21.         wantedDaily.push(wantedDailyItem);
22.  
23.       }      
24.  
25.       weatherData.daily.data = wantedDaily;
26.       callback(weatherData);
27.  
28.     });
29.  
30. }

复制代码
这是最终输出给应用层的方法，它里面用了咱们刚才定义的几个数据格式化方法将返回的原始天气数据加工了一下。 最终传递给回调方法。

最后我们将这个方法暴露给应用层：

1. module.exports = {
2.  
3.     loadWeatherData: loadWeatherData
4.  
5. }

复制代码
这个语法和 nodejs 比较相似。 到此为止，咱们这个小程序的数据处理逻辑部分就开发完成了。 大家可以稍微消化一下， 下一篇会和大家一起处理应用层的逻辑。 如果你想查看完整的代码， 也可以进入 Github 主页下载： https://github.com/swiftcafex/wechat-weather。