Hybrid App主要以JS Native兩者相互調(diào)用為主，從開發(fā)層面實(shí)現(xiàn)“一次開發(fā)，多處運(yùn)行”的機(jī)制，成為真正適合跨平臺(tái)的開發(fā)。Hybrid App兼具了Native App良好用戶體驗(yàn)的優(yōu)勢(shì)，也兼具了Web App使用HTML5跨平臺(tái)開發(fā)低成本的優(yōu)勢(shì)。
目前已經(jīng)有眾多Hybrid App開發(fā)成功應(yīng)用，比如美團(tuán)、愛奇藝、微信等知名移動(dòng)應(yīng)用，都是采用Hybrid App開發(fā)模式。
2、移動(dòng)應(yīng)用開發(fā)的三種方式比較
移動(dòng)應(yīng)用開發(fā)的方式，目前主要有三種：
-
Native App： 本地應(yīng)用程序（原生App）
Web App：網(wǎng)頁(yè)應(yīng)用程序（移動(dòng)web）
Hybrid App：混合應(yīng)用程序（混合App）
圖1：三種移動(dòng)應(yīng)用開發(fā)方式
如圖1所示，三種移動(dòng)應(yīng)用開發(fā)方式具體比較如表2所示：
表2：三種移動(dòng)應(yīng)用開發(fā)方式比較
3、混合開發(fā)應(yīng)用場(chǎng)景
（1）折中考慮——如果企業(yè)使用 Hybrid 開發(fā)方法，就能集Native 和web兩者之所長(zhǎng)。一方面，Native 讓開發(fā)者可以充分利用現(xiàn)代移動(dòng)設(shè)備所提供的全部不同的特性和功能。另一方面，使用 Web 語(yǔ)言編寫的所有代碼都可以在不同的移動(dòng)平臺(tái)之間共享，使得開發(fā)和日常維護(hù)過程變得集中式、更簡(jiǎn)短、更經(jīng)濟(jì)高效。
（2）內(nèi)部技能——許多企業(yè)都擁有Web 開發(fā)技能。如果選擇 Hybrid 開發(fā)方法，在合適解決方案的支持下，Web 開發(fā)者只要僅僅運(yùn)用 HTML、CSS 和 JavaScript 等 Web 技能，就能構(gòu)建 App，同時(shí)提供 Native 用戶體驗(yàn)。
（3）考慮未來(lái)——HTML5的可用性和功能都在迅速改進(jìn)。許多分析師預(yù)測(cè)，它可能會(huì)成為開發(fā)前端 App 的默認(rèn)技術(shù)。如果用 HTML 來(lái)編寫 App 的大部分代碼，并且只有在需要時(shí)才使用 Native 代碼，公司就能確保他們今天的投入在明天不會(huì)變得過時(shí)，因?yàn)?HTML 功能變得更豐富，可以滿足現(xiàn)代企業(yè)一系列更廣泛的移動(dòng)要求。
4、混合開發(fā)框架和層次結(jié)構(gòu)圖
混合開發(fā)結(jié)構(gòu)圖
1）移動(dòng)終端web殼（以下簡(jiǎn)稱“殼”）：殼是使用操作系統(tǒng)的 API 來(lái)創(chuàng)建嵌入式 HTML的渲染引擎。殼主要功能是定義Android應(yīng)用程序與網(wǎng)頁(yè)之間的接口，允許網(wǎng)頁(yè)中的JavaScript調(diào)用Android應(yīng)用程序，提供基于web的應(yīng)用程序的Android API，將Web嵌入到Android應(yīng)用程序中。
2）前端交互js：包括基礎(chǔ)功能js和業(yè)務(wù)功能js。
3）前端適配器：適配不同的終端：Pad、android、ios、wap。
混合開發(fā)層次結(jié)構(gòu)圖
1） 頁(yè)面加載
-
頁(yè)面容器（XdjaWebView）類，是整個(gè)框架的核心和基礎(chǔ)，主要用來(lái)實(shí)現(xiàn)頁(yè)面的加載，以及對(duì)頁(yè)面加載完成后的后續(xù)操作提供支持，例如：文件下載、js支持、文件上傳，數(shù)據(jù)緩存、進(jìn)度條等；
頁(yè)面加載接口：對(duì)頁(yè)面的加載過程進(jìn)行跟蹤；例如：頁(yè)面加載進(jìn)度百分比，頁(yè)面開始加載、頁(yè)面加載出錯(cuò)、頁(yè)面加載完成等
2） JS調(diào)用Android功能
-
網(wǎng)頁(yè)：頁(yè)面調(diào)用js接口中的具體方法；
JS接口：調(diào)用android接口中一一對(duì)應(yīng)的具體方法；
android接口：直接調(diào)用框架中集成的功能，或者通過框架接口在應(yīng)用系統(tǒng)中自定義功能（例如，退出、返回鍵響應(yīng)等)；其中升級(jí)功能的返回結(jié)果或者過程信息，可以在客戶端中通過升級(jí)接口獲取。
XdjaClientHelper：如果需要將框架中的方法返回值通知給js方法，你們可以通過XdjaClientHelper類來(lái)實(shí)現(xiàn)；
3）應(yīng)用系統(tǒng)調(diào)用JS功能
應(yīng)用系統(tǒng)通過XdjaClientHelper來(lái)實(shí)現(xiàn)對(duì)js功能的調(diào)用；
4） 應(yīng)用系統(tǒng)調(diào)用HDF功能
應(yīng)用系統(tǒng)可以調(diào)用框架集成的工具類、消息提示框、升級(jí)模塊以及手機(jī)上常見的打電話發(fā)短信等功能。
5、性能優(yōu)化
1） 單個(gè)頁(yè)面
登錄、首頁(yè)以及共用代碼（樣式文件、JS文件、頁(yè)面加載loading代碼）等放在index頁(yè)面里。頁(yè)面展示前顯示fake頁(yè)面（過場(chǎng)頁(yè)面），首屏加載完后，fake頁(yè)面消失。
頁(yè)面雖然按照業(yè)務(wù)模塊分為不同的頁(yè)面，但是展示的時(shí)候會(huì)在同一個(gè)頁(yè)面即index頁(yè)面展示。具體的說(shuō)，需要某個(gè)功能頁(yè)面的時(shí)候?qū)㈨?yè)面以AJAX的形式請(qǐng)求到index頁(yè)面，使用完畢刪除。
使用一個(gè)頁(yè)面，公共的CSS和JS只會(huì)加載一次。
2）CSS、JavaScript
在本次混合開發(fā)框架開發(fā)中，CSS全部寫在一個(gè)文件里。
CSS和Jquery Mobile的相關(guān)文件寫在index頁(yè)面頭部，其余公用JS等寫在index頁(yè)面底部。防止JS阻塞頁(yè)面加載。各業(yè)務(wù)邏輯JS寫在各業(yè)務(wù)頁(yè)面的底部。
開發(fā)完成后，CSS和JS需要進(jìn)行壓縮，減少用戶使用時(shí)初次請(qǐng)求時(shí)間。
3） @font-face
本次混合開發(fā)中使用@font-face來(lái)實(shí)現(xiàn)圖標(biāo)字體化，統(tǒng)一控制圖標(biāo)的顏色和大小。
使用@font-face優(yōu)點(diǎn)：減少頁(yè)面因使用圖片而帶來(lái)的流量，大大縮短頁(yè)面響應(yīng)時(shí)間；圖標(biāo)可以隨意改變大小和顏色，而不會(huì)導(dǎo)致失真。
使用時(shí)注意：所有的圖標(biāo)需要是矢量的SVG格式。
使用限制：只適用于純色扁平化的圖標(biāo)。背景圖等比較復(fù)雜的圖片仍然使用圖片。
4） 本地存儲(chǔ)LocalStorage
HTML5本地存儲(chǔ)LocalStorage，在混合開發(fā)中主要用來(lái)存儲(chǔ)最近查詢記錄等。
拿首頁(yè)最近查詢來(lái)說(shuō)，用戶每次在綜合查詢中點(diǎn)擊一個(gè)模塊，通過LocalStorage將圖標(biāo)和對(duì)應(yīng)的功能名字存儲(chǔ)起來(lái)，如果用戶不清除，LocalStorage中的數(shù)據(jù)是一直存在本地的。下次打開應(yīng)用的時(shí)候從LocalStorage中讀取最近查詢記錄等。
使用LocalStorage的好處是，不進(jìn)行后臺(tái)交互，速度快。
5）異步AJAX
本次開發(fā)中多處實(shí)現(xiàn)都是通過使用AJAX。首先，顯示頁(yè)面時(shí)，先顯示框架，然后異步加載內(nèi)容；其次，分頁(yè)功能中，先顯示部分簡(jiǎn)項(xiàng)列表，上拉獲取更多內(nèi)容。再次，每打開一個(gè)新功能，頁(yè)面以AJAX的形式獲取新頁(yè)面的內(nèi)容并展示出來(lái)。
異步AJAX，交互體驗(yàn)更好。從性能的角度考慮，速度也更快。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
