目錄

• 1 概述

• 2 Cordova 平臺(tái)
• 3 Web 發(fā)展史
  • 3.1 靜態(tài)網(wǎng)頁
  • 3.2 動(dòng)態(tài)網(wǎng)頁
  • 3.3 客戶端異步交互
  • 3.4 開發(fā)效率提速階段
  • 3.5 移動(dòng)平臺(tái)
• 4 Hybrid App 分類一
  • 4.1 多View混合型
  • 4.2 單View混合型
  • 4.3 Web主體型
  • 4.4 多主體共存型（靈活型）
• 5 Hybrid App 分類二
  • 5.1 重架構(gòu)混合模式
  • 5.2 輕架構(gòu)混合模式
  • 5.3 Hybrid 優(yōu)勢
  • 5.4 Hybrid 劣勢
• 6 Hybrid 平臺(tái)調(diào)查
• 7 Hybrid App 調(diào)試方法
  • 7.1 調(diào)試方法匯總
  • 7.2 推薦工作流程 & 調(diào)試方法

1 概述

回顧歷史，展望未來。認(rèn)真分析 Hybrid 的誕生原因纫骑、發(fā)展經(jīng)歷嫉你、才能更好的預(yù)測 Hybrid 開發(fā)的未來前景。

問題 產(chǎn)生 技術(shù)搅荞，無法解決問題的技術(shù)是不存在的红氯。

提到 Hybrid 開發(fā)框咙，必然要提到 Web，首先讓我們看一看Web發(fā)展史痢甘。

• 靜態(tài)網(wǎng)頁:展示內(nèi)容喇嘱。

• 動(dòng)態(tài)網(wǎng)頁:支持頁面與服務(wù)器交互，構(gòu)建了現(xiàn)在蓬勃發(fā)展的互聯(lián)網(wǎng)的基礎(chǔ)塞栅。

• 客戶端異步交互:解決了整個(gè)頁面刷新的問題者铜，優(yōu)化了用戶體驗(yàn)。

• 開發(fā)效率提速階段:各種功能豐富的第三方JS庫迅速崛起构蹬，提高工作效率王暗。

• 移動(dòng)平臺(tái):智能手機(jī)飛速發(fā)展，需要快速構(gòu)建App庄敛，滿足市場需求俗壹，Hybrid作為一種解決方案應(yīng)運(yùn)而生。

• Hybrid分類
  Hybrid時(shí)間點(diǎn)從2012年開始藻烤，陸續(xù)出現(xiàn)了三種Hybrid模式 : 多View混合型绷雏、單View混合型、Web主體性怖亭；按照另一種分類方式分為 : 重架構(gòu)混合模式涎显、輕架構(gòu)混合模式。
  其中兴猩，多View混合型期吓、單View混合型屬于重架構(gòu)混合模式，Web主體性屬于輕架構(gòu)混合模式倾芝。
  當(dāng)前讨勤，最流行的是Web主體性。

• Hybrid優(yōu)勢

• 跨平臺(tái)晨另、快速發(fā)布潭千、高效開發(fā)。

• Hybrid劣勢

• 達(dá)不到原生平臺(tái)的流暢體驗(yàn)借尿。

2 Cordova 平臺(tái)

當(dāng)前所有的Hybrid框架都是基于Cordova平臺(tái)進(jìn)行JS跟原生通訊刨晴。
因此Cordova平臺(tái)支持的調(diào)試方式也是通用的。

• Cordova優(yōu)質(zhì)博客列表

• 傳智播客

• 極客學(xué)院

• Cordova教程博客

• Cordova 概述

• Cordova開發(fā)前的準(zhǔn)備工作

• 使用Cordova命令行界面(CLI)

• Cordova應(yīng)用解析

• Cordova開發(fā)技巧

• 開發(fā)Android平臺(tái)的Cordova應(yīng)用

• 使用PhoneGap Build

• 使用Cordova API開發(fā)(上)

• 使用Cordova API開發(fā)(下)

• 創(chuàng)建Cordova插件

• 構(gòu)建一個(gè)完整的Cordova應(yīng)用

• 使用Android Studio構(gòu)建Cordova項(xiàng)目

• Cordova 官網(wǎng)地址

• Cordova平臺(tái)構(gòu)成

• Cordova CLI(Command Line Interface)

• Cordova 項(xiàng)目結(jié)構(gòu)

