微信小程序開發天氣APP

【摘 要】使用微信開發者工具設計一款微信端的天氣App，通過城市定位功能和天氣查詢功能獲取天氣信息，所得到的天氣信息在經過“小程序”邏輯層操作處理再由視圖層的各種組件顯示給用戶。用戶只需通過掃碼的方式即可獲得這款天氣APP，無需任何的裝載程序，事后也無需卸載，大大減少了手機的內存開銷，做到觸手可及，用完就走。

【關鍵詞】小程序 APP 前端

一、引言

本文設計的天氣APP是目前最受微信小程序開發者青睞的生活工具類型的APP，其主要功能便是城市定位、顯示天氣狀況、查詢城市天氣。界面設計簡潔明了，使用者能對當前天氣狀況及未來天氣變化一目了然。

二、設計

小程序為開發者提供了一個簡單、高效的開發框架，讓開發者可以在微信中開發具有原生 APP 體驗的服務。框架主要有視圖層（View）和和邏輯層（App Service）兩大塊，并在視圖層與邏輯層間提供數據傳輸和事件系統。通過數據綁定系統可以讓邏輯層數據與視圖層保持同步，只要在邏輯層做一定的數據加工，視圖層就會做出相應的更新。同樣，通過事件系統也可以讓視圖層的操作在邏輯層得到響應。

1.邏輯層設計

天氣頁面的邏輯層主要作用是使天氣信息能夠的視圖層顯示和響應界面操作，由于通過網絡獲得的數據并不都能符合視圖層的要求，所以采集的數據需要經過一系列的加工，而且為能簡便有效的在視圖上顯示這些數據信息，應當將這些加工處理后的數據儲存在一個數組當中，這樣邏輯層與視圖層進行數據綁定時只要對該數組進行綁定即可，不需要逐個數據進行綁定，這樣既減少代碼又簡單高效。該邏輯層的實現主要經過以下幾個步驟：獲取經緯度、城市定位及城市信息處理、獲取天氣信息及處理天氣信息、與視圖層數據進行綁定。

2.視圖層設計

天氣頁面的設計需要貼合用戶的需求，讓用戶對想要了解的天氣信息及未來天氣的變化一目了然，所以界面應設計得盡可能的簡潔，不需要過多花哨的組件。主要的的界面應當包含以下三部分：當前天氣狀況、未來天氣狀況、圖形展示天氣變化情況。至于其他的信息可以適當的添加。

本文的天氣界面設計分為上、中、下三層，頂層用于顯示當前，這部分內容在樣式上設計上比較顯眼突出，用靚麗的視覺效果告訴使用者當前的天氣狀況。中層使用繪圖組件繪制折線圖展示天氣的變化趨勢，底層使用滾動視圖的方式顯示未來的天氣狀況。整個界面在樣式設計上同樣需要貼合簡潔的設計理念，背景與色彩上偏向暖色調，文字與組件的布局使用簡單的流式布局。

三、開發

自微信小程序對外宣布以來，小程序的開發問題成為許多程序開發人員討論的重點，因此筆者也打算就本文天氣APP的開發所使用到的一些功能和組件做一些深入的探討。如：數據綁定、本地緩存、canvas畫布組件等。

1.數據綁定

微信小程序是通過“狀態模式-單向數據流”來管理視圖和對象綁定，狀態模式定義一個對象，這個對象可以通過管理其狀態從而使得應用程序作出相應的變化。簡單的講，對象狀態化，只要對象狀態發送變化，就通知頁面更新視圖元素。小程序處理數據綁定分為三個步奏：首先，分別哪個UI元素被綁定了相應的對象；然后，監視對象狀態的變化；最后，將所有變化傳播到綁定的視圖上。

2.本地緩存

每個微信小程序都可以有自己的本地緩存，可以對本地緩存進行設置、獲取和清理，本地緩存最大為10MB。和一般的緩存系統一樣小程序本地緩存的實現采用鍵值對的方式完成數據插入和讀取，通過對key進行一次Hash算法得到一個唯一值，并與value綁定起來；查詢的時候對根據Hash后的key查詢，算法空間復雜度O（1）；有了本地緩存，開發者可以將一些靜態數據（用戶數據，服務器授權ID等）、網絡地址（圖片、文件等網絡地址）、分頁數據進行緩存。通過本地緩存，小程序就能做到離線應用（可以操作緩存數據）和流暢的用戶體驗，能夠減少網絡請求，節約服務器資源。

小程序對本地緩存數據操作分為同步和異步兩種。同步方法有成功回調函數，表示數據處理成功后的操作。同步方法和異步方法的區別是：同步方法會堵塞當前任務，直到同步方法處理返回，異步方法不會塞當前任務。

3.canvas

微信的小程序的canvas與js原生的canvas內容十分類似，頁面設置是一模一樣的，邏輯層通過wx.createContext（）的方法來創建畫布的上下文，因為小程序目前只有2D，所以不需要來設置2d還是webGL。接下來就可以進行繪制了，繪制的一般步驟是：（1）先定義繪制樣式 setStrokeStyle=’’ ，或者是填充風格setFillStyle=’’；（2）設置要繪制的信息，使用 Canvas 繪圖上下文進行繪圖描述。（3）確定是路徑繪制還是填充繪制，con.stroke（）進行路徑繪制，con.fill（）進行填充繪制。

本文利用微信開發者工具設計了一款能夠定位當前城市，并直接顯示當地的天氣狀況以及能夠按照城市對天氣進行查詢的天氣APP，對微信小程序的開發做了簡單初步的探索。從開發效率和成本來看，小程序產品在微信Web+框架下的開發速度是遠比原生應用周期更短，同樣它比APP少了很大的開發成本，而且不需要時刻去維護。切合小程序的初衷，可能未來，點菜小程序、室內導航小程序、自助超市導購小程序等，這些使用不頻繁而且不需要固定用戶、不考慮流量的、單一功能化的需求會擁有一個很大的市場。

參考文獻

[1]（美國）（RichardYork）約克.CSS入門經典.清華大學出版社，2008

[2]李剛.瘋狂javascript講義.電子工業出版社，2012

[3]（美）鮑爾斯.JavaScript學習指南.人民郵電出版社，2009