Hybrid APP混合開發的一些經驗和總結

http://www.cnblogs.com/kingplus/p/5588339.html

寫在前面：

因爲業務須要，接觸到一個Hybrid APP混合開發的項目。當時是第一次接觸混合開發，有一些經驗和總結，歡迎各位一塊兒交流學習~

一、混合開發概述

Hybrid App主要以JS+Native二者相互調用爲主，從開發層面實現「一次開發，多處運行」的機制，成爲真正適合跨平臺的開發。Hybrid App兼具了Native App良好用戶體驗的優點，也兼具了Web App使用HTML5跨平臺開發低成本的優點。

目前已經有衆多Hybrid App開發成功應用，好比美團、愛奇藝、微信等知名移動應用，都是採用Hybrid App開發模式。

二、移動應用開發的三種方式比較

移動應用開發的方式，目前主要有三種：

• Native App： 本地應用程序（原生App）
• Web App：網頁應用程序（移動web）
• Hybrid App：混合應用程序（混合App）

 

圖1：三種移動應用開發方式

如圖1所示，三種移動應用開發方式具體比較如表2所示：

 

表2：三種移動應用開發方式比較

三、混合開發應用場景

（1）折中考慮——若是企業使用 Hybrid 開發方法，就能集Native 和web二者之所長。一方面，Native 讓開發者能夠充分利用現代移動設備所提供的所有不一樣的特性和功能。另外一方面，使用 Web 語言編寫的全部代碼均可以在不一樣的移動平臺之間共享，使得開發和平常維護過程變得集中式、更簡短、更經濟高效。

（2）內部技能——許多企業都擁有Web 開發技能。若是選擇 Hybrid 開發方法，在合適解決方案的支持下，Web 開發者只要僅僅運用 HTML、CSS 和 JavaScript 等 Web 技能，就能構建 App，同時提供 Native 用戶體驗。

（3）考慮將來——HTML5的可用性和功能都在迅速改進。許多分析師預測，它可能會成爲開發前端 App 的默認技術。若是用 HTML 來編寫 App 的大部分代碼，而且只有在須要時才使用 Native 代碼，公司就能確保他們今天的投入在明天不會變得過期，由於 HTML 功能變得更豐富，能夠知足現代企業一系列更普遍的移動要求。

四、混合開發框架和層次結構圖

混合開發結構圖

 

1）移動終端web殼（如下簡稱「殼」）：殼是使用操做系統的 API 來建立嵌入式 HTML的渲染引擎。殼主要功能是定義Android應用程序與網頁之間的接口，容許網頁中的JavaScript調用Android應用程序，提供基於web的應用程序的Android API，將Web嵌入到Android應用程序中。

2）前端交互js：包括基礎功能js和業務功能js。

3）前端適配器：適配不一樣的終端：Pad、android、ios、wap。

混合開發層次結構圖

 

1） 頁面加載

1. 頁面容器（XdjaWebView）類，是整個框架的核心和基礎，主要用來實現頁面的加載，以及對頁面加載完成後的後續操做提供支持，例如：文件下載、js支持、文件上傳，數據緩存、進度條等；
2. 頁面加載接口：對頁面的加載過程進行跟蹤；例如：頁面加載進度百分比，頁面開始加載、頁面加載出錯、頁面加載完成等

2） JS調用Android功能

1. 網頁：頁面調用js接口中的具體方法；
2. JS接口：調用android接口中一一對應的具體方法；
3. android接口：直接調用框架中集成的功能，或者經過框架接口在應用系統中自定義功能（例如，退出、返回鍵響應等)；其中升級功能的返回結果或者過程信息，能夠在客戶端中經過升級接口獲取。
4. XdjaClientHelper：若是須要將框架中的方法返回值通知給js方法，大家能夠經過XdjaClientHelper類來實現；

3）應用系統調用JS功能

應用系統經過XdjaClientHelper來實現對js功能的調用；

4） 應用系統調用HDF功能

應用系統能夠調用框架集成的工具類、消息提示框、升級模塊以及手機上常見的打電話發短信等功能。

五、性能優化

1） 單個頁面

登陸、首頁以及共用代碼（樣式文件、JS文件、頁面加載loading代碼）等放在index頁面裏。頁面展現前顯示fake頁面（過場頁面），首屏加載完後，fake頁面消失。

頁面雖然按照業務模塊分爲不一樣的頁面，可是展現的時候會在同一個頁面即index頁面展現。具體的說，須要某個功能頁面的時候將頁面以AJAX的形式請求到index頁面，使用完畢刪除。

使用一個頁面，公共的CSS和JS只會加載一次。

2）CSS、JavaScript

在本次混合開發框架開發中，CSS所有寫在一個文件裏。

CSS和Jquery Mobile的相關文件寫在index頁面頭部，其他公用JS等寫在index頁面底部。防止JS阻塞頁面加載。各業務邏輯JS寫在各業務頁面的底部。

開發完成後，CSS和JS須要進行壓縮，減小用戶使用時初次請求時間。

3） @font-face

本次混合開發中使用@font-face來實現圖標字體化，統一控制圖標的顏色和大小。

使用@font-face優勢：減小頁面因使用圖片而帶來的流量，大大縮短頁面響應時間；圖標能夠隨意改變大小和顏色，而不會致使失真。

使用時注意：全部的圖標須要是矢量的SVG格式。

使用限制：只適用於純色扁平化的圖標。背景圖等比較複雜的圖片仍然使用圖片。

4） 本地存儲LocalStorage

HTML5本地存儲LocalStorage，在混合開發中主要用來存儲最近查詢記錄等。

拿首頁最近查詢來講，用戶每次在綜合查詢中點擊一個模塊，經過LocalStorage將圖標和對應的功能名字存儲起來，若是用戶不清除，LocalStorage中的數據是一直存在本地的。下次打開應用的時候從LocalStorage中讀取最近查詢記錄等。

使用LocalStorage的好處是，不進行後臺交互，速度快。

5）異步AJAX

本次開發中多處實現都是經過使用AJAX。首先，顯示頁面時，先顯示框架，而後異步加載內容；其次，分頁功能中，先顯示部分簡項列表，上拉獲取更多內容。再次，每打開一個新功能，頁面以AJAX的形式獲取新頁面的內容並展現出來。

異步AJAX，交互體驗更好。從性能的角度考慮，速度也更快。