繼續來聊聊微信小程序的開發，這次帶大家一起開發一個功能完整的微信小程序，希望能對大家有一些參考價值。
微天氣
這次咱們一起開發一個天氣預報小程序，之所以選這個類型，有兩個原因。 一是天氣類的小程序整體複雜度比較低，適合我們說明問題。 另外，這種類型的應用也更加適合微信小程序生態的場景，我的理解這個生態不適宜開發過於複雜的應用。 所以選了則個類型。咱們首先來看看最終效果，有個感官的認識：
這個是在我的調試器上面的最終運行效果，根據你當前的位置顯示當前以及未來一週的天氣情況。 對於小程序的使用場景，個人覺得比較適合。
準備工作
先給大家看了運行效果，建立一個感官認識。那麼接下來，我們就可以開始了。首先在微信開發者工具裏建立一個項目:
接下來，項目創建窗口有一點說明下， 在 AppID 條目中， 如果你已經有了內測賬號，就填寫你的 AppID， 如果你還沒有內測賬號，點擊旁邊的無AppID就可以了(相信大多數同學是沒有內測賬號的，所以可以使用這個方法繼續在本地調試)。
關於小程序的基本流程，以及項目結構等，可以參看咱們之前的文章 不需內測賬號，帶你體驗微信小程序完整開發過程。 基礎部分咱們這裏就不多贅述。
項目結構
整個項目的文件結構如下：
大家可以看到，有一個 index 目錄裏面是主頁。 app.js 是程序主入口， utils.js 是咱們的工具腳本，用於讀取天氣數據。 還有一個 bg.jpg 的圖片文件，是小程序的背景圖。
這個項目的所有文件都在這裏了，是不是挺簡單的？ 項目的完整代大家可以在咱們的 Github 主頁上查看 https://github.com/swiftcafex/wechat-weather
基本結構介紹完了， 接下來咱們可以開始 Coding 了。 對於這個天氣程序來說， 首先要處理的一個事情就是天氣數據的獲取了。 那咱們就一步一步的來做。
首先，我們需要獲取當前的地理位置， 微信給我們提供了相應的接口， 我們在 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。 注意，失敗的情況在實際開發中是需要注意處理的。比如，如果一些用戶沒有開啓定位權限，不處理失敗的話，就有可能產生預期之外的情況了。
獲取到當前位置之後，我們還要獲取什麼呢？ 天氣數據。 相關的 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 請求網絡數據。 因爲我們不需要用到 API 返回的所有數據， 只需要獲得當天的天氣，以及未來 7 天的預報即可。 所以這裏還使用 parseWeatherData 方法取得我們需要的數據並重組成新的結果。 這個方法的定義如下：
function parseWeatherData(data) {
var weather = {};
weather["current"] = data.currently;
weather["daily"] = data.daily;
return weather;
}
從上面的代碼不難看出，我們只取得了原始結果集的 currently 和 daily 數據，然後重新返回。 爲什麼我們要這樣取得部分數據呢，主要是因爲這個接口的其他數據我們並不需要，所以就沒必要再傳給應用層了。 原始數據的格式給大家貼一下：
優化數據格式
大家可能注意到了，這個 API 給我們返回的數據中，有些數據的格式我們還需要繼續處理一下。 比如 time 是用時間戳的形式給我們返回的，但我們需要將時間顯示在 UI 上， 所以我們就需要進行一下格式轉換。 另外 temperature 字段的格式也不是我們需要的。溫度數據我們不需要顯示到小數點之後，取整數就可以。
定義幾個格式化數據的方法：
//將時間戳格式化爲日期
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);
});
}
這是最終輸出給應用層的方法，它裏面用了咱們剛纔定義的幾個數據格式化方法將返回的原始天氣數據加工了一下。 最終傳遞給回調方法。
最後我們將這個方法暴露給應用層：
module.exports = {
loadWeatherData: loadWeatherData
}
這個語法和 nodejs 比較相似。 到此爲止，咱們這個小程序的數據處理邏輯部分就開發完成了。 大家可以稍微消化一下， 下一篇會和大家一起處理應用層的邏輯。 如果你想查看完整的代碼， 也可以進入 Github 主頁下載： https://github.com/swiftcafex/wechat-weather。
更多精彩內容可關注微信公衆號：
swift-cafe
![]()
