高明福，張?zhí)靾@

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

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

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

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

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

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

大學(xué)里存在豐富的課外活動(dòng)，但是目前，通知渠道較為狹窄，電聯(lián)和QQ群里發(fā)通知的方式會(huì)存在通知不到位的情況，使得部分同學(xué)錯(cuò)過(guò)某些精彩活動(dòng)；當(dāng)每次測(cè)試完成后，學(xué)生需要一臺(tái)能登入校園網(wǎng)的電腦，才能進(jìn)行成績(jī)查詢(xún)操作；每個(gè)學(xué)院發(fā)布通知時(shí)，學(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簡(jiǎn)介

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

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

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

3.2 開(kāi)發(fā)工具簡(jiǎn)介

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

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

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

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

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

3.3 可行性分析

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

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

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

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

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

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

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

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

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

3.4.3 控件定制

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

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

4.1 系統(tǒng)流程

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

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

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

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

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

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

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

5 結(jié)語(yǔ)

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

[參考文獻(xiàn)]

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

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

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

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