基于WeX5的前端開發(fā)案例設(shè)計(jì)

黃國華

摘? ?要：運(yùn)用HTML5技術(shù)進(jìn)行移動APP開發(fā)不但高效而且可以節(jié)省大量的時(shí)間和人力成本。文章通過對職校學(xué)生計(jì)算機(jī)操作水平的調(diào)查和前端開發(fā)技術(shù)的分析，突出了WeX5前端開發(fā)工具的優(yōu)勢，并結(jié)合職業(yè)院校的前端開發(fā)課程資源的建設(shè)實(shí)踐，對移動APP的開發(fā)流程及應(yīng)用推廣進(jìn)行了探究。

關(guān)鍵詞：案例設(shè)計(jì);移動APP;前端開發(fā)

隨著科技的發(fā)展與課程的深入，越來越多職業(yè)院校漸漸地發(fā)現(xiàn)，選擇正確開發(fā)工具的重要性。基于此，一款好用、易用的前端開發(fā)工具WeX5應(yīng)運(yùn)而生。它由于具有開源免費(fèi)、快速開發(fā)和模塊化設(shè)計(jì)等優(yōu)點(diǎn)，很多職業(yè)院校、高職院校，甚至本科院校都將它列為相關(guān)專業(yè)的必修課。

1? ? 概念界定

1.1? 前端開發(fā)

前端開發(fā)是指通過HTML，層疊樣式表（Cascading Style Sheets，CSS）及JavaScript以及衍生出來的各種技術(shù)、框架、解決方案，來實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。

1.2? 原生APP

原生APP（Native APP）是一種基于智能手機(jī)操作系統(tǒng)（如iOS，Android，WP）并使用官方推薦的方式進(jìn)行編寫運(yùn)行的應(yīng)用程序。一般使用的開發(fā)語言為Java，C++，Objective-C。

1.3? Hybrid? APP

混合模式（Hybrid）APP是指利用網(wǎng)頁語言與程序語言或框架進(jìn)行編寫運(yùn)行的應(yīng)用程序。Hybrid APP兼具Native APP里良好用戶交互體驗(yàn)的優(yōu)勢，又能跨平臺運(yùn)行。

2? ? 職校學(xué)生計(jì)算機(jī)操作水平的調(diào)查

現(xiàn)在的職校學(xué)生幾乎每人一臺智能手機(jī)，但由于職校學(xué)生的生源普遍較差，紀(jì)律性、自覺性都比較弱，在課堂上玩手機(jī)已經(jīng)成為職校學(xué)生的常態(tài)，這對正常的課堂教學(xué)秩序影響很大。

調(diào)查結(jié)果顯示：26%的學(xué)生學(xué)習(xí)目標(biāo)不明確，升學(xué)的壓力不大，沒興趣學(xué);36%的學(xué)生認(rèn)為自己操作水平不高，沒信心學(xué);38%的學(xué)生認(rèn)為自己愿意嘗試去學(xué)習(xí)移動APP開發(fā)。

職校學(xué)生雖然升學(xué)的壓力不大，自律性較低，但喜歡嘗試接觸新鮮事物，而且極度渴望得到肯定，享受成就感。如果能有一款難度低、易上手，能在短期內(nèi)看到相關(guān)成果的前端開發(fā)工具，提高學(xué)生學(xué)習(xí)的主觀能動性，便可以達(dá)到事半功倍的效果。

3? ? WeX5工具

WeX5是北京起步科技公司推出的一款開源、免費(fèi)、跨端的開發(fā)工具。它具有可視化、快速開發(fā)、跨端運(yùn)行、開源免費(fèi)等優(yōu)點(diǎn)。

3.1? 快速開發(fā)

WeX5基于Eclipse IDE可視化環(huán)境，即所見即所得，能以向?qū)Щ?、模塊化形式快速開發(fā)，在開發(fā)工具上能將開發(fā)、編程、調(diào)試、打包進(jìn)行一體化高度集成，代碼提示、真機(jī)調(diào)試，開發(fā)者使用起來非常方便而且并不需要原生開發(fā)經(jīng)驗(yàn)即可快速上手。

