高明福，張?zhí)靾@

（富奧汽車零部件股份有限公司研發(fā)中心，吉林 長春 130013）

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，手機(jī)客戶端逐漸成為各大公司追捧的對象。隨著智能手機(jī)的發(fā)展，APP極大地豐富了智能手機(jī)的使用體驗(yàn)。APP間激烈的競爭，使得能否在正確的時間推出符合市場需求的 APP顯得尤為重要，同時后續(xù)能否及時維護(hù)也是APP生命力的體現(xiàn)。

開源之所以火熱，是因?yàn)樵创a開放、信息共享和使用自由?；ヂ?lián)網(wǎng)把全球人類的智慧匯聚在一起，迸發(fā)出不一樣的火花。各種優(yōu)秀的Web框架如雨后春筍般涌現(xiàn)，極大地縮短了WebApp的開發(fā)周期。Dojo亦為其中之一。Dojo提供了齊全的控件，如果需要，還可以結(jié)合CSS制定出個人所需的控件，甚至可以直接修改Dojo的源代碼。本文設(shè)計(jì)的APP就是以Dojo為框架進(jìn)行開發(fā)，完成相關(guān)功能設(shè)計(jì)。

1 APP發(fā)展情況調(diào)研

隨著蘋果的iOS和谷歌的Android兩大智能移動操作系統(tǒng)的流行推廣，APP市場進(jìn)入了一個高速發(fā)展的階段，APP開發(fā)競爭殘酷，各種類型APP層出不窮。校園APP的開發(fā)也越來越火熱，APP的產(chǎn)業(yè)未來是相當(dāng)樂觀的。

2 設(shè)計(jì)目的及意義

大學(xué)里存在豐富的課外活動，但是目前，通知渠道較為狹窄，電聯(lián)和QQ群里發(fā)通知的方式會存在通知不到位的情況，使得部分同學(xué)錯過某些精彩活動；當(dāng)每次測試完成后，學(xué)生需要一臺能登入校園網(wǎng)的電腦，才能進(jìn)行成績查詢操作；每個學(xué)院發(fā)布通知時，學(xué)生在官網(wǎng)很難找到相應(yīng)界面，還有部分同學(xué)很少關(guān)注校園官網(wǎng)，不了解本學(xué)院發(fā)生的事宜，這就造成了消息的不流通。本文設(shè)計(jì)的校園APP，將官網(wǎng)部分功能在手機(jī)端實(shí)現(xiàn)，這樣不但可以為官網(wǎng)分擔(dān)流量，也可以為師生提供便利，促進(jìn)信息交互。

3 設(shè)計(jì)原理和方法

3.1 MVC簡介

模型—視圖—控制器（Model View Controller，MVC）是軟件工程的一種軟件架構(gòu)模式，其最早由Trygve Reekskaug提出，是施樂帕多羅奧多研究中心在1980年代為smalltalk發(fā)明的一種軟件設(shè)計(jì)模式。它是一種軟件設(shè)計(jì)典范，用一種業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分離的方法組織代碼，將業(yè)務(wù)邏輯聚集到一個部件里面，當(dāng)改進(jìn)和個性化定制界面及用戶交互時，不需要重新編寫業(yè)務(wù)邏輯。在一個邏輯的圖形化用戶界面的結(jié)構(gòu)中，MVC用于映射傳統(tǒng)的輸入、處理和輸出功能，其目的是為了實(shí)現(xiàn)一種動態(tài)的程序設(shè)計(jì)，簡化后續(xù)對程序的修改和擴(kuò)展，并使程序結(jié)構(gòu)更加直觀。

MVC是一個框架模式，它強(qiáng)制性地使應(yīng)用程序的輸入、處理和輸出分開。首先，它有低耦合性優(yōu)點(diǎn)，因?yàn)樗鼘⒁晥D層面和業(yè)務(wù)層面相互分離，這樣就可以實(shí)現(xiàn)改變視圖層代碼的同時而不需要重新編譯運(yùn)行原來處理數(shù)據(jù)的模型代碼和聯(lián)系視圖和模型的控制器。其次，MVC還具有高重用性和可適用性的優(yōu)點(diǎn)，隨著技術(shù)的不斷進(jìn)步，人們的需求時刻發(fā)生著變化，但是最終處理數(shù)據(jù)的方式卻可能不變，因此，不需要重新生成所有代碼，只需要改變界面即可，因此使得使用MVC設(shè)計(jì)模式編寫的代碼處理起來更加游刃有余。再次，MVC有較低開發(fā)周期的優(yōu)點(diǎn)，MVC使開發(fā)和維護(hù)用戶接口的技術(shù)含量更低，大大縮短開發(fā)時間。

