原生開發、H5開發和混合開發的區別

APP開發模式

目前市場上主流的APP分爲三種:css

  1. 原生APP
  2. Web APP(即HTML5)
  3. 混合APP 固然,還有flutter等

APP開發模式對比

1. 原生開發

原生開發(Native App開發),是在Android、IOS等移動平臺上利用官方提供的開發語言、開發類庫、開發工具進行App開發。好比Android是利用Java、Eclipse、Android studio;IOS是利用Objective-C 和Xcode進行開發。html

優勢:

  1. 可訪問手機全部功能(如GPS、攝像頭等)、可實現功能最齊全;
  2. 運行速度快、性能高,絕佳的用戶體驗;
  3. 支持大量圖形和動畫,不卡頓,反應快;
  4. 兼容性高,每一個代碼都通過程序員精心設計,通常不會出現閃退的狀況,還能防止病毒和漏洞的出現;
  5. 比較快捷地使用設備端提供的接口,處理速度上有優點。

缺點:

  1. 開發時間長,快則3個月左右完成,慢則五個月左右;
  2. 製做費用高昂,成本較高;
  3. 可移植性比較差,一款原生的App,Android和IOS都要各自開發,一樣的邏輯、界面要寫兩套;
  4. 內容限制(App Store限制);
  5. 必須等下載完畢用戶才能夠打開,得到新版本時需從新下載應用更新。
  6. 新需求迭代,上線慢。

2. web APP (h5開發)

HTML5應用開發,是利用Web技術進行的App開發,能夠在手機端瀏覽器裏面打開的網站就稱之爲webapp。Web技術自己須要瀏覽器的支持才能進行展現和用戶交互,所以主要用到的技術是HTML、CSS、Javascript以及jQuery、Vue、React等JS框架。前端

優勢:

  1. 支持設備範圍廣,能夠跨平臺,編寫的代碼能夠同時在Android、IOS、Windows上運行;
  2. 開發成本低、週期短;
  3. 無內容限制;
  4. 適合展現有大段文字(如新聞、攻略等),且格式比較豐富(如加粗,字體多樣)的頁面;
  5. 用戶能夠直接使用最新版本(自動更新,不需用戶手動更新)。

缺點:

  1. 因爲Web技術自己的限制,H5移動應用不能直接訪問設備硬件和離線存儲,因此在體驗和性能上有很大的侷限性;
  2. 對聯網要求高,離線不能作任何操做;
  3. 功能有限;
  4. APP反應速度慢,頁面切換流暢性較差;
  5. 圖片和動畫支持性不高;
  6. 用戶體驗感較差;
  7. 沒法調用手機硬件(攝像頭、麥克風等)。

混合(原生+H5)開發 - Hybrid App開發

混合開發(Hybrid App開發),是指在開發一款App產品的時候,爲了提升效率、節省成本而利用原生與H5的開發技術的混合應用。通俗點來講,這就是網頁的模式,一般由「HTML5雲網站+APP應用客戶端」兩部份構成。 混合開發是一種取長補短的開發模式,原生代碼部分利用WebView插件或者其它框架爲H5提供容器,程序主要的業務實現、界面展現都是利用與H5相關的Web技術進行實現的。好比京東、淘寶、今日頭條等APP都是利用混合開發模式而成的。vue

優勢:

  1. 開發效率高,節約時間。同一套代碼Android和IOS基本上均可使用;
  2. 更新和部署比較方便,每次升級版本只須要在服務器端升級便可,再也不須要上傳到App Store進行審覈;
  3. 代碼維護方便、版本更新快,節省產品成本;
  4. 比web版實現功能多;
  5. 可離線運行。

缺點:

  1. 功能/界面沒法自定:全部內容都是固定的,不能換界面或增長功能;
  2. 加載緩慢/網絡要求高:混合APP數據須要所有從服務器調取,每一個頁面都須要從新下載,所以打開速度慢,網絡佔用高,緩衝時間長,容易讓用戶反感;
  3. 安全性比較低:代碼都是之前的老代碼,不能很好地兼容最新手機系統,且安全性較低,網絡發展這麼快,病毒這麼多,若是不實時更新,按期檢查,容易產生漏洞,形成直接經濟損失;