3.2? 跨端運(yùn)行

WeX5支持Hybrid混合開發(fā)，能進(jìn)行Android APP開發(fā)，iOS APP開發(fā)、Web APP開發(fā)，省時(shí)省力，一次開發(fā)，多端運(yùn)行。

3.3? 開源免費(fèi)

WeX5遵守Apache開源協(xié)議，完全免費(fèi)，全套框架、組件、原生代碼隨意用，無限制。

3.4? 標(biāo)準(zhǔn)擴(kuò)展

WeX5前端完全恪守HTML5+CSS3+JS標(biāo)準(zhǔn)，使用Reurirejs，Jquery和Bootstrap技術(shù)，內(nèi)置支持大量豐富的UI組件，采用業(yè)界主流Phonegap/Cordova后端，支持所有主流技術(shù)和平臺（Java，Node，PHP，.NET等），同時(shí)，也支持云應(yīng)用程序接口（Application Programming Interface，API）、一鍵云部署以及第三方的UI或資源。

4? ? 基于WeX5的前端開發(fā)案例設(shè)計(jì)

4.1? 案例選擇

隨著經(jīng)濟(jì)的高速發(fā)展，很多家庭經(jīng)濟(jì)較富裕，加上現(xiàn)在的職校生很多都是獨(dú)生子女，家長對其要求一一滿足，慢慢地讓學(xué)生養(yǎng)成貪圖享受、花錢不節(jié)制的習(xí)慣，甚少關(guān)心錢花在何處，是否物有所值。

職業(yè)院校有別于其他中小學(xué)，它既重視學(xué)生所學(xué)技能，也注重校園氛圍，經(jīng)常會進(jìn)行集體活動，需要一定的經(jīng)濟(jì)花費(fèi)。班費(fèi)是班主任工作中的財(cái)力資源， 它是指以貨幣形式表現(xiàn)， 專供班級使用的經(jīng)費(fèi)。班費(fèi)的出現(xiàn)在一定程度上能解決上述問題，但學(xué)生平時(shí)花錢不節(jié)制、不記賬、怕麻煩，使得班費(fèi)的使用沒人監(jiān)督，而且班費(fèi)問題比較敏感，學(xué)校不能管、老師不給管，如何讓學(xué)生有序管理班費(fèi)一直是個(gè)讓人頭痛不已的問題[1]。如果有一個(gè)工具軟件能讓學(xué)生隨手記賬、隨時(shí)查賬，實(shí)時(shí)監(jiān)控每一筆班費(fèi)的收支明細(xì)，是否會對他們有所幫助？鑒于此，筆者將設(shè)計(jì)一款與記賬查賬相關(guān)的移動APP。

4.2? 需求分析

“記賬本”APP面向的對象是需要記賬查賬的職業(yè)院校學(xué)生。他們使用APP的目的可以簡單地認(rèn)為就是進(jìn)行手工記賬，加強(qiáng)對班費(fèi)的監(jiān)督。針對他們的這些特點(diǎn)，這款A(yù)PP主要使用“不同角色、不同權(quán)限”的形式進(jìn)行明確分工，要求在規(guī)定的時(shí)間內(nèi)對每一筆班費(fèi)的收支明細(xì)和去向作好相關(guān)的記錄和上傳相關(guān)的憑證單據(jù)，并且能生成相關(guān)的詳細(xì)賬單和自動計(jì)算結(jié)余，幫助他們實(shí)時(shí)掌控班費(fèi)的相關(guān)動向。

4.3? 開發(fā)流程

針對上述的需求，以“記賬、查賬”為核心內(nèi)容的手機(jī)APP應(yīng)用開發(fā)流程如圖1所示。

圖1? 手機(jī)APP應(yīng)用開發(fā)流程

（1）開發(fā)前準(zhǔn)備工作。通過問卷調(diào)查進(jìn)行收集與整理學(xué)生的意見需求，以及通過相關(guān)軟件將圖片處理成APP工具可識別的文檔格式和類型，作為素材備用。同時(shí)，將收集整理匯總后的詳細(xì)需求分別設(shè)計(jì)好相應(yīng)的UI，首次幣發(fā)行（Initial Coin Offering，ICO）和MySQL數(shù)據(jù)庫。

