繼續(xù)來聊聊微信小程序的開發(fā)，這次帶大家一起開發(fā)一個功能完整的微信小程序，希望能對大家有一些參考價值。

微天氣

這次咱們一起開發(fā)一個天氣預報小程序蜓竹，之所以選這個類型，有兩個原因储藐。 一是天氣類的小程序整體復雜度比較低俱济，適合我們說明問題。 另外钙勃，這種類型的應用也更加適合微信小程序生態(tài)的場景蛛碌，我的理解這個生態(tài)不適宜開發(fā)過于復雜的應用。 所以選了則個類型辖源。咱們首先來看看最終效果蔚携，有個感官的認識：

這個是在我的調試器上面的最終運行效果，根據(jù)你當前的位置顯示當前以及未來一周的天氣情況克饶。 對于小程序的使用場景酝蜒，個人覺得比較適合。

準備工作

先給大家看了運行效果矾湃，建立一個感官認識亡脑。那么接下來，我們就可以開始了邀跃。首先在微信開發(fā)者工具里建立一個項目:

接下來霉咨，項目創(chuàng)建窗口有一點說明下， 在 AppID 條目中坞嘀， 如果你已經有了內測賬號躯护，就填寫你的 AppID， 如果你還沒有內測賬號丽涩，點擊旁邊的無AppID就可以了(相信大多數(shù)同學是沒有內測賬號的棺滞，所以可以使用這個方法繼續(xù)在本地調試)裁蚁。

關于小程序的基本流程，以及項目結構等继准，可以參看咱們之前的文章 不需內測賬號枉证，帶你體驗微信小程序完整開發(fā)過程。 基礎部分咱們這里就不多贅述移必。

項目結構

整個項目的文件結構如下：

大家可以看到室谚，有一個 index 目錄里面是主頁。 app.js 是程序主入口崔泵， utils.js 是咱們的工具腳本秒赤，用于讀取天氣數(shù)據(jù)。 還有一個 bg.jpg 的圖片文件憎瘸，是小程序的背景圖入篮。

這個項目的所有文件都在這里了，是不是挺簡單的幌甘？ 項目的完整代大家可以在咱們的 Github 主頁上查看 https://github.com/swiftcafex/wechat-weather

基本結構介紹完了潮售， 接下來咱們可以開始 Coding 了。 對于這個天氣程序來說锅风， 首先要處理的一個事情就是天氣數(shù)據(jù)的獲取了酥诽。 那咱們就一步一步的來做。

首先皱埠，我們需要獲取當前的地理位置肮帐， 微信給我們提供了相應的接口， 我們在 util.js 中可以定義這樣一個方法：

function getLocation(callback) {

    wx.getLocation({
        
        success: function(res) {

            callback(true, res.latitude, res.longitude);

        },
        fail: function() {

            callback(false);

        }

    })

}

wx.getLocation 方法給我們返回一個我們當前位置的經緯度信息漱逸。 如果成功泪姨，我們將信息傳回給 callback， 如果失敗我們給 callback 傳回 false饰抒。 注意，失敗的情況在實際開發(fā)中是需要注意處理的诀黍。比如袋坑，如果一些用戶沒有開啟定位權限，不處理失敗的話眯勾，就有可能產生預期之外的情況了枣宫。

獲取到當前位置之后，我們還要獲取什么呢吃环？ 天氣數(shù)據(jù)也颤。 相關的 API 很多， 我們這個小程序用的是 darksky.net 提供的天氣 API郁轻。 它提供了一個很簡單的 API 接口:

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);
            });            

        }
    });

}

getWeatherByLocation 這個方法依然寫在 util.js 里面翅娶，它的邏輯也很簡單文留，拼接出 darksky 的 API 的 URL，然后調用 wx.request 請求網(wǎng)絡數(shù)據(jù)竭沫。 因為我們不需要用到 API 返回的所有數(shù)據(jù)燥翅， 只需要獲得當天的天氣，以及未來 7 天的預報即可蜕提。 所以這里還使用 parseWeatherData 方法取得我們需要的數(shù)據(jù)并重組成新的結果森书。 這個方法的定義如下：