使用MVC應(yīng)用程序被分成3個核心部件：模型、視圖、控制器。它們各自處理自己的任務(wù)。MVC更多的是一種思想，小到代碼組織結(jié)構(gòu)，大到前端后端，它們均是運(yùn)用了MVC的設(shè)計(jì)思想，使彼此相互獨(dú)立，每一個模塊的單獨(dú)發(fā)展或開發(fā)，均不會影響到其他模塊的正常使用。本文設(shè)計(jì)的校園APP，也是運(yùn)用的MVC這種思想。

3.2 開發(fā)工具簡介

（1）Dojo：本APP采用Dojo開發(fā)框架，所有底層模塊均已封裝，因而只需在代碼中加載Dojo解釋器，調(diào)用Dojo提供的代碼接口進(jìn)行開發(fā)。

（2）文本編輯器：本APP中采用的是UltraEdit。

（3）瀏覽器：本APP中采用的是Google Chrome。

（4）處理Android項(xiàng)目的工具：本APP利用了集成了Android插件的Eclipse來進(jìn)行最終APK文件的打包和發(fā)布。

（5）移動終端：Andoid手機(jī)一臺，系統(tǒng)版本為5.0以上，根據(jù)cordova官網(wǎng)查詢，API接口支持系統(tǒng)版本為5.0以上。

3.3 可行性分析

經(jīng)濟(jì)可行性：現(xiàn)今智能手機(jī)廣泛應(yīng)用，市場價格低廉，符合大眾消費(fèi)水平，因此本APP的運(yùn)行設(shè)備平臺的范圍是很廣泛的。

需求可行性：由于本APP是針對校園而設(shè)計(jì)的，最終用戶僅限于校園學(xué)生，因此人員基數(shù)約為學(xué)校在校生數(shù)。

技術(shù)可行性：幾乎每款智能手機(jī)均具備瀏覽器，技術(shù)上不存在障礙。

3.4 關(guān)鍵技術(shù)分析

在編寫軟件的過程中，有3個技術(shù)要點(diǎn)：（1）實(shí)現(xiàn)業(yè)務(wù)邏輯的分離，將UI顯示與數(shù)據(jù)操作分割開來。（2）Dojo中的控件缺少下拉刷新功能，需要單獨(dú)實(shí)現(xiàn)。（3）APP部分頁面需要根據(jù)具體條目顯示相關(guān)控件，所以，有些控件需要針對APP的需求在Dojo的開發(fā)框架下進(jìn)行相應(yīng)定制。

3.4.1 業(yè)務(wù)邏輯分離

業(yè)務(wù)邏輯分離，就是將程序中的數(shù)據(jù)處理和UI顯示進(jìn)行分離，下層的數(shù)據(jù)處理對于上層的UI顯示而言是透明的，數(shù)據(jù)處理和UI顯示之間通過接口進(jìn)行交互。本APP利用html頁面負(fù)責(zé)UI顯示，而頁面布局等內(nèi)容則結(jié)合CSS層疊樣式表，每個UI界面的數(shù)據(jù)處理單獨(dú)寫一個JavaScript腳本。而html頁面和JavaScript腳本則通過Dojo的解析器聯(lián)系在一起。本APP工作的前提，就是在主頁面加載Dojo的解析器，即所有的UI顯示、頁面跳轉(zhuǎn)、數(shù)據(jù)查詢和數(shù)據(jù)傳遞的前提，是載入Dojo的解析器。

3.4.2 下拉刷新功能實(shí)現(xiàn)

每個頁面在接受用戶點(diǎn)擊時，會傳入一個手指的觸點(diǎn)坐標(biāo)（x，y），當(dāng)手指點(diǎn)住不放并進(jìn)行下拉等操作時，瀏覽器還會傳入一個坐標(biāo)的位移量。本APP根據(jù)這個坐標(biāo)值來判斷點(diǎn)擊控件和點(diǎn)擊事件。對于下拉提示，本APP將一個Div塊提前布置在html頁面中。根據(jù)下拉狀態(tài)在JavaScript代碼中進(jìn)行相應(yīng)的控制，即當(dāng)滿足條件時，切換狀態(tài)，當(dāng)事件結(jié)束后，更新狀態(tài)。本APP將下拉提示控件默認(rèn)設(shè)為隱藏狀態(tài)，同時設(shè)置一個事件監(jiān)聽器，監(jiān)聽屏幕坐標(biāo)狀態(tài)，記錄初始坐標(biāo)位置值，當(dāng)移動狀態(tài)超過某個固定數(shù)值時，執(zhí)行下拉提示控件顯示狀態(tài)切換函數(shù)，將下拉控件狀態(tài)變成顯示狀態(tài)，以此來實(shí)現(xiàn)下拉提示的功能。

3.4.3 控件定制

