繼續(xù)來聊聊微信小程序的開發(fā)，這次帶大家一起開發(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)試)势誊。
項目結(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 中可以定義這樣一個方法：
123456789101112131415161718
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 接口:
12345678910111213141516171819
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é)果瞬浓。 這個方法的定義如下：
123456789
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 上， 所以我們就需要進行一下格式轉(zhuǎn)換掂林。 另外 temperature 字段的格式也不是我們需要的臣缀。溫度數(shù)據(jù)我們不需要顯示到小數(shù)點之后，取整數(shù)就可以泻帮。
定義幾個格式化數(shù)據(jù)的方法：
123456789101112131415161718192021222324252627
//將時間戳格式化為日期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īng)說明了，不多贅述锣杂。 最后脂倦，我們把前面所有的方法整合起來，組成給應(yīng)用層的接口：
1234567891011121314151617181920212223
//加載天氣數(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ù)進行加工：
123456789101112131415161718192021222324252627282930
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)用層：
12345
module.exports = { loadWeatherData: loadWeatherData}
這個語法和 nodejs 比較相似柳击。 到此為止，咱們這個小程序的數(shù)據(jù)處理邏輯部分就開發(fā)完成了片习。 大家可以稍微消化一下捌肴， 下一篇會和大家一起處理應(yīng)用層的邏輯蹬叭。如果你想查看完整的代碼， 也可以進入 Github 主頁下載： https://github.com/swiftcafex/wechat-weather状知。
Hello小程序將與您共同成長秽五。微信號：130870319 QQ群：40726600
