軟件開發中原生開發與H5開發和混合開發的區別

雲棲號資訊:【點擊查看更多行業資訊
在這裏您可以找到不同行業的第一手的上雲資訊,還在等什麼,快來!


目前市場上主流的APP分爲三種:原生APP、Web APP(即HTML5)和混合APP三種,相對應的定 制開發就是原生開發、H5開發和混合開發。那麼這三種開發模式究竟有何不同呢?下面我們就分別從這三者各自的優劣勢來區分比較吧!

一、原生開發
原生開發(Native App開發),是在Android、IOS等移動平臺上利用官方提供的開發語言、開發類庫、開發工具進行App開發。比如Android是利用Java、Eclipse、Android studio;IOS是利用Objective-C 和Xcode進行開發。 通俗點來講,原生開發就像蓋房子一樣,先打地基然後澆地梁、房屋結構、一磚一瓦、鋼筋水泥、電路走向等,都是經過精心的設計。原生APP也一樣:通過代碼從每個頁面、每個功能、每個效果、每個邏輯、每個步驟全部用代碼寫出來,一層層,一段段全用代碼寫出來。
優點: 1、可訪問手機所有功能(如GPS、攝像頭等)、可實現功能最齊全; 2、運行速度快、性能高,絕佳的用戶體驗; 3、支持大量圖形和動畫,不卡頓,反應快; 4、兼容性高,每個代碼都經過程序員精心設計,一般不會出現閃退的情況,還能防止病毒和漏洞的出現; 5、比較快捷地使用設備端提供的接口,處理速度上有優勢。
缺點: 1、開發時間長,快則3個月左右完成,慢則五個月左右; 2、製作費用高昂,成本較高; 3、可移植性比較差,一款原生的App,Android和IOS都要各自開發,同樣的邏輯、界面要寫兩套; 4、內容限制(App Store限制); 5、必須等下載完畢用戶纔可以打開,獲得新版本時需重新下載應用更新。
二、Web APP (HTML5)開發
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開發),是指在開發一款App產品的時候,爲了提高效率、節省成本而利用原生與H5的開發技術的混合應用。通俗點來說,這就是網頁的模式,通常由“HTML5雲網站+APP應用客戶端”兩部份構成。 混合開發是一種取長補短的開發模式,原生代碼部分利用WebView插件或者其它框架爲H5提供容器,程序主要的業務實現、界面展示都是利用與H5相關的Web技術進行實現的。比如京東、淘寶、今日頭條等APP都是利用混合開發模式而成的。
優點: 1、開發效率高,節約時間。同一套代碼Android和IOS基本上都可使用; 2、更新和部署比較方便,每次升級版本只需要在服務器端升級即可,不再需要上傳到App Store進行審覈; 3、代碼維護方便、版本更新快,節省產品成本; 4、比web版實現功能多; 5、可離線運行。
缺點: 1、功能/界面無法自定:所有內容都是固定的,不能換界面或增加功能; 2、加載緩慢/網絡要求高:混合APP數據需要全部從服務器調取,每個頁面都需要重新下載,因此打開速度慢,網絡佔用高,緩衝時間長,容易讓用戶反感; 3、安全性比較低:代碼都是以前的老代碼,不能很好地兼容最新手機系統,且安全性較低,網絡發展這麼快,病毒這麼多,如果不實時更新,定期檢查,容易產生漏洞,造成直接經濟損失; 4、既懂原生開發又懂H5開發的高端人才難找。
目前混合開發有兩種開發模式:
一、原生主導的開發模式:需要安卓和IOS原生開發人員,整個App既有原生開發的頁面,也有H5頁面,在需要H5頁面時由原生開發工程師實現內嵌,筆者最近正在開發的項目就使用這種開發模式。
二、H5主導的開發模式:只需要H5開發工程師,藉助一些封裝好的工具實現應用的打包與調用原生設備的功能,如HBuilder的雲端打包功能。 如何辨別原生和H5:
以最近正在開發的混合APP項目首頁爲例:

1、看斷網的情況 把手機的網絡斷掉。然後點開頁面。然後可以正常顯示的東西就是原生寫的。 顯示404或者錯誤頁面的是html頁面。

2、看佈局邊界 可以打開 開發者選項中的顯示佈局邊界,頁面元素很多的情況下佈局是一整塊的是h5的,佈局密密麻麻的是原生控件。頁面有佈局的是原生的否則爲h5頁面。(僅針對安卓手機試用)
3、看複製文章的提示,需要你通過對比才能得出結果。 比如是文章資訊頁面可以長按頁面試試,如果出現文字選擇、粘貼功能的是H5頁面,否則是native原生的頁面。有些原生APP開放了複製粘貼功能或者關閉了。而H5的css屏蔽了複製選擇功能等等情況。需要通過對目標測試APP進行對比才可知。
4、看加載的方式 如果在打開新頁面導航欄下面有一條加載的線的話,這個頁面就是H5頁面,如果沒有就是原生的。 微信裏面打開我們的H5頁面常見的有個綠色的加載線條。
5、看app頂部 導航欄是否會有關閉的操作 如果APP頂部導航欄當中出現了關閉按鈕或者有關閉的圖標,那麼當前的頁面肯定的H5,原生的不會出現(除非設計開發者故意弄的)美團的、大衆點評的APP、微信APP當加載h5過多的時候,左上角會出現關閉二字。
6、判斷頁面 下拉刷新的時候(前提是要有下拉刷新的功能) 如果界面沒有明顯刷新現象的是原生的,如果有明顯刷新現象(比如閃一下)的是H5頁面(ios和android)。 比如淘寶的衆籌頁面。
7、下拉頁面的時候顯示網址提供方的一定是H5網頁。

【雲棲號在線課堂】每天都有產品技術專家分享!
課程地址:https://yqh.aliyun.com/live

立即加入社羣,與專家面對面,及時瞭解課程最新動態!
【雲棲號在線課堂 社羣】https://c.tb.cn/F3.Z8gvnK

原文發佈時間:2020-07-28
本文作者:APP開發那些事兒
本文來自:“cocoachina”,瞭解相關信息可以關注“cocoachina”

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章