淺析混合移動應(yīng)用開發(fā)模式

羅勇，趙曉霞

（四川科技職業(yè)學(xué)院互聯(lián)網(wǎng)+學(xué)院，四川 成都 620010）

伴隨社會移動化的發(fā)展，現(xiàn)國內(nèi)各行各業(yè)紛紛推出自身官方移動應(yīng)用，一方面以便于用戶使用，另一方面也為行業(yè)的發(fā)展拓展了新道路。在進(jìn)行移動應(yīng)用的開發(fā)過程當(dāng)中，開發(fā)人員通常會采取原生開發(fā)或是混合開發(fā)模式，其中原生開發(fā)模式的技術(shù)相對成熟，且用戶體驗較好，運行效率較高，但原生開發(fā)模式的開發(fā)門檻較高，且因不同平臺間的差異性，開發(fā)跨度較大，而難以實現(xiàn)綜合開發(fā)。而混合開發(fā)模式因具開發(fā)門檻低，可跨平臺開發(fā)等優(yōu)勢成為當(dāng)前移動應(yīng)用開發(fā)的主流模式。

1 混合移動應(yīng)用開發(fā)模式的優(yōu)勢

目前，應(yīng)用于移動應(yīng)用開發(fā)的模式主要有原生開發(fā)模式、Web開發(fā)模式和混合開發(fā)模式，其中原生開發(fā)模式是指于智能終端操作系統(tǒng)基礎(chǔ)上，利用平臺特定原生程序進(jìn)行移動應(yīng)用程序編寫的應(yīng)用開發(fā)模式，其具備完全設(shè)備訪問能力，可訪問移動終端所有功能，運行速度較快，性能較好，用戶體驗較佳，且支持圖形和動畫，但其開發(fā)門檻較高，范圍限制較大，用戶需手動下載更新，內(nèi)容及應(yīng)用商店有限。Web開發(fā)模式是指基于移動終端瀏覽器功能，利用統(tǒng)一標(biāo)準(zhǔn)的HTML、JavaScript、CSS等技術(shù)實施應(yīng)用開發(fā)的開發(fā)模式，其適應(yīng)范圍較廣，可應(yīng)用于所有智能終端應(yīng)用的開發(fā)，開發(fā)成本較低，可實現(xiàn)跨平臺使用，且部署方便，無需升級，但使用性能體驗較差，圖形及動畫效果不佳，無法利用應(yīng)用下載盈利，必須聯(lián)網(wǎng)，且終端設(shè)備訪問受限，功能無法完全實現(xiàn)。混合移動應(yīng)用開發(fā)模式是指在進(jìn)行移動應(yīng)用的開發(fā)時，同時處用程序語言及網(wǎng)頁語言實施應(yīng)用的開發(fā)，其兼顧原生開發(fā)及Web開發(fā)的特點和優(yōu)勢，使應(yīng)用既具完全設(shè)備訪問能力，保障了用戶的體驗度，同時又打破了各平臺間的限制，實現(xiàn)了跨平臺開發(fā)，是當(dāng)前移動應(yīng)用的主要開發(fā)模式。

2 HTML5技術(shù)

混合移動應(yīng)用開發(fā)模式所使用的技術(shù)有很多，如 HTML、jQuery Mobile、PhoneGap、JavaScript、CSS3等，其中較為常用的有HTML、PhoneGap、JavaScript、CSS3。采取混合模式進(jìn)行移動應(yīng)用的開發(fā)，就其本質(zhì)而言，就是在移動設(shè)備上呈現(xiàn)移動Web頁面，而移動Web頁面的開發(fā)則是利用HTML5來實現(xiàn)的。HTML5包括HTML、CSS和JavaScript，可提升網(wǎng)頁的主義結(jié)構(gòu)水平，賦予網(wǎng)頁一些新功能。HTML5的支持范圍較廣，不僅包括較老版本的瀏覽器IE6、IE7，而且還包括現(xiàn)在主流瀏覽器，如360、獵豹等，尤其支持移動設(shè)備。HTML5對于移動Web頁面具良好支持，其主要體現(xiàn)在以下方面：第一，HTML5的各類標(biāo)簽屬性均可進(jìn)行自定義，并可于屬性當(dāng)中修改對應(yīng)標(biāo)簽的標(biāo)識、功能、圖標(biāo)、運動方式等，以有效控制頁面元素，同時使得代碼更加精簡；第二，CSS3的Media Queries可使Web頁面在面對分辨率不同的屏幕時能進(jìn)行自動改變，以使Web頁面更好地呈現(xiàn)出各類移動設(shè)備上，從而提高用戶體驗；第三，于webkit基礎(chǔ)上所引入的transform屬性可實現(xiàn)Web頁面的平移、放置、縮放，使頁面切換效果近似于原生開發(fā)；第四，HTML5多數(shù)元素均支持Drag及Drop，用戶可使用任何移動設(shè)備瀏覽Web頁面，尤其是近些年來的觸摸設(shè)備，使用戶獲得更好體驗。