ProjectName
┣ config.xml **Cordova項(xiàng)目配置文件**
┣ merges **針對(duì)ios路翻、android等平臺(tái)的html文件**
┣ hooks **Cordova CLI使用的項(xiàng)目自定義腳本**
┣ platforms
┃ ┣ android **android開發(fā)人員工作目錄**
┃ ┗ ios **iOS開發(fā)人員工作目錄**
┣ plugins **插件源碼目錄**
┗ www **H5開發(fā)人員工作目錄**

• React Native狈癞、Weex : 即保留了Hybrid應(yīng)用的優(yōu)勢，力圖解決 Hybrid 劣勢

3 Web 發(fā)展史

3.1 靜態(tài)網(wǎng)頁

• 問題

內(nèi)容分享

• 技術(shù)

• Html

• 年 : 1995

• CSS

• 年 : 1996

• Javascript

• 年 : 1996

• 問題 : 客戶端腳本語言

3.2 動(dòng)態(tài)網(wǎng)頁

• 問題

動(dòng)態(tài)網(wǎng)頁問題

• 技術(shù)
• CGI（共用網(wǎng)關(guān)接口）
• Perl
• 年 : 1987
• 問題 : 服務(wù)器端動(dòng)態(tài)網(wǎng)頁
• PHP
• 年 : 1995
• 問題 : 服務(wù)器端動(dòng)態(tài)網(wǎng)頁
• JSP
• 年 : 1996
• 問題 : 服務(wù)器端動(dòng)態(tài)網(wǎng)頁
• ASP
• 年 : 1996
• 問題 : 服務(wù)器端動(dòng)態(tài)網(wǎng)頁

3.3 客戶端異步交互

• 問題

客戶端交互->異步帚桩、局部頁面交互

• 技術(shù)
• Ajax
• 年 : 1998—2005

3.4 開發(fā)效率提速階段

• 問題

加快開發(fā)效率

• 技術(shù)
• jQuery
• 年 : 2006
• 問題 : JS庫亿驾、瀏覽器的兼容性、簡化dom操作账嚎，加快開發(fā)效率
• YUI
• 2006
• 問題 :
• Ruby on Rails
• 年 : 2007
• 問題 : 開發(fā)模式->MVC
• NodeJS
• 年 : 2009
• 問題 : 待定
• Prototypejs
• 年 : 2009
• 問題 : 待定
• UnderScore
• 年 : 2009
• 問題 : 待定
• AngularJS
• 年 : 2009
• 問題 : 谷歌 JS 前端框架
• CoffeeScript
• 年 : 2009-2010
• 問題 : 作為JavaScript的轉(zhuǎn)譯語言
• Backbone
• 年 : 2010
• 問題 : JS 前端框架
• Web2.0 Html5
• 年 : 2010
• 問題 : 待定
• EmberJS
• 年 : 2011
• 問題 : 待定
• Bootstrap
• 年 : 2011
• 問題 : 待定
• TypeScript
• 年 : 2012
• 問題 : 待定
• React
• 年 : 2013
• 問題 : 構(gòu)建隨著時(shí)間數(shù)據(jù)不斷變化的大規(guī)模應(yīng)用程序
• Vue
• 年 : 2013
• 問題 : 待定

3.5 移動(dòng)平臺(tái)

• 問題

移動(dòng)平臺(tái)

• 技術(shù)

• Web App

• 年 : 待定

• 問題 : Html5移動(dòng)App開發(fā)框架

• 技術(shù)

• JQuery Mobile

• 輕量級(jí)框架

• 缺點(diǎn)

• 沒有 MVC 多人協(xié)作 開發(fā)的概念

• 項(xiàng)目比較大后 代碼不易維護(hù)

• 適用范圍

• 中小項(xiàng)目 1-2 個(gè)人開發(fā)很適用

• SenchaTouch

• 重量級(jí)的框架(需要 extjs 基礎(chǔ) 代碼復(fù)雜需要較強(qiáng)的程序基礎(chǔ))

• 優(yōu)點(diǎn)

• 兼容性好,基于 MVC 世界上第一個(gè) html5 移動(dòng)開發(fā)框架

• 可視化開發(fā)工具 sencha architect

• Angularjs

• 輕量級(jí)框架

• 優(yōu)點(diǎn)

• 支持 MVC

• 支持 數(shù)據(jù)雙向綁定

• 通過 SASS 構(gòu)建應(yīng)用程序,它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用

• Hybrid App

• 年 : 2008-2011

• 問題 : 解決 html 無法訪問設(shè)備的問題

