淺析混合移動應用開發模式

羅勇，趙曉霞

（四川科技職業學院互聯網+學院，四川 成都 620010）

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

1 混合移動應用開發模式的優勢

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

2 HTML5技術

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

3 混合移動應用開發模式的策略

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

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

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

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

4 結語

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

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

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

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