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

標籤：帶來   本地   預設   上拉   日常   調用   js調用   應用   實現   

寫在前面：

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

1、混合開發概述

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

目前已經有眾多Hybrid App開發成功應用，比如美團、愛奇藝、等知名行動裝置 App，都是採用Hybrid App開發模式。

2、行動裝置 App開發的三種方式比較

行動裝置 App開發的方式，目前主要有三種：

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

 

圖1：三種行動裝置 App開發方式

1所示，三種行動裝置 App開發方式具體比較如表2所示：

 

表2：三種行動裝置 App開發方式比較

3、混合開發應用情境

（1）折中考慮——如果企業使用 Hybrid 開發方法，就能集Native 和web兩者之所長。一方面，Native 讓開發人員可以充分利用現代行動裝置所提供的全部不同的特性和功能。另一方面，使用 Web 語言編寫的所有代碼都可以在不同的移動平台之間共用，使得開發和日常維護過程變得集中式、更簡短、更經濟高效。

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

（3）考慮未來——HTML5的可用性和功能都在迅速改進。許多分析師預測，它可能會成為開發前端 App 的預設技術。如果用 HTML 來編寫 App 的大部分代碼，並且只有在需要時才使用 Native 代碼，公司就能確保他們今天的投入在明天不會變得過時，因為 HTML 功能變得更豐富，可以滿足現代企業一系列更廣泛的移動要求。

4、混合開發架構和階層圖

混合開發結構圖

 

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功能

應用系統可以調用框架組成的工具類、訊息提示框、升級模組以及手機上常見的打電話發簡訊等功能。

5、效能最佳化

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，互動體驗更好。從效能的角度考慮，速度也更快。

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