• React Native

• 年 : 2015

• 問題 : 既擁有Native的用戶體驗(yàn)儡蔓、又保留React的開發(fā)效率

• Weex

• 年 : 2016

4 Hybrid App 分類一

4.1 多View混合型

• 描述

2012年常見的Hybrid App是Native View與WebView交替的場景出現(xiàn)。這種應(yīng)用混合邏輯相對(duì)簡單疼邀。
即在需要的時(shí)候喂江，將WebView當(dāng)成一個(gè)獨(dú)立的View（Activity）運(yùn)行起來，在WebView內(nèi)完成相關(guān)的展示操作旁振。開發(fā)難度和Native App基本相當(dāng)获询。

• 特點(diǎn)

即Native View和Web View獨(dú)立展示，交替出現(xiàn)拐袜。
這種移動(dòng)應(yīng)用主體通常是Native App吉嚣，Web技術(shù)只是起到補(bǔ)充作用。

• 開發(fā)難度

開發(fā)難度與native app相當(dāng)

4.2 單View混合型

• 描述

這種Hybrid App的開發(fā)成本較高蹬铺，開發(fā)難度較大尝哆，但是體驗(yàn)較好。
如百度搜索為代表的單View混合型移動(dòng)應(yīng)用甜攀，既可以實(shí)現(xiàn)充分的靈活性秋泄，又能實(shí)現(xiàn)較好的用戶體驗(yàn)。

• 特點(diǎn)

即在同一個(gè)View內(nèi)规阀，同時(shí)包括Native View和Web View恒序。互相之間是覆蓋（層疊）的關(guān)系谁撼。(會(huì)犧牲內(nèi)存歧胁，達(dá)到顯示快的效果)

• 開發(fā)難度

開發(fā)成本較高，難度較大厉碟，但是體驗(yàn)較好与帆。

4.3 Web主體型

• 描述

這種類型開發(fā)的移動(dòng)應(yīng)用體驗(yàn)相對(duì)而言存在缺陷，但整體開發(fā)難度大幅降低墨榄，并且基本可以實(shí)現(xiàn)跨平臺(tái)。Web主體型的移動(dòng)應(yīng)用用戶體驗(yàn)的好壞勿她，主要取決于底層中間件的交互與跨平臺(tái)的能力袄秩。
從分析可見，Hybrid App中的Web主體型只要能夠解決用戶體驗(yàn)差的問題逢并，就可以變成最佳Hybrid App解決方案類型之剧。

• 特點(diǎn)

即移動(dòng)應(yīng)用的主體是Web View，主要以網(wǎng)頁語言編寫砍聊，穿插Native功能的Hybrid App開發(fā)類型背稼。

• 開發(fā)難度

整體開發(fā)難度低，基本可以實(shí)現(xiàn)跨平臺(tái)

• 平臺(tái)
• appMobi : 除基礎(chǔ)的底層能力更多是通過插件（Plugins）擴(kuò)展的機(jī)制實(shí)現(xiàn)Hybrid
• PhoneGap : 除基礎(chǔ)的底層能力更多是通過插件（Plugins）擴(kuò)展的機(jī)制實(shí)現(xiàn)Hybrid
• WeX5 : WeX5則在揉合PhoneGap和Bootstrap等主流技術(shù)的基礎(chǔ)上玻蝌，對(duì)性能進(jìn)一步做了深度優(yōu)化蟹肘，不但完全具備Native App對(duì)本地資源的調(diào)用能力词疼，性能體驗(yàn)也不輸原生；WeX5所開發(fā)出來的app具備完全的跨端運(yùn)行能力帘腹，可以無需任何修改直接運(yùn)行在各種前端環(huán)境上贰盗。
• AppCan : 除了插件機(jī)制，還提供了大量的單View混合型的接口來完善和彌補(bǔ)Web主體型Hybrid App體驗(yàn)差的問題阳欲，接近Native App的體驗(yàn)舵盈。

4.4 多主體共存型（靈活型）

• 描述

這是一種新型的開發(fā)模式，即支持Web主體型的應(yīng)用球化，又支持以Native主體的應(yīng)用秽晚，也支持兩者混合的開發(fā)模式。

• 平臺(tái)
• kerkee : 它具有跨平臺(tái)筒愚、用戶體驗(yàn)好赴蝇、性能高、擴(kuò)展性好锨能、靈活性強(qiáng)扯再、易維護(hù)、規(guī)范化址遇、具有Debug環(huán)境熄阻、徹底解決跨域問題等特點(diǎn)。用戶體驗(yàn)與Native App媲美倔约。功能方面秃殉，開發(fā)者可隨意擴(kuò)展接口。

