這個由設計師親手開發的小程序，就是這麼簡潔好看 | 曉組織 #16

第

期羅曼羅蘭曾說過：

我熱愛生活，是個理想主義者，也是個射手座。

。我想，我所做的一切，只是想更準確地表達自己。感謝知曉程序（微信號 zxcx0101）給了我一次表述自己的機會。

「

」是我做的一個實時查詢天氣的小程序。

它採用精準的天氣數據，提供分鐘級的降雨提醒、實時天氣、污染指數、48 小時逐時預報、五日預報、天氣預警，以及其它單項天氣信息。

我很普通，自學了三年前端，踩了很多坑，也走了很多彎路，當然也獲得了更多的成就感。我做 web 前端，瀏覽器即是載體，因為無法讓許多人打開瀏覽器，輸入網址訪問我的網站，所以我來到了微信。說到「小天氣」，也是因為一個很偶然的原因。我的另一個移動 web 項目（文藝日簽類，類似 one 一個，一言等產品）需要實現一個功能，就是用 Canvas 生成圖片時，加上地理位置與本地天氣。這使得我接觸到了天氣介面。就此我找了許多天氣介面提供商。然而，免費的數據不全，且調用量有限制，而且質量不一，要麼少這個數據，要麼少那個數據。收費的更是參差不齊，好壞不一。「小天氣」 1.0 版本採用的並不是現有的介面，而是採用的一家數據較全，而且數據都是已處理好的數據。

所以，我在考察了很多數據的全面性和準確性后，更換了第二個版本的數據。API 市場提供的天氣 API 不適合做天氣小程序，更適用於日曆或外賣等平台使用的簡單天氣狀況。另外，我也找到了雅虎天氣的 API，但由於返回的數據英文偏多，所以放棄使用。在此之前，我是使用彩雲天氣的，相對來說彩雲天氣比較精準。而此次發現彩雲天氣也是提供天氣 API 的，最終決定選用彩雲天氣的 API。

相比第一版採用的 API，彩雲 API 提供的數據更加原始，這也增加了很多自定義數據加工的方式。比如關於風，返回的數據為風向角與風速，根據官方文檔判斷風向，風力，以及可以自定義風的具像化；比如一級風，對應炊煙直上。這使得一個產品可以利用自定義而更具特色，我的想法是一套簡約的文字，但是目前並沒準備好。

我做「小天氣」並沒想太多，比如要做成爆款之類。我是一名設計師，所以 UI 必須得到位。我理解的到位即是簡約但精緻，友好與實用，這也是「小天氣」整體的設計理念。

我的女朋友很少看天氣，但是我的女朋友很支持我做的事情，我想，我做完了，我的女朋友一定會看天氣的。於我，於我女朋友，我都必須以一個最好的態度與知識，去完成「小天氣」。對此，我參考了眾多 Dribbble 大神的天氣作品，以及 App store 的天氣 app。最終，定下了初稿，有了大的思路。

每種天氣狀況對應相應的顏色，易於用戶對界面有一個更加真實的直觀感受，並且每種天氣狀況也都應該有自己的動畫，這樣搭配在一起，像極了主題，直觀統一。

「小天氣」至此更新了好幾次，大多是因為 UI 優化，可能因為學的設計，在一些細節的處理上會犯強迫症。在這次開發過程中也遇到過難點，主要是一些數組的處理加工。比如逐時天氣，需要在零點之後顯示新的一天的日期，要不 48 小時天氣很容易讓人有一種眼花繚亂的感覺。這就需要在原數組中，添加新的一天的日期，然後在 WXML 里進行判斷調用。後來也做了預警信息模塊，以及兩小時每五分鐘降雨量模塊。但是，這兩個模塊在平常天氣下不會顯示。只在有當地氣象局發布預警信息時，或兩小時內有降雨數據時才會分別顯示。這樣做的原因，是讓用戶在最短的時間閱讀完最重要、最需要的天氣信息。「小天氣」在以後的更新中，UI 會繼續優化，並且會增加地理位置切換，查詢其它地區天氣的功能。另外，還會利用 Canvas 生成今日天氣的圖片，排版會細緻一些，利於大家保存與分享。當然啦，許許多多的小細節都需要完善，謝謝大家的支持～小天氣內有聯繫方式，歡迎大家一起交流。關注「

」公眾號，在微信後台回復「

」，看厲害的人怎麼做小程序。

▽ 點擊「閱讀原文」，發現更多優質小程序。