function parseWeatherData(data) {

    var weather = {};
    weather["current"] = data.currently;
    weather["daily"] = data.daily;

    return weather;

}

從上面的代碼不難看出，我們只取得了原始結果集的 currently 和 daily 數(shù)據(jù)谎势，然后重新返回凛膏。 為什么我們要這樣取得部分數(shù)據(jù)呢，主要是因為這個接口的其他數(shù)據(jù)我們并不需要脏榆，所以就沒必要再傳給應用層了猖毫。 原始數(shù)據(jù)的格式給大家貼一下：

優(yōu)化數(shù)據(jù)格式

大家可能注意到了，這個 API 給我們返回的數(shù)據(jù)中姐霍，有些數(shù)據(jù)的格式我們還需要繼續(xù)處理一下鄙麦。 比如 time 是用時間戳的形式給我們返回的，但我們需要將時間顯示在 UI 上镊折， 所以我們就需要進行一下格式轉換胯府。 另外 temperature 字段的格式也不是我們需要的。溫度數(shù)據(jù)我們不需要顯示到小數(shù)點之后恨胚，取整數(shù)就可以骂因。

定義幾個格式化數(shù)據(jù)的方法：

//將時間戳格式化為日期
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];


}

這三個方法都是對日期進行格式化輸出。具體功能代碼里的注釋已經說明了赃泡，不多贅述寒波。 最后，我們把前面所有的方法整合起來升熊，組成給應用層的接口：

//加載天氣數(shù)據(jù)
function requestWeatherData(cb) {

    getLocation(function(success, latitude, longitude){

      //如果 GPS 信息獲取不成功俄烁， 設置一個默認坐標
      if(success == false) {
          
          latitude = 39.90403;
          longitude = 116.407526;

      }      
      
      //請求天氣數(shù)據(jù) API
      getWeatherByLocation(latitude, longitude, function(weatherData){
                            
            cb(weatherData);    

      });

    });

}

請求原始數(shù)據(jù)，這里調用了 getLocation 請求當前位置级野， 在回調里面判斷返回結果是否獲取位置成功页屠，如果不成功，設置一個默認位置蓖柔。 這個判斷在實際的產品中還是比較有用的辰企。 位置獲取不成功的情況還是比較多的。比如用戶沒有開啟定位權限况鸣。

緊接著牢贸，在里面又調用了 getWeatherByLocation 方法獲取天氣數(shù)據(jù)，然后將原始的天氣數(shù)據(jù)返回镐捧。

原始數(shù)據(jù)讀取成功后潜索， 我們再封裝一層臭增，將原始數(shù)據(jù)進行加工：

function loadWeatherData(callback) {

    requestWeatherData(function(data){
      
      //對原始數(shù)據(jù)做一些修整， 然后輸出給前端
      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);

    });

}

這是最終輸出給應用層的方法帮辟，它里面用了咱們剛才定義的幾個數(shù)據(jù)格式化方法將返回的原始天氣數(shù)據(jù)加工了一下速址。 最終傳遞給回調方法。

最后我們將這個方法暴露給應用層：

module.exports = {

    loadWeatherData: loadWeatherData

}

這個語法和 nodejs 比較相似由驹。 到此為止芍锚，咱們這個小程序的數(shù)據(jù)處理邏輯部分就開發(fā)完成了。 大家可以稍微消化一下蔓榄， 下一篇會和大家一起處理應用層的邏輯并炮。 如果你想查看完整的代碼， 也可以進入 Github 主頁下載： https://github.com/swiftcafex/wechat-weather甥郑。

更多精彩內容可關注微信公眾號：
swift-cafe