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

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

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

準(zhǔn)備工作

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

接下來，項目創(chuàng)建窗口有一點說明下， 在 AppID 條目中， 如果你已經(jīng)有了內(nèi)測賬號，就填寫你的 AppID， 如果你還沒有內(nèi)測賬號，點擊旁邊的無AppID就可以了(相信大多數(shù)同學(xué)是沒有內(nèi)測賬號的，所以可以使用這個方法繼續(xù)在本地調(diào)試)。

關(guān)于小程序的基本流程，以及項目結(jié)構(gòu)等，可以參看咱們之前的文章 不需內(nèi)測賬號，帶你體驗微信小程序完整開發(fā)過程。 基礎(chǔ)部分咱們這里就不多贅述。

項目結(jié)構(gòu)

整個項目的文件結(jié)構(gòu)如下：

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

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

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

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

function getLocation(callback) {

    wx.getLocation({   

        success: function(res) {

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

        },

        fail: function() {

         callback(false);

        }

    })

}

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

獲取到當(dāng)前位置之后，我們還要獲取什么呢？ 天氣數(shù)據(jù)。 相關(guān)的 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，然后調(diào)用 wx.request 請求網(wǎng)絡(luò)數(shù)據(jù)。 因為我們不需要用到 API 返回的所有數(shù)據(jù)， 只需要獲得當(dāng)天的天氣，以及未來 7 天的預(yù)報即可。 所以這里還使用 parseWeatherData 方法取得我們需要的數(shù)據(jù)并重組成新的結(jié)果。 這個方法的定義如下：

function parseWeatherData(data) {

    var weather = {};

    weather["current"] = data.currently;

    weather["daily"] = data.daily;

    return weather;

}

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

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

大家可能注意到了，這個 API 給我們返回的數(shù)據(jù)中，有些數(shù)據(jù)的格式我們還需要繼續(xù)處理一下。 比如 time 是用時間戳的形式給我們返回的，但我們需要將時間顯示在 UI 上， 所以我們就需要進(jìn)行一下格式轉(zhuǎn)換。 另外 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];

}

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

//加載天氣數(shù)據(jù)

function requestWeatherData(cb) {

    getLocation(function(success, latitude, longitude){

      //如果 GPS 信息獲取不成功， 設(shè)置一個默認(rèn)坐標(biāo)

      if(success == false) {

          latitude = 39.90403;

          longitude = 116.407526;

      }      

      //請求天氣數(shù)據(jù) API

      getWeatherByLocation(latitude, longitude, function(weatherData){             

            cb(weatherData);    

      });

    });

}

請求原始數(shù)據(jù)，這里調(diào)用了 getLocation 請求當(dāng)前位置， 在回調(diào)里面判斷返回結(jié)果是否獲取位置成功，如果不成功，設(shè)置一個默認(rèn)位置。 這個判斷在實際的產(chǎn)品中還是比較有用的。 位置獲取不成功的情況還是比較多的。比如用戶沒有開啟定位權(quán)限。

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

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

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

    });

}

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

最后我們將這個方法暴露給應(yīng)用層：

module.exports = {

    loadWeatherData: loadWeatherData

}

這個語法和 nodejs 比較相似。 到此為止，咱們這個小程序的數(shù)據(jù)處理邏輯部分就開發(fā)完成了。 大家可以稍微消化一下， 下一篇會和大家一起處理應(yīng)用層的邏輯。 如果你想查看完整的代碼， 也可以進(jìn)入 Github