Dojo雖然存在相關(guān)功能控件，但是對于APP界面的顯示并不友好，因?yàn)镈ojo為了提高適應(yīng)性，控件庫中現(xiàn)有的控件都是中規(guī)中矩的，也不會按照每個人的需求來進(jìn)行相應(yīng)實(shí)現(xiàn)，因此需要定制個人需要的控件。Dojo中為實(shí)現(xiàn)個人所需控件提供了相關(guān)框架，如“declare”“l(fā)ang”“_ItemBase”和“_TemplatedMixin”，是Dojo提供的控件腳本，載入后，根據(jù)Dojo的規(guī)則，可以實(shí)現(xiàn)定制功能。

4 系統(tǒng)設(shè)計(jì)

4.1 系統(tǒng)流程

用戶點(diǎn)擊圖標(biāo)進(jìn)入APP后，為了減弱突然打開APP時的突兀感，進(jìn)入APP后首先展示的是APP的splash界面；兩秒后，進(jìn)入登錄界面；登錄后，進(jìn)入主界面。

主界面包含3個子界面：第一個子界面，負(fù)責(zé)通知學(xué)校重大消息，包括一些熱門的新聞，每一條內(nèi)容均可點(diǎn)擊查看詳細(xì)信息。第二個子界面，是本校各個學(xué)院的顯示條目，當(dāng)用戶點(diǎn)擊相應(yīng)條目后，會進(jìn)入各個學(xué)院的消息通知界面，每個學(xué)院可以根據(jù)本學(xué)院的相關(guān)情況發(fā)布相應(yīng)消息，該學(xué)院的學(xué)生則可以通過這個來查詢所在學(xué)院發(fā)生的相關(guān)事宜。第三個子界面，是用戶個人中心，可以查詢本人相關(guān)的信息，例如正在學(xué)習(xí)的課程、關(guān)注的課程等，還有老師下發(fā)的上課通知等信息。

4.2 模塊設(shè)計(jì)及其功能

根據(jù)設(shè)計(jì)要求，系統(tǒng)分為以下幾個主要模塊：splash模塊、登錄模塊和主界面。主界面包含3個子模塊：學(xué)校消息通知模塊、學(xué)院列表模塊和個人中心模塊。

（1）splash模塊。用于啟動APP后所進(jìn)行的視覺緩沖，避免APP顯示過于突兀。在實(shí)現(xiàn)上：定義一個頁面，該頁面打開后開始計(jì)時，在某個固定時間后，跳轉(zhuǎn)到登錄頁面。

（2）登錄模塊。用戶在登錄界面可以填寫其賬號和密碼，作為進(jìn)入主界面的憑證。

（3）主界面。①學(xué)校通知模塊：在該模塊中，用戶可以瀏覽學(xué)校發(fā)生的一些熱門事件以及重要消息通知，每一條消息用戶均可以點(diǎn)擊查看詳細(xì)內(nèi)容。本模塊還具備歷史瀏覽查詢功能，用戶可以看到自己瀏覽過的消息。同時歷史瀏覽查詢界面右上角還可以查看消息通知，可以看到老師發(fā)布的一些通知，起到快速溝通的作用，方便消息的流通。②學(xué)院列表模塊：該模塊是本校各個學(xué)院的條目列表，每個條目下面都有各個學(xué)院對應(yīng)的消息通知，學(xué)校通知模塊定位的是學(xué)校級的大事件，而本模塊則由各個學(xué)院發(fā)布一些本學(xué)院相關(guān)的通知。③個人中心模塊：個人中心包括關(guān)注的課程、在學(xué)習(xí)的課程和已經(jīng)完成的課程等相關(guān)信息。成績查詢功能可以查詢學(xué)校最近發(fā)布的成績和個人的歷史成績。信息中心包括老師和學(xué)院的一些通知，方便同學(xué)了解學(xué)院最新動態(tài)。

5 結(jié)語

隨著移動互聯(lián)網(wǎng)和智能手機(jī)的普及與發(fā)展, 人們逐漸習(xí)慣使用移動應(yīng)用客戶端上網(wǎng)的方式，手機(jī)APP受到廣大用戶的追捧和喜愛，手機(jī)APP的使用群體也越來越龐大。把手機(jī)APP應(yīng)用在校園各項(xiàng)工作中，更是一種新鮮手段, 充滿著創(chuàng)新與挑戰(zhàn)。

[參考文獻(xiàn)]

[1]王暢.手機(jī)APP在高校游戲化教學(xué)中的應(yīng)用研究[J].呂梁學(xué)院學(xué)報，2016（1）：84-86.

[2]肖云鵬，劉宴兵.Android程序設(shè)計(jì)教程[M].北京：清華大學(xué)出版社，2013.

[3]張榮.Android開發(fā)與應(yīng)用[M].北京：人民郵電出版社，2014.

[4]姜翠.校園APP應(yīng)用探討[J].信息通信，2015（11）：266-267.