3 混合移動應(yīng)用開發(fā)模式的策略

以下以國家數(shù)字移動圖書館項目為例，探討了混合移動應(yīng)用開發(fā)模式的策略。電子圖書館借閱系統(tǒng)主為移動用戶提供移動終端電子書籍閱讀服務(wù)，系統(tǒng)本身在《簡單的面向圖書館數(shù)字內(nèi)容版權(quán)管理規(guī)范》的基礎(chǔ)上制定了電子書的借閱歸還機(jī)制，并限制了用戶的電子書下載量和閱讀時限，有效保障了書籍作者的權(quán)益。系統(tǒng)的可擴(kuò)展性較強(qiáng)，并支持各類終端、各類數(shù)據(jù)類型電子書籍閱讀，如文字書、音頻書、視頻書等。通過移動終端，用戶可隨時隨地借閱自己所需電子出版物。

（1）產(chǎn)品功能介紹。國家數(shù)字移動圖書館項目主要開發(fā)了五個模塊，具體如下：①圖書閱讀模塊：此模塊主要是展現(xiàn)用戶經(jīng)借閱和購買的圖書緩存，查看圖書功能的實現(xiàn)是以PhoneGap插件方式開發(fā)的，展示功能則是用HTML+CSS3實現(xiàn)的，這樣在進(jìn)行展示時就避免了需對各類機(jī)型及操作系統(tǒng)進(jìn)行適配的問題。圖書閱讀功能是以本地插件實現(xiàn)，可展現(xiàn)翻頁效果、加快圖書加載速度、記錄用戶閱讀進(jìn)度等，以使用戶獲得良好體驗。②多媒體信息瀏覽模塊：此模塊為組成系統(tǒng)的主要模塊，也是用戶對多媒體資源進(jìn)行查看和瀏覽的主要方式，包括四大子模塊：圖書分類瀏覽、熱門推薦瀏覽、圖書資源瀏覽和音樂視頻瀏覽，其中圖書分類瀏覽將系統(tǒng)各類圖書進(jìn)行了分類，用戶可通過點擊分類瀏覽相應(yīng)的圖書資源；熱門推薦瀏覽依用戶瀏覽記錄和喜好以及當(dāng)前的熱門為用戶展示了類似的圖書資源；圖書資源瀏覽為用戶展示了系統(tǒng)中的所有圖書資源；音樂視頻瀏覽則為用戶展示了音樂視頻資源，用戶可點擊試聽、觀看并下載，這些模塊當(dāng)中瀏覽信息的展示均是利用HTML5的方式進(jìn)行開發(fā)的。③圖書借閱模塊：圖書借閱模塊是以HTML5的方式進(jìn)行開發(fā)的，結(jié)合PhoneGap的FileAPI及LocalStorageAPI實現(xiàn)購買功能，支付則是通過與Web服務(wù)接口進(jìn)行連接，以支付寶形式實現(xiàn)，從而有效控制支付功能，這樣支付則處于Web服務(wù)器端，使支付更加便利，也保證了支付的安全性。④個人信息管理模塊：此模塊主用于記錄用戶個人信息，以免用戶每次進(jìn)入應(yīng)用都需重新登陸，同時還會記錄用戶所借閱和購買的圖書、瀏覽信息、閱讀進(jìn)度等。⑤音樂視頻播放模塊：此模塊主用于播放本地音樂視頻資源，是以HTML5的Audio標(biāo)簽特性配合CSS3及JavaScript以實現(xiàn)音樂播放的控制，這不僅易于開發(fā)，而且結(jié)構(gòu)美觀，適用于各平臺。同時利用PhoneGap Media API的JavaScript對本地API進(jìn)行控制，而無需自行開發(fā)本地API，有利用戶體驗的提高，并避免了視頻播放過程中可能會出現(xiàn)卡頓的情況。

