app開發之原生開發、H5開發和混合開發的區別
APP開發模式
目前市場上主流的APP分為三種：
- 原生APP
- Web APP（即HTML5）
- 混合APP 當然，還有flutter等
APP開發模式對比
1. 原生開發
原生開發（Native App開發），是在Android、IOS等移動平臺上利用官方提供的開發語言、開發類庫、開發工具進行App開發。比如Android是利用Java、Eclipse、Android studio；IOS是利用Objective-C 和Xcode進行開發。
優點：
- 可訪問手機所有功能（如GPS、攝像頭等）、可實現功能最齊全；
- 執行速度快、效能高，絕佳的使用者體驗；
- 支援大量圖形和動畫，不卡頓，反應快；
- 相容性高，每個程式碼都經過程式設計師精心設計，一般不會出現閃退的情況，還能防止病毒和漏洞的出現；
- 比較快捷地使用裝置端提供的介面，處理速度上有優勢。
缺點：
- 開發時間長，快則3個月左右完成，慢則五個月左右；
- 製作費用高昂，成本較高；
- 可移植性比較差，一款原生的App，Android和IOS都要各自開發，同樣的邏輯、介面要寫兩套；
- 內容限制（App Store限制）；
- 必須等下載完畢使用者才可以開啟，獲得新版本時需重新下載應用更新。
- 新需求迭代，上線慢。
2. web APP (h5開發)
HTML5應用開發，是利用Web技術進行的App開發，可以在手機端瀏覽器裡面開啟的網站就稱之為webapp。Web技術本身需要瀏覽器的支援才能進行展示和使用者互動，因此主要用到的技術是HTML、CSS、Javascript以及jQuery、Vue、React等JS框架。
優點：
- 支援裝置範圍廣，可以跨平臺，編寫的程式碼可以同時在Android、IOS、Windows上執行；
- 開發成本低、週期短；
- 無內容限制；
- 適合展示有大段文字（如新聞、攻略等），且格式比較豐富（如加粗，字型多樣）的頁面；
- 使用者可以直接使用最新版本（自動更新，不需使用者手動更新）。
缺點：
- 由於Web技術本身的限制，H5移動應用不能直接訪問裝置硬體和離線儲存，所以在體驗和效能上有很大的侷限性；
- 對聯網要求高，離線不能做任何操作；
- 功能有限；
- APP反應速度慢，頁面切換流暢性較差；
- 圖片和動畫支援性不高；
- 使用者體驗感較差；
- 無法呼叫手機硬體（攝像頭、麥克風等）。
混合（原生+H5）開發 - Hybrid App開發
混合開發（Hybrid App開發），是指在開發一款App產品的時候，為了提高效率、節省成本而利用原生與H5的開發技術的混合應用。通俗點來說，這就是網頁的模式，通常由“HTML5雲網站+APP應用客戶端”兩部份構成。
混合開發是一種取長補短的開發模式，原生程式碼部分利用WebView外掛或者其它框架為H5提供容器，程式主要的業務實現、介面展示都是利用與H5相關的Web技術進行實現的。比如京東、淘寶、今日頭條等APP都是利用混合開發模式而成的。
優點：
- 開發效率高，節約時間。同一套程式碼Android和IOS基本上都可使用；
- 更新和部署比較方便，每次升級版本只需要在伺服器端升級即可，不再需要上傳到App Store進行稽核；
- 程式碼維護方便、版本更新快，節省產品成本；
- 比web版實現功能多；
- 可離線執行。
缺點：
- 功能/介面無法自定：所有內容都是固定的，不能換介面或增加功能；
- 載入緩慢/網路要求高：混合APP資料需要全部從伺服器調取，每個頁面都需要重新下載，因此開啟速度慢，網路佔用高，緩衝時間長，容易讓使用者反感；
- 安全性比較低：程式碼都是以前的老程式碼，不能很好地相容最新手機系統，且安全性較低，網路發展這麼快，病毒這麼多，如果不實時更新，定期檢查，容易產生漏洞，造成直接經濟損失；
目前混合開發有兩種開發模式：
- 原生主導的開發模式：需要安卓和IOS原生開發人員，整個App既有原生開發的頁面，也有H5頁面，在需要H5頁面時由原生開發工程師實現內嵌，筆者最近正在開發的專案就使用這種開發模式。
- H5主導的開發模式：只需要H5開發工程師，藉助一些封裝好的工具實現應用的打包與呼叫原生裝置的功能，如HBuilder的雲端打包功能。
混合開發APP中如何辨別原生和H5
上圖中是上半部分是原生，下半部分是H5
1. 看載入的方式 - (比較準確)
如果在開啟新頁面導航欄下面有一條載入的線的話，這個頁面就是H5頁面，如果沒有就是原生的。 微信裡面開啟我們的H5頁面常見的有個綠色的載入線條。
比如國美APP中開啟是紅色的進度條
2. 看app頂部 導航欄是否會有關閉的操作- (不太準確)
如果APP頂部導航欄當中出現了關閉按鈕或者有關閉的圖示，那麼當前的頁面肯定的H5，原生的不會出現（除非設計開發者故意弄的）
美團的、大眾點評的APP、微信APP當載入h5過多的時候，左上角會出現關閉二字
3. 看佈局邊界（只適用於安卓手機）
可以開啟 開發者選項中的顯示佈局邊界，頁面元素很多的情況下佈局是一整塊的是h5的，佈局密密麻麻的是原生控制元件。頁面有佈局的是原生的否則為h5頁面。（僅針對安卓手機試用）
4. 看複製文章的提示，需要你通過對比才能得出結果。（不準確）
比如是文章資訊頁面可以長按頁面試試，如果出現文字選擇、貼上功能的是H5頁面，否則是native原生的頁面。
有些原生APP開放了複製貼上功能或者關閉了。而H5的css遮蔽了複製選擇功能等等情況。需要通過對目標測試APP進行對比才可知。
5. 看斷網的情況
把手機的網路斷掉。然後點開頁面。然後可以正常顯示的東西就是原生寫的。
顯示404或者錯誤頁面的是html頁面。原生部分頁面是可以正常開啟的，打不開的原生和H5的報錯也是有區別的。
6. 判斷頁面 下拉重新整理的時候（前提是要有下拉重新整理的功能）
如果介面沒有明顯重新整理現象的是原生的，如果有明顯重新整理現象（比如閃一下）的是H5頁面（ios和android）。
比如淘寶的眾籌頁面。
7. 下拉頁面的時候顯示網址提供方的一定是H5
文章摘自：
https://segmentfault.com/a/1190000020146197?utm_source=tag-newest
總結
目前，多數混合開發的前端技術棧，選型vue,react的比較多，國外的話angular比較多，國內較少，存在招人難的問題。
- 純H5的應用，是體驗最差的
- hybird應用中，webview方式嵌入H5的方式目前大廠和中小企業用的較多。
- Flutter是一款移動應用程式SDK，一份程式碼可以同時生成iOS和Android兩個高效能、高保真的應用程式。目前，不少中小型企業已經開始大量使用。
- weex目前沒有在專案中使用過，瞭解到使用它的產品不多
- rn 目前在京東有少量使用。
思考
- 我們的APP，如何選擇適合自己團隊的技術框架，使我們的APP迭代更快，體驗更好，這是我們一直在追求的。目前，國內vue，react，從生態，元件庫，全家桶各個方面，都已經非常成熟。如果你是一個比較喜歡嘗試新的東西，建議可以搞一下flutter。考慮專案的穩定發展建議還是以vue，react為主。
- 據我瞭解，RN的開發投入，人力，幾乎接近於原生。目前我們團隊不考慮
這篇文章就介紹到這了，需要的朋友可以參考一下。