胡世港++田櫻

摘要：HTML5 Plus移動(dòng)App，簡(jiǎn)稱HTML5+App，是一種將HTML5+ Runtime和HTML、JS、CSS混編成APK后運(yùn)行于手機(jī)端的App，它可以通過擴(kuò)展的Javascript API調(diào)用手機(jī)的原生功能，實(shí)現(xiàn)與原生App同樣強(qiáng)大的性能。文中首先介紹了HTML5+ 技術(shù)的新特性和應(yīng)用前景，并分析比較了HTML5+ App和mobile web的區(qū)別，最后闡述了使用HTML5+技術(shù)開發(fā)高職院校教學(xué)質(zhì)量管理系統(tǒng)移動(dòng)端APP的完整過程。

關(guān)鍵詞：HTML5+； 移動(dòng)設(shè)備； HBuilder；教學(xué)質(zhì)量管理

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）21-0023-03

Research on the Development of APP Based on HTML5+ for Teaching Quality Management System

HU Shi-gang， TIAN Ying

（Academy of Information Technology， Hubei Polytechnic Institute， Xiaogan 432000，China）

Abstract： HTML5 plus mobile app， referred to as HTML5+App is a will HTML5+ runtime and HTML， JS， CSS mixed into APK after running to the end of the phone app， it can through the extended JavaScript API phone call native functions， the realization of the native app with the same powerful performance. In this paper， the new characteristics and application prospect of HTML5+ technology are introduced， and the differences between App mobile and web HTML5+ are analyzed and compared. Finally， the whole process of developing the APP of the mobile terminal of the teaching quality management system in higher vocational colleges is described.

Key words： HTML5+； mobile device； HBuilder； teaching quality management

早在2012年湖北職業(yè)技術(shù)學(xué)院就已建成一套適合高職院校的質(zhì)量管理系統(tǒng)，以實(shí)現(xiàn)高職院校教學(xué)質(zhì)量管理的信息化、數(shù)字化和無紙化，可供學(xué)校管理者、教師、在校學(xué)生、畢業(yè)生以及社會(huì)各界等使用本軟件系統(tǒng)，達(dá)到共同參與學(xué)校教學(xué)質(zhì)量管理的目的，大幅提高了質(zhì)量管理效率，并且做到了對(duì)教學(xué)質(zhì)量管理的精細(xì)化。

隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，每個(gè)學(xué)生都擁有一部智能手機(jī)，接入互聯(lián)網(wǎng)獲取信息變得觸手可及。在這個(gè)提前下，如何讓學(xué)生通過手機(jī)來隨時(shí)隨地參與教學(xué)質(zhì)量管理，對(duì)教學(xué)效果進(jìn)行評(píng)價(jià)并提出教學(xué)建議，這就需要開發(fā)一款手機(jī)APP來實(shí)現(xiàn)，于是如何開發(fā)教學(xué)質(zhì)量管理系統(tǒng)移動(dòng)端APP成為我們的研究課題，經(jīng)過資料查閱和技術(shù)分析后，我們決定采用HTML5+技術(shù)來開發(fā)移動(dòng)端APP。

1 HTML5+技術(shù)介紹

通過HTML5開發(fā)移動(dòng)App時(shí)，會(huì)發(fā)現(xiàn)HTML5很多能力不具備。為彌補(bǔ)HTML5能力的不足，在W3C中國(guó)的指導(dǎo)下成立了www.html5plus.org組織，推出HTML5+規(guī)范。HTML5+規(guī)范是一個(gè)開放規(guī)范，允許第三方瀏覽器廠商或其他手機(jī)runtime制造商實(shí)現(xiàn)。HTML5+擴(kuò)展了JavaScript對(duì)象plus，使得js可以調(diào)用各種瀏覽器無法實(shí)現(xiàn)或?qū)崿F(xiàn)不佳的系統(tǒng)能力，設(shè)備能力如攝像頭、陀螺儀、文件系統(tǒng)等，業(yè)務(wù)能力如上傳下載、二維碼、地圖、支付、語音輸入、消息推送等。

利用HBuilder的手機(jī)原生能力調(diào)用有兩個(gè)方法，一是HTML5+規(guī)范里定義了跨手機(jī)平臺(tái)的能力調(diào)用，比如二維碼、語音輸入，使用plus.barcode和plus.speech，編寫一次，可跨平臺(tái)運(yùn)行；二是Native.js技術(shù)把幾十萬原生API封裝成了js對(duì)象，通過js可以直接調(diào)ios和android的原生API，彌補(bǔ)了大量的API無法被HTML5使用的缺憾。