目前混合開發有兩種開發模式:
  1. 原生主導的開發模式:須要安卓和IOS原生開發人員,整個App既有原生開發的頁面,也有H5頁面,在須要H5頁面時由原生開發工程師實現內嵌,筆者最近正在開發的項目就使用這種開發模式。
  2. H5主導的開發模式:只須要H5開發工程師,藉助一些封裝好的工具實現應用的打包與調用原生設備的功能,如HBuilder的雲端打包功能。

混合開發APP中如何辨別原生和H5

上圖中是上半部分是原生,下半部分是H5

1. 看加載的方式 - (比較準確)

若是在打開新頁面導航欄下面有一條加載的線的話,這個頁面就是H5頁面,若是沒有就是原生的。 微信裏面打開咱們的H5頁面常見的有個綠色的加載線條。react

好比國美APP中打開是紅色的進度條

2. 看app頂部 導航欄是否會有關閉的操做- (不太準確)

若是APP頂部導航欄當中出現了關閉按鈕或者有關閉的圖標,那麼當前的頁面確定的H5,原生的不會出現(除非設計開發者故意弄的)android

美團的、大衆點評的APP、微信APP當加載h5過多的時候,左上角會出現關閉二字ios

3. 看佈局邊界(只適用於安卓手機)

能夠打開 開發者選項中的顯示佈局邊界,頁面元素不少的狀況下佈局是一整塊的是h5的,佈局密密麻麻的是原生控件。頁面有佈局的是原生的不然爲h5頁面。(僅針對安卓手機試用)程序員

4. 看複製文章的提示,須要你經過對比才能得出結果。(不許確)

好比是文章資訊頁面能夠長按頁面試試,若是出現文字選擇、粘貼功能的是H5頁面,不然是native原生的頁面。 有些原生APP開放了複製粘貼功能或者關閉了。而H5的css屏蔽了複製選擇功能等等狀況。須要經過對目標測試APP進行對比才可知。 web

5. 看斷網的狀況

把手機的網絡斷掉。而後點開頁面。而後能夠正常顯示的東西就是原生寫的。 顯示404或者錯誤頁面的是html頁面。原生部分頁面是能夠正常打開的,打不開的原生和H5的報錯也是有區別的。面試

6. 判斷頁面 下拉刷新的時候(前提是要有下拉刷新的功能)

若是界面沒有明顯刷新現象的是原生的,若是有明顯刷新現象(好比閃一下)的是H5頁面(ios和android)。 好比淘寶的衆籌頁面。

7. 下拉頁面的時候顯示網址提供方的必定是H5

文章摘自:

  1. segmentfault.com/a/119000002…

總結

目前,多數混合開發的前端技術棧,選型vue, react的比較多,國外的話angular比較多,國內較少,存在招人難的問題。

  1. 純H5的應用,是體驗最差的
  2. hybird應用中,webview方式嵌入H5的方式目前大廠和中小企業用的較多。
  3. Flutter是一款移動應用程序SDK,一份代碼能夠同時生成iOS和Android兩個高性能、高保真的應用程序。 目前,很多中小型企業已經開始大量使用。
  4. weex目前沒有在項目中使用過,瞭解到使用它的產品很少
  5. rn 目前在京東有少許使用。

思考

  1. 咱們的APP,如何選擇適合本身團隊的技術框架,使咱們的APP迭代更快,體驗更好,這是咱們一直在追求的。目前,國內vue,react,從生態,組件庫,全家桶各個方面,都已經很是成熟。若是你是一個比較喜歡嘗試新的東西,建議能夠搞一下flutter。考慮項目的穩定發展建議仍是以vue,react爲主。
  2. 據我瞭解,RN的開發投入,人力,幾乎接近於原生。目前咱們團隊不考慮
相關文章
相關標籤/搜索