這次帶大家一起開發一個(ge) 功能完整的微信小程序，希望能對大家有一些參考價(jia) 值。

這次咱們(men) 一起開發一個(ge) 天氣預報小程序，之所以選這個(ge) 類型，有兩(liang) 個(ge) 原因。 一是天氣類的小程序整體(ti) 複雜度比較低，適合我們(men) 說明問題。 另外，這種類型的應用也更加適合微信小程序生態的場景，我的理解這個(ge) 生態不適宜開發過於(yu) 複雜的應用。 所以選了則個(ge) 類型。咱們(men) 首先來看看最終效果，有個(ge) 感官的認識：

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

準備工作

先給大家看了運行效果，建立一個(ge) 感官認識。那麽(me) 接下來，我們(men) 就可以開始了。首先在微信開發者工具裏建立一個(ge) 項目:

接下來，項目創建窗口有一點說明下， 在 AppID 條目中， 如果你已經有了內(nei) 測賬號，就填寫(xie) 你的 AppID， 如果你還沒有內(nei) 測賬號，點擊旁邊的無AppID就可以了(相信大多數同學是沒有內(nei) 測賬號的，所以可以使用這個(ge) 方法繼續在本地調試)。

關(guan) 於(yu) 小程序的基本流程，以及項目結構等，可以參看咱們(men) 之前的文章 不需內(nei) 測賬號，帶你體(ti) 驗微信小程序完整開發過程。 基礎部分咱們(men) 這裏就不多贅述。

項目結構

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

大家可以看到，有一個(ge) index 目錄裏麵是主頁。 app.js 是程序主入口， utils.js 是咱們(men) 的工具腳本，用於(yu) 讀取天氣數據。 還有一個(ge) bg.jpg 的圖片文件，是小程序的背景圖。

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

基本結構介紹完了， 接下來咱們(men) 可以開始 Coding 了。 對於(yu) 這個(ge) 天氣程序來說， 首先要處理的一個(ge) 事情就是天氣數據的獲取了。 那咱們(men) 就一步一步的來做。

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

function getLocation(callback) {

    wx.getLocation({   

        success: function(res) {

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

        },

        fail: function() {

        callback(false);

        }

    })

}

wx.getLocation 方法給我們(men) 返回一個(ge) 我們(men) 當前位置的經緯度信息。 如果成功，我們(men) 將信息傳(chuan) 回給 callback， 如果失敗我們(men) 給 callback 傳(chuan) 回 false。 注意，失敗的情況在實際開發中是需要注意處理的。比如，如果一些用戶沒有開啟定位權限，不處理失敗的話，就有可能產(chan) 生預期之外的情況了。

獲取到當前位置之後，我們(men) 還要獲取什麽(me) 呢？ 天氣數據。 相關(guan) 的 API 很多， 我們(men) 這個(ge) 小程序用的是 darksky.net提供的天氣 API。 它提供了一個(ge) 很簡單的 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 這個(ge) 方法依然寫(xie) 在 util.js 裏麵，它的邏輯也很簡單，拚接出 darksky 的 API 的 URL，然後調用 wx.request 請求網絡數據。 因為(wei) 我們(men) 不需要用到 API 返回的所有數據， 隻需要獲得當天的天氣，以及未來 7 天的預報即可。 所以這裏還使用 parseWeatherData 方法取得我們(men) 需要的數據並重組成新的結果。 這個(ge) 方法的定義(yi) 如下：

function parseWeatherData(data) {

    var weather = {};

    weather["current"] = data.currently;

    weather["daily"] = data.daily;

    return weather;

}

從(cong) 上麵的代碼不難看出，我們(men) 隻取得了原始結果集的 currently 和 daily 數據，然後重新返回。 為(wei) 什麽(me) 我們(men) 要這樣取得部分數據呢，主要是因為(wei) 這個(ge) 接口的其他數據我們(men) 並不需要，所以就沒必要再傳(chuan) 給應用層了。 原始數據的格式給大家貼一下：

優化數據格式

大家可能注意到了，這個(ge) API 給我們(men) 返回的數據中，有些數據的格式我們(men) 還需要繼續處理一下。 比如 time 是用時間戳的形式給我們(men) 返回的，但我們(men) 需要將時間顯示在 UI 上， 所以我們(men) 就需要進行一下格式轉換。 另外 temperature 字段的格式也不是我們(men) 需要的。溫度數據我們(men) 不需要顯示到小數點之後，取整數就可以。

定義(yi) 幾個(ge) 格式化數據的方法：

//將時間戳格式化為(wei) 日期

function formatDate(timestamp) {

    var date = new Date(timestamp * 1000);

    return date.getMonth()+1 + "月" + date.getDate() + "日 " + formatWeekday(timestamp);

}

//將時間戳格式化為(wei) 時間

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];

}

這三個(ge) 方法都是對日期進行格式化輸出。具體(ti) 功能代碼裏的注釋已經說明了，不多贅述。 最後，我們(men) 把前麵所有的方法整合起來，組成給應用層的接口：

//加載天氣數據

function requestWeatherData(cb) {

    getLocation(function(success, latitude, longitude){

      //如果 GPS 信息獲取不成功， 設置一個(ge) 默認坐標

      if(success == false) {

          latitude = 39.90403;

          longitude = 116.407526;

      }      

      //請求天氣數據 API

      getWeatherByLocation(latitude, longitude, function(weatherData){             

            cb(weatherData);    

      });

    });

}

請求原始數據，這裏調用了 getLocation 請求當前位置， 在回調裏麵判斷返回結果是否獲取位置成功，如果不成功，設置一個(ge) 默認位置。 這個(ge) 判斷在實際的產(chan) 品中還是比較有用的。 位置獲取不成功的情況還是比較多的。比如用戶沒有開啟定位權限。

緊接著，在裏麵又調用了 getWeatherByLocation 方法獲取天氣數據，然後將原始的天氣數據返回。

原始數據讀取成功後， 我們(men) 再封裝一層，將原始數據進行加工：

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

    });

}

這是最終輸出給應用層的方法，它裏麵用了咱們(men) 剛才定義(yi) 的幾個(ge) 數據格式化方法將返回的原始天氣數據加工了一下。 最終傳(chuan) 遞給回調方法。

最後我們(men) 將這個(ge) 方法暴露給應用層：

module.exports = {

    loadWeatherData: loadWeatherData

}

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