微信小程序---天气预报案例

  |   0 评论   |   592 浏览

    首先来看看最终效果

    微信小程序天气预报


    这个是在我的调试器上面的最终运行效果,根据你当前的位置显示当前以及未来一周的天气情况。 

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

     //获取位置
    function getLocation(callback) {
        wx.getLocation({
            
            success: function(res) {
            	callback(true, res.latitude, res.longitude);
            },
            fail: function() {
            	callback(false);
            }
        })
    }

    获取到当前位置之后,我们还要获取天气数据。 相关的 API 很多, 我们这个小程序用的是 darksky.net (注意:每个账号每天限额1000次请求,超了会付费)提供的天气 API。

    https://darksky.net/dev/account 这里可以看见你的key:

    api key

     而且它提供了一个很简单的 API 接口:

    //获取指定位置的天气信息 api https://darksky.net/
    function getWeatherByLocation(latitude, longitude, callback) {
    
        var apiKey = "你自己的Key";
        var apiURL = "https://api.darksky.net/forecast/" + apiKey + "/" + latitude + "," + longitude + "?lang=zh&units=ca"; 
        
        wx.request({
            url: apiURL,
            success: function(res){ 
                var weatherData = parseWeatherData(res.data);
                getCityName(latitude, longitude, function(city){
                    weatherData.city = city;
                    callback(weatherData);
                });            
    
            }
        }); 
    }

    调用 wx.request 请求网络数据。 因为我们不需要用到 API 返回的所有数据, 只需要获得当天的天气,以及未来 7 天的预报即可。 所以这里还使用 parseWeatherData 方法取得我们需要的数据并重组成新的结果。 这个方法的定义如下:

    //解析天气数据你自己的Key
    function parseWeatherData(data) { 
        var weather = {};
        weather["current"] = data.currently;
        weather["daily"] = data.daily; 
        return weather; 
    }

    上面的代码中,只取得了原始结果集的 currently 和 daily 数据,然后重新返回。

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

    //将时间戳格式化为日期
    function formatDate(timestamp) { 
        var date = new Date(timestamp * 1000);
        return date.getMonth()+1 + "月" + date.getDate() + "日 " + formatWeekday(timestamp);
    
    }
    
    //将时间戳格式化为时间
    function formatTime(timestamp) { 
        var date = new Date(timestamp * 1000);
        return date.getHours() + ":" + date.getMinutes(); 
    }
    
    //中文形式的每周日期
    function formatWeekday(timestamp) { 
        var date = new Date(timestamp * 1000);
        var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        var index = date.getDay(); 
        return weekday[index]; 
    }

    最后,加载天气:

    //加载天气数据
    function requestWeatherData(cb) { 
        getLocation(function(success, latitude, longitude){ 
          //如果 GPS 信息获取不成功, 设置一个默认坐标
          if(success == false) { 
              latitude = 39.90403;
              longitude = 116.407526;
    
          }       
          //请求天气数据 API
          getWeatherByLocation(latitude, longitude, function(weatherData){ 
                cb(weatherData);     
          }); 
        }); 
    }

    请求原始数据,这里调用了 getLocation 请求当前位置, 在回调里面判断返回结果是否获取位置成功,如果不成功,设置一个默认位置。再调用了 getWeatherByLocation 方法获取天气数据,然后将原始的天气数据返回。

    原始数据读取成功后:

    function loadWeatherData(callback) { 
        requestWeatherData(function(data){ 
          //对原始数据做一些修整, 然后输出给前端
          var weatherData = {};
          weatherData = data;      
          weatherData.current.formattedDate = formatDate(data.current.time);
          weatherData.current.formattedTime = formatTime(data.current.time);
          weatherData.current.temperature = parseInt(weatherData.current.temperature);
    
          var wantedDaily = [];
          for(var i = 1;i < weatherData.daily.data.length;i++) {
            
            var wantedDailyItem = weatherData.daily.data[i];
            var time = weatherData.daily.data[i].time;
            wantedDailyItem["weekday"] = formatWeekday(time);
            wantedDailyItem["temperatureMin"] = parseInt(weatherData.daily.data[i]["temperatureMin"])
            wantedDailyItem["temperatureMax"] = parseInt(weatherData.daily.data[i]["temperatureMax"])
            
            wantedDaily.push(wantedDailyItem); 
          }       
          weatherData.daily.data = wantedDaily;
          callback(weatherData); 
        }); 
    }

    猿码阁

    >