（2）開發(fā)策略。國家數(shù)字移動圖書館項目應(yīng)用首次開發(fā)是采取的PhoneGap框架，頁面顯示利用的是HTML5輔以CSS3和Jquery進(jìn)行編寫，圖書閱讀采取的是原生插件開發(fā)模式，影音播放則是采取HTML5的Audio和Video元素實現(xiàn)。此開發(fā)模式的用戶體驗較差，頁面跳轉(zhuǎn)會卡頓、切換導(dǎo)航視圖會白屏。第二版的國家數(shù)字移動圖書館項目應(yīng)用做了較大的改善，舍棄了很多PhoneGap插件功能，僅保留了必要插件，且使用了系統(tǒng)自帶的Web View，這樣就避免了在加載頁面時需對內(nèi)部特殊部件進(jìn)行初始化的過程，配以原生提示框，有效提高了用戶體驗。圖書閱讀仍采取原生插件開發(fā)方式，這也有利于提高用戶閱讀體驗。經(jīng)改善后，新應(yīng)用支持手勢滑動，且無卡頓情況，白屏也消失了，頁面跳轉(zhuǎn)更流暢。

（3）混合開發(fā)模式的使用。混合開發(fā)模式的使用相對簡單，主要是對Web View集成、Web頁面加載及原生和HTML內(nèi)容交叉鏈接等進(jìn)行處理即可，其關(guān)鍵在于尋找最適用于采取原生代碼進(jìn)行開發(fā)的部分及適合利用HTML的Web View進(jìn)行開發(fā)的部分。一般地，頁面導(dǎo)航、返回按鍵這類相對簡單的功能即可利用原生代碼進(jìn)行開發(fā)，以盡量提高用戶體驗，部分不太適合利用HTML進(jìn)行開發(fā)，或是利用HTML進(jìn)行開發(fā)也無法完善的地方，也可利用原生代碼進(jìn)行開發(fā)，如視頻播放、綻放圖片等。而系統(tǒng)中的多數(shù)功能都集中于信息展示當(dāng)中，如Lis View展示條目、詳細(xì)信息的展示等，這些功能即可利用Web View通過對Web HTML網(wǎng)頁進(jìn)行加載的方式來進(jìn)行開發(fā)，因此類功能基本不會與用戶產(chǎn)生交互，多數(shù)在于信息展示。采取混合開發(fā)模式實現(xiàn)移動應(yīng)用的開發(fā)，其難度較低，且工作量較少，同時BUG極易修復(fù)，有效提高了移動應(yīng)用開發(fā)的效率和質(zhì)量?；旌祥_發(fā)模式下的移動應(yīng)用，其多數(shù)代碼邏輯都處Web服務(wù)器端，開發(fā)人員可直接連接Web服務(wù)器對代碼進(jìn)行修改并發(fā)布，而無需經(jīng)各平臺應(yīng)用商店的審批，大大縮短了修復(fù)BUG或是添加其他功能的時間和效率。因此，采取此模式進(jìn)行開發(fā)的移動應(yīng)用可實現(xiàn)連續(xù)部署，兼具Web移動應(yīng)用和原生應(yīng)用雙方特征及優(yōu)勢。但要注意的是，混合開發(fā)模式并不適應(yīng)用于所有應(yīng)用的開發(fā)，如3D游戲，相比于混合開發(fā)模式，采取原生開發(fā)方式開發(fā)3D游戲的效果更佳，用戶的游戲體驗也更好。而針對那種重視信息處理的移動應(yīng)用，如本文所提到的數(shù)字圖書館，則可采取混合開發(fā)模式，這樣既可節(jié)約開發(fā)成本，同時也可提高開發(fā)質(zhì)量及效率。

4 結(jié)語

總而言之，混合移動應(yīng)用開發(fā)模式是當(dāng)前移動應(yīng)用的主流開發(fā)模式，其門檻低、具跨平臺優(yōu)勢，實用且可伴隨科學(xué)技術(shù)的發(fā)展而不斷得到改進(jìn)，極適用于移動應(yīng)用的開發(fā)。但在實際應(yīng)用過程當(dāng)中，因所開發(fā)的應(yīng)用功能及性質(zhì)有所不同，其內(nèi)部細(xì)節(jié)仍存在較大差異。為此，相關(guān)技術(shù)人員應(yīng)就具體的功能和性質(zhì)選擇具有針對性地開發(fā)方式，靈活運用，以實現(xiàn)最佳開發(fā)效果，使移動應(yīng)用的設(shè)計與制作能達(dá)到預(yù)期，從而促進(jìn)移動應(yīng)用行業(yè)的快速發(fā)展。

[1]姜翠.混合開發(fā)模式在移動校園APP中的應(yīng)用研究[J].無線互聯(lián)科技,2016,(01):17-19.

[2]杜帥,鄂海紅,許可.混合移動應(yīng)用開發(fā)模式的新策略[J].軟件,2015,36(06):12-17.

[3]徐隆龍,李瑩,白靜.移動混合開發(fā)框架[J].計算機(jī)系統(tǒng)應(yīng)用,2014,23(12):53-59.