5 Hybrid App 分類二

5.1 重架構(gòu)混合模式

• 原因

“重混”架構(gòu)這種依賴Native UI的混合框架浸剩，本著“Web不夠钾军，就Native來湊”的核心思路，的確提升了交互體驗(yàn)绢要，但同時(shí)也帶來了無法回避的顯著缺點(diǎn)：Web和Native技術(shù)的交叉混雜讓開發(fā)者的編程和調(diào)試都很不方便吏恭；尤其是無法直接運(yùn)行在微信這類超級(jí)App平臺(tái)之上，更是“重混”App的致命硬傷重罪。

5.2 輕架構(gòu)混合模式

• 原因

Hybrid APP就必須堅(jiān)持幾個(gè)原則：UI部分必須用純Web技術(shù)樱哼，完全采用H5技術(shù)；在底層的設(shè)備接口上剿配，確實(shí)是JS無法完成的原生部分搅幅，需要Native技術(shù)來彌補(bǔ)的，也必須堅(jiān)持Native技術(shù)不去侵入U(xiǎn)I呼胚。這樣一個(gè)框架就是“輕混”Hybrid APP框架茄唐。“輕混”框架才是真正的HTML5 APP框架蝇更，在技術(shù)上更輕量沪编，成本更低呼盆、也更容易推廣，能真正做到只需一次開發(fā)就能跨Android漾抬、iOS和微信等各種端發(fā)布宿亡。“輕混”才是Hybrid APP技術(shù)發(fā)展的必然方向纳令。

5.3 Hybrid 優(yōu)勢

• 跨平臺(tái)
  Web內(nèi)容可以做到開發(fā)一次挽荠，所有平臺(tái)生效，諸多產(chǎn)品需要這種能力平绩。

• 快速發(fā)布
  iOS平臺(tái)圈匆，Apple Store平均審核周期1～2周不等，甚至更長捏雌，產(chǎn)品的發(fā)布周期從2周到1月跃赚，這對(duì)需要快速發(fā)布的產(chǎn)品而言難以接受。

Android平臺(tái)性湿，應(yīng)用商店眾多纬傲，發(fā)布過程煩瑣。雖然可以應(yīng)用內(nèi)升級(jí)肤频，但是帶來的問題是新App需要通過應(yīng)用商店叹括，此外APK體積龐大，2G/3G環(huán)境下體驗(yàn)差宵荒。

• 高效開發(fā)
  Web開發(fā)經(jīng)過20年的發(fā)展于个，已經(jīng)將結(jié)構(gòu)（HTML）考传、表現(xiàn)（CSS）、行為（JavaScript）3部分很好地分離開睬关，在分工協(xié)作澳盐、開發(fā)效率上會(huì)具明顯優(yōu)勢议惰。

• 豐富的Device API
  Web（HTML5）強(qiáng)調(diào)通用性整份，受限于標(biāo)準(zhǔn)和瀏覽器實(shí)現(xiàn)蟋座，許多有用的系統(tǒng)功能未能得到支持（或部分支持）。而Native最大的優(yōu)勢在于設(shè)備API的調(diào)用能力岩臣，只要橋接Native和Web袁翁，Web也就能夠擁有這種能力。

5.4 Hybrid 劣勢

• CPU/GPU密集類應(yīng)用目前看更適合Native婿脸，例如極品飛車這樣的游戲。這種劣勢是在不斷弱化的柄驻，正如 “CSS Transform 3D”引入GPU大大緩解了Web動(dòng)畫不流暢的問題狐树。

• 靜態(tài)資源從服務(wù)器端加載導(dǎo)致的UI展示延遲問題。這個(gè)問題可以通過Native攔截WebView通信加載已打包的公共庫來緩解鸿脓。

6 Hybrid 平臺(tái)調(diào)查

7 Hybrid App 調(diào)試方法

7.1 調(diào)試方法匯總

更多介紹參考 Debugging Cordova apps

7.2 推薦工作流程 & 調(diào)試方法

• 推薦工作流程

• 完成UI界面開發(fā) -> 完成原生聯(lián)調(diào)

• 推薦調(diào)試方法

• mockdata & console.log() -> GapDebug -> 基于Safari晶姊、Chrome方法 -> Weinre