（2）啟動工具軟件。選擇一款操作簡便、易上手的APP開發(fā)工具，啟動工具軟件。本APP開發(fā)采用面向國內(nèi)中高職院校Hybrid開發(fā)的北京起步科技WeX5開發(fā)工具。

（3）導(dǎo)入素材。通過平臺的素材管理模塊，對前期的素材進(jìn)行批量導(dǎo)入到WeX5工具軟件。

（4）布局與編碼。在WeX5工具軟件中根據(jù)不同的需求選擇合適的界面模板，加入素材內(nèi)容，按實(shí)際的功能調(diào)整頁面布局與代碼編寫。

（5）打包生成應(yīng)用。通過WeX5工具軟件的模型編譯，用戶可以借助WeX5工具軟件集成的Chrome瀏覽器進(jìn)行本地調(diào)試，所有功能調(diào)試成功后，就能按向?qū)崾具M(jìn)行打包，生成用戶可以掃碼下載的應(yīng)用軟件[2]。

（6）發(fā)布與部署。發(fā)布時(shí)可選擇平臺的一鍵云部署，省時(shí)省力，也可以按具體的需要和相關(guān)的操作自行配置第三方服務(wù)器。

4.4? 應(yīng)用推廣

APP應(yīng)用開發(fā)完成后，分為學(xué)生、教師、系統(tǒng)管理員3種角色，各角色的功能界面如圖2所示

圖2? APP各角色的功能界面

（1）由于“記賬本”APP的使用者是職校的在校學(xué)生，當(dāng)中需要一名學(xué)生來記錄所有班費(fèi)的動向，同時(shí)，在使用過程中需要有同學(xué)、班主任老師的監(jiān)督。班主任老師與其他同學(xué)通過APP可清楚了解本班的班費(fèi)收支情況，真正實(shí)現(xiàn)公開、透明，隨時(shí)隨地查賬。

（2）“系統(tǒng)管理員”主要負(fù)責(zé)學(xué)生和教師信息的審核與維護(hù)，更重要的是要保障數(shù)據(jù)的完整性，要不定期地對系統(tǒng)的數(shù)據(jù)進(jìn)行備份。

APP開發(fā)制作完成后，想要充分發(fā)揮其作用就要進(jìn)行應(yīng)用的推廣，筆者通過“草料二維碼”把APP應(yīng)用的下載或打開方式分別做成不同版本的二維碼，通過在全校的不同場合上對學(xué)生、教師進(jìn)行宣傳，供師生免費(fèi)使用。師生們只需要根據(jù)自己的手機(jī)類型分別掃描不同版本的二維碼，即可下載APP安裝在手機(jī)上或直接掃碼打開APP，只要有網(wǎng)絡(luò)就能通過自己的賬號密碼登錄APP進(jìn)行記賬或查賬。

5? ? 結(jié)語

充分利用云計(jì)算、大數(shù)據(jù)等信息化手段，開發(fā)出更多高效、實(shí)用性強(qiáng)的APP工具，將在校園領(lǐng)域有著廣闊的應(yīng)用前景。

[參考文獻(xiàn)]

[1]陳志峰.班主任工作中的班費(fèi)問題研究[J].太原城市職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2010（10）：105-106.

[2]山少男.基于WeX5的Android系統(tǒng)記賬本HTML5 APP開發(fā)與設(shè)計(jì)[J].電腦編程技巧與維護(hù)，2017（12）：47-48.

Design of front-end development case based on WeX5：

taking the “Bookkeeping” APP as an example

Huang Guohua

（School of Business and Economics of Dongguan， Dongguan 523106， China）

Abstract：Mobile APP development using Html5 technology is not only efficient but also saves a lot of time and labor costs. Through the investigation of computer operation level and the analysis of front-end development technology of secondary vocational students， this paper highlights the advantages of WeX5 front-end development tools， and combines the construction practice of front-end development curriculum resources of secondary vocational schools to explore the development process and application of mobile APP.

Key words：case design; mobile APP; front-end development