微信小程序開發(fā)天氣APP

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

【關(guān)鍵詞】小程序 APP 前端

一、引言

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

二、設(shè)計(jì)

小程序?yàn)殚_發(fā)者提供了一個(gè)簡單、高效的開發(fā)框架，讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗(yàn)的服務(wù)?？蚣苤饕幸晥D層（View）和和邏輯層（App Service）兩大塊，并在視圖層與邏輯層間提供數(shù)據(jù)傳輸和事件系統(tǒng)。通過數(shù)據(jù)綁定系統(tǒng)可以讓邏輯層數(shù)據(jù)與視圖層保持同步，只要在邏輯層做一定的數(shù)據(jù)加工，視圖層就會做出相應(yīng)的更新。同樣，通過事件系統(tǒng)也可以讓視圖層的操作在邏輯層得到響應(yīng)。

1.邏輯層設(shè)計(jì)

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

2.視圖層設(shè)計(jì)

天氣頁面的設(shè)計(jì)需要貼合用戶的需求，讓用戶對想要了解的天氣信息及未來天氣的變化一目了然，所以界面應(yīng)設(shè)計(jì)得盡可能的簡潔，不需要過多花哨的組件。主要的的界面應(yīng)當(dāng)包含以下三部分：當(dāng)前天氣狀況、未來天氣狀況、圖形展示天氣變化情況。至于其他的信息可以適當(dāng)?shù)奶砑印?/p>

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

三、開發(fā)

自微信小程序?qū)ν庑家詠?，小程序的開發(fā)問題成為許多程序開發(fā)人員討論的重點(diǎn)，因此筆者也打算就本文天氣APP的開發(fā)所使用到的一些功能和組件做一些深入的探討。如：數(shù)據(jù)綁定、本地緩存、canvas畫布組件等。

1.數(shù)據(jù)綁定

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

2.本地緩存

每個(gè)微信小程序都可以有自己的本地緩存，可以對本地緩存進(jìn)行設(shè)置、獲取和清理，本地緩存最大為10MB。和一般的緩存系統(tǒng)一樣小程序本地緩存的實(shí)現(xiàn)采用鍵值對的方式完成數(shù)據(jù)插入和讀取，通過對key進(jìn)行一次Hash算法得到一個(gè)唯一值，并與value綁定起來；查詢的時(shí)候?qū)Ω鶕?jù)Hash后的key查詢，算法空間復(fù)雜度O（1）；有了本地緩存，開發(fā)者可以將一些靜態(tài)數(shù)據(jù)（用戶數(shù)據(jù)，服務(wù)器授權(quán)ID等）、網(wǎng)絡(luò)地址（圖片、文件等網(wǎng)絡(luò)地址）、分頁數(shù)據(jù)進(jìn)行緩存。通過本地緩存，小程序就能做到離線應(yīng)用（可以操作緩存數(shù)據(jù)）和流暢的用戶體驗(yàn)，能夠減少網(wǎng)絡(luò)請求，節(jié)約服務(wù)器資源。

小程序?qū)Ρ镜鼐彺鏀?shù)據(jù)操作分為同步和異步兩種。同步方法有成功回調(diào)函數(shù)，表示數(shù)據(jù)處理成功后的操作。同步方法和異步方法的區(qū)別是：同步方法會堵塞當(dāng)前任務(wù)，直到同步方法處理返回，異步方法不會塞當(dāng)前任務(wù)。

3.canvas

微信的小程序的canvas與js原生的canvas內(nèi)容十分類似，頁面設(shè)置是一模一樣的，邏輯層通過wx.createContext（）的方法來創(chuàng)建畫布的上下文，因?yàn)樾〕绦蚰壳爸挥?D，所以不需要來設(shè)置2d還是webGL。接下來就可以進(jìn)行繪制了，繪制的一般步驟是：（1）先定義繪制樣式 setStrokeStyle=’’ ，或者是填充風(fēng)格setFillStyle=’’；（2）設(shè)置要繪制的信息，使用 Canvas 繪圖上下文進(jìn)行繪圖描述。（3）確定是路徑繪制還是填充繪制，con.stroke（）進(jìn)行路徑繪制，con.fill（）進(jìn)行填充繪制。

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

參考文獻(xiàn)

[1]（美國）（RichardYork）約克.CSS入門經(jīng)典.清華大學(xué)出版社，2008

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

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