使用HTML5+開發(fā)的移動(dòng)App并非mobile web頁面，因?yàn)閙obile web的文件存放在web服務(wù)器上，而移動(dòng)App的文件存放在手機(jī)本地，編寫移動(dòng)App的html、js、css文件被打包到ipa或apk等原生安裝包，在手機(jī)客戶端運(yùn)行。其實(shí)，Web App仍然是B/S結(jié)構(gòu)，而移動(dòng)App是C/S結(jié)構(gòu)甚至是可以離線運(yùn)行的單機(jī)應(yīng)用。

2 HTML5+應(yīng)用架構(gòu)

早期的移動(dòng)APP必須針對(duì)iOS、Android和WP開發(fā)不同版本，導(dǎo)致開發(fā)成本過高，開發(fā)周期過長(zhǎng)，為了實(shí)現(xiàn)跨平臺(tái)移動(dòng)APP的開發(fā)，引入了HTML5+技術(shù)。HTML5+對(duì)JavaScript對(duì)象plus進(jìn)行了擴(kuò)展，從而使得Javascript就可以調(diào)用各種瀏覽器無法實(shí)現(xiàn)的原生系統(tǒng)功能，單純的Javascript 框架無法解決以上問題，plus 對(duì)象需要系統(tǒng)底層的支持。DCloud 的跨平臺(tái)HTML5+ Runtime 里已經(jīng)實(shí)現(xiàn)對(duì)plus 對(duì)象的支持，該HTML5+應(yīng)用架構(gòu)分為兩層，底層是HTML5+ Runtime，支持iOS、Android和WP智能手機(jī)操作系統(tǒng)，上層是HTML5+ Resource，包括APP配置參數(shù)manifest.json，以及html、js、css 和圖片文件。HBuilder作為HTML5+ APP的開發(fā)工具，集成了DCloud 的HTML5+ Runtime，使用HBuilder 打包APP時(shí)，可以把項(xiàng)目中的html、js、css 和HTML5+ Runtime混編打包成apk或ipa 文檔。HTML5+ Runtime 也可以理解為一種實(shí)現(xiàn)了plus 對(duì)象的、沒有地址欄的增強(qiáng)瀏覽器內(nèi)核。HTML5Plus.org制定了開放的plus 規(guī)范，基于HTML5+規(guī)范開發(fā)自己的手機(jī)端應(yīng)用，對(duì)任何公司或個(gè)人都是免費(fèi)的。HTML5+應(yīng)用架構(gòu)，如圖1所示。

3 MUI前端框架

移動(dòng)App開發(fā)者放棄HTML5的首要原因就是性能和體驗(yàn)的巨大差距，使用HTML5開發(fā)出來的App存在轉(zhuǎn)頁動(dòng)畫不忍直視，瀏覽器換頁出現(xiàn)白屏，浮動(dòng)元素容易抖動(dòng)、下拉刷新不夠流暢等問題，特別是在Android低端機(jī)上運(yùn)行效率很差，同時(shí)瀏覽器默認(rèn)控件樣式很少，很難制作出一個(gè)漂亮的控件，雖然有一些制作簡(jiǎn)單的ui框架封裝了部分空間，但是性能低下。

mui前端框架是一個(gè)可以方便開發(fā)出高性能App的框架，它有效的解決了以上問題，其定位是最接近原生體驗(yàn)的移動(dòng)App的UI框架，mui的特點(diǎn)是只為移動(dòng)App而生，界面風(fēng)格原生化，且輕、小、只涉及UI。mui框架不是jQuery，不封裝dom操作。mui框架通過調(diào)用HTML5+ Runtime的增強(qiáng)能力 plus.webview和plus.nativeUI來提升用戶體驗(yàn)。不過mui框架并不是要替代HTML5+，也不會(huì)把所有HTML5+的webview api都封裝一層。mui框架封裝了一些常用的窗體操作，不過遇到復(fù)雜窗體開發(fā)，還是要深入學(xué)習(xí)plus.webview。

mui框架由mui.min.css等樣式表、mui.min.js等Javascript文件以及mui.ttf字體文件所組成，因此，在開發(fā)HTML5+頁面時(shí)，需要使用語句引入默認(rèn)樣式表，使用