本篇文章給大家談?wù)刪5混合app開(kāi)發(fā)，以及app原生開(kāi)發(fā) 混合開(kāi)發(fā) h5開(kāi)發(fā)對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

說(shuō)說(shuō)H5和native app

開(kāi)發(fā)者選項(xiàng)里打開(kāi)顯示布局邊界，如果能看到各種邊框則為native app，如果只為一大塊則為H5 app。

native app使用原生系統(tǒng)內(nèi)核（Android linux、iOS等等），相當(dāng)于直接在系統(tǒng)上操作，更加穩(wěn)定、快速，可以使用非常非常多的API,用那句流行的話來(lái)說(shuō)是“不知道多到哪里去了”，因此開(kāi)發(fā)出來(lái)的功能逼格更高。而H5 APP是先調(diào)用系統(tǒng)的瀏覽器內(nèi)核，相當(dāng)于是在網(wǎng)頁(yè)中進(jìn)行操作，較原生APP穩(wěn)定性稍差、速度較慢，同時(shí)在一些老Android版本上運(yùn)行非常慢。但是H5最大的優(yōu)點(diǎn)是可以跨平臺(tái)，同時(shí)開(kāi)發(fā)容易、效率高、方便調(diào)試。native的話需要用Java和Swift語(yǔ)言各自寫(xiě)，甚至還要為WP寫(xiě)??，而H5只要開(kāi)發(fā)一套。

就目前來(lái)說(shuō),Native的運(yùn)行性能和UI控件的渲染性能都要比H5有明顯優(yōu)勢(shì),而H5優(yōu)勢(shì)在于快速開(kāi)發(fā)迭代。長(zhǎng)遠(yuǎn)來(lái)看,H5的流行得要看H5是否能更進(jìn)一步的貼近Native的性能和效率。未來(lái)比較多的方案可能是H5+Native混合開(kāi)發(fā)模式。（微信應(yīng)用號(hào)）

native APP不會(huì)垮，H5 app傳播快準(zhǔn)狠，時(shí)效性高，但是持續(xù)性短。

H5適合做表示層，如果常見(jiàn)界面經(jīng)常換，或者要做跨平臺(tái)的軟件，又要很快上線的，H5還是很合適的。調(diào)用硬件什么的- -|||好像可以建議采用H5+native混合開(kāi)發(fā)模式。

H5 手機(jī) App 開(kāi)發(fā)入門：技術(shù)篇

手機(jī) App 的技術(shù)棧可以分成三類

原生技術(shù)棧指的是，只能用于特定手機(jī)平臺(tái)的開(kāi)發(fā)技術(shù)。比如，安卓平臺(tái)的 Java 技術(shù)棧，iOS 平臺(tái)的 Object-C 技術(shù)棧或 Swift 技術(shù)棧。

混合技術(shù)棧指的是開(kāi)發(fā)混合 App 的技術(shù)，也就是把 Web 網(wǎng)頁(yè)放到特定的容器中，然后再打包成各個(gè)平臺(tái)的原生 App。所以，混合技術(shù)棧其實(shí)是 Web 技術(shù)棧 + 容器技術(shù)棧，典型代表是 PhoneGap、Cordova、Ionic 等框架。

跨平臺(tái)技術(shù)棧指的是使用一種技術(shù)，同時(shí)支持多個(gè)手機(jī)平臺(tái)。它與混合技術(shù)棧的區(qū)別是，不使用 Web 技術(shù)，即它的頁(yè)面不是 HTML5 頁(yè)面，而是使用自己的語(yǔ)法寫(xiě)的 UI 層，然后編譯成各平臺(tái)的原生 App。

這個(gè)技術(shù)棧就是純粹的容器技術(shù)棧，React Native、Xamarin、Flutter 都屬于這一類。學(xué)習(xí)時(shí)，除了學(xué)習(xí)容器的 API Bridge，還要學(xué)習(xí)容器提供的 UI 層，即怎么寫(xiě)頁(yè)面

總結(jié)：H5 開(kāi)發(fā)主要用在混合技術(shù)棧。但是，跨平臺(tái)技術(shù)棧的某些容器也會(huì)用到（比如 React Native），因?yàn)樗鼈兊?UI 層借鑒了 Web 模型。

另外，混合技術(shù)棧和跨平臺(tái)技術(shù)棧的基礎(chǔ)，都是原生技術(shù)棧，因?yàn)樽罱K都要編譯成原生App。所以，不管使用哪一種技術(shù)棧，多多少少要了解一些各平臺(tái)的原生技術(shù)。

不管什么技術(shù)，最終在 App 里面顯示網(wǎng)頁(yè)，一定需要一個(gè)網(wǎng)頁(yè)引擎，這樣才能解析網(wǎng)頁(yè)。通常情況下，App 內(nèi)部會(huì)使用 WebView 控件作為網(wǎng)頁(yè)引擎。這是系統(tǒng)自帶的控件，專門用來(lái)顯示網(wǎng)頁(yè)。應(yīng)用程序的界面，只要放上 WebView，就好像內(nèi)嵌了瀏覽器窗口，可以顯示網(wǎng)頁(yè)。不同的 App 技術(shù)棧要顯示網(wǎng)頁(yè)，區(qū)別僅僅在于怎么處理 WebView 這個(gè)原生控件。

不同系統(tǒng)的 WebView 控件名稱不一樣，安卓系統(tǒng)就叫 WebView，iOS 系統(tǒng)有較老的 UIWebView，也有較新的 WKWebView，作用都是一樣的，差異在于功能的強(qiáng)弱。

如何辨別app是原生開(kāi)發(fā)的還是h5開(kāi)發(fā)的 或是混合開(kāi)發(fā)

1、看斷網(wǎng)的情況

把手機(jī)的網(wǎng)絡(luò)斷掉。然后點(diǎn)開(kāi)頁(yè)面。然后可以正常顯示的東西就是原生寫(xiě)的。

顯示404或則錯(cuò)誤頁(yè)面的是html頁(yè)面。

2、看布局邊界

可以打開(kāi) 開(kāi)發(fā)者選項(xiàng)中的顯示布局邊界，頁(yè)面元素很多的情況下布局是一整塊的是h5的，布局密密麻麻的是原生控件。頁(yè)面有布局的是原生的否則為h5頁(yè)面。

3、看復(fù)制文章的提示，需要你通過(guò)對(duì)比才能得出結(jié)果。

比如是文章資訊頁(yè)面可以長(zhǎng)按頁(yè)面試試，如果出現(xiàn)文字選擇、粘貼功能的是H5頁(yè)面，否則是native原生的頁(yè)面。

有些原生APP開(kāi)放了復(fù)制粘貼功能或者關(guān)閉了。而H5的css屏蔽了復(fù)制選擇功能等等情況。需要通過(guò)對(duì)目標(biāo)測(cè)試APP進(jìn)行對(duì)比才可知。

這個(gè)在支付寶APP、螞蟻聚寶都是可以判斷的。

4、看加載的方式

如果在打開(kāi)新頁(yè)面導(dǎo)航欄下面有一條加載的線的話，這個(gè)頁(yè)面就是H5頁(yè)面，如果沒(méi)有就是原生的。

h5做app和原生app有什么區(qū)別？

H5APP即是一種框架型APP開(kāi)發(fā)模式(HTML5APP框架開(kāi)發(fā)模式)，該開(kāi)發(fā)具有跨平臺(tái)的優(yōu)勢(shì)，該模式通常由“HTML5云網(wǎng)站+APP應(yīng)用客戶端”兩部份構(gòu)成，APP應(yīng)用客戶端只需安裝應(yīng)用的框架部份，而應(yīng)用的數(shù)據(jù)則是每次打開(kāi)APP的時(shí)候，去云端取數(shù)據(jù)呈現(xiàn)給手機(jī)用戶。

原生APP又稱NativeApp，該開(kāi)發(fā)針對(duì)IOS、Android、Windows等不同的手機(jī)操作系統(tǒng)要采用不同的語(yǔ)言和框架進(jìn)行開(kāi)發(fā)，該模式通常是由“云服務(wù)器數(shù)據(jù)+APP應(yīng)用客戶端”兩部份構(gòu)成，APP應(yīng)用所有的UI元素、數(shù)據(jù)內(nèi)容、邏輯框架均安裝在手機(jī)終端上。

1、開(kāi)發(fā)方面的區(qū)別（這個(gè)地方太專業(yè)啦，請(qǐng)教了團(tuán)隊(duì)的開(kāi)發(fā)小伙伴）

目前ReactNative開(kāi)發(fā)越來(lái)越火，微信小程序是基于ReactNative開(kāi)發(fā)的，體驗(yàn)接近原生APP，發(fā)展前景值得重視。不過(guò)好在現(xiàn)在非原生APP同樣可以調(diào)用藍(lán)牙、相機(jī)等硬件，也能順利發(fā)布到蘋(píng)果APPstore。

移動(dòng)WebApp

1、因?yàn)檫\(yùn)行在移動(dòng)設(shè)備的瀏覽器上，所以只需要一個(gè)開(kāi)發(fā)項(xiàng)目

2、這種應(yīng)用可以使用HTML5,CSS3以及JavaScript以及服務(wù)器端語(yǔ)言來(lái)完成(PHP,RubyonRails,Python)

3、這里可沒(méi)有標(biāo)準(zhǔn)的SDK，基本任意選擇別忘了有一些跨平臺(tái)的開(kāi)發(fā)工具，比如PhoneGap,SenchaTouch2以及AppceleratorTitanium等等。

原生App

1、每一種移動(dòng)操作系統(tǒng)都需要獨(dú)立的開(kāi)發(fā)項(xiàng)目

2、每種平臺(tái)都需要獨(dú)立的開(kāi)發(fā)語(yǔ)言。Java(Android),Objective-C(iOS)以及VisualC++(Windowsphone)等等

3、需要使用各自的軟件開(kāi)發(fā)包，開(kāi)發(fā)工具以及各自的控件

2、能力方面的區(qū)別

移動(dòng)WebApp

只能使用有限的移動(dòng)硬件設(shè)備功能。

原生App

能夠與移動(dòng)硬件設(shè)備的底層功能，比如個(gè)人信息，攝像頭以及重力加速器等等。對(duì)于這一點(diǎn)感觸很深刻，2016年做新年H5營(yíng)銷小活動(dòng)的時(shí)候，就是因?yàn)闆](méi)有考慮到H5不能使用移動(dòng)硬件端重力加速器而導(dǎo)致臨時(shí)替換設(shè)計(jì)方案。

3、獲取方法的區(qū)別

移動(dòng)WebApp

1、從移動(dòng)設(shè)備上的瀏覽器訪問(wèn)

2、不需要安裝額外的軟件

3、軟件更新只需要服務(wù)器就夠了

4、因?yàn)楝F(xiàn)在沒(méi)有什么商品或賣場(chǎng)提供這種App，不過(guò)一般都是嵌套在系統(tǒng)內(nèi)部，或者內(nèi)部系??????統(tǒng)中使用

5、跨平臺(tái)開(kāi)發(fā)，用戶不需要去賣場(chǎng)來(lái)下載安裝App

6、需要過(guò)度依賴網(wǎng)絡(luò)，沒(méi)有任何緩存數(shù)據(jù)

7、任何時(shí)候都可以發(fā)布App，因?yàn)楦静恍枰俜劫u場(chǎng)的審核

8、如果你已經(jīng)有了一個(gè)WebApp，你可以使用responsivewebdesign來(lái)輔助改進(jìn)(這也是優(yōu)勢(shì)?)

9、所有的用戶都是用同樣的版本

原生App

1、直接下載到設(shè)備

2、以獨(dú)立的應(yīng)用程序運(yùn)行(并不需要瀏覽器)

3、用戶必須手動(dòng)去下載并安裝這些原生App

4、有一些商店與賣場(chǎng)來(lái)幫助用戶尋找你的App，appstore里面應(yīng)有盡有。

5、原生型APP應(yīng)用的安裝包相對(duì)較大，包含UI元素、數(shù)據(jù)內(nèi)容、邏輯框架;

6、手機(jī)用戶無(wú)法上網(wǎng)也可訪問(wèn)APP應(yīng)用中以前下載的數(shù)據(jù)。

7、原生型的APP可以調(diào)用手機(jī)終端的硬件設(shè)備(語(yǔ)音、攝像頭、短信、GPS、藍(lán)牙、重力感應(yīng)等)

8、APP應(yīng)用更新新功能，涉及到每次要向各個(gè)應(yīng)用商店進(jìn)行提交審核。

9、用戶可以自由地選擇是否更新軟件版本，所以會(huì)出現(xiàn)不同用戶同時(shí)使用不同版本的情況

即使兩者之間有很大的區(qū)別，即使H5有一大堆的坑和問(wèn)題，但是仍舊不妨礙移動(dòng)WEB無(wú)所不在，移動(dòng)web是目前唯一的支持各種設(shè)備訪問(wèn)的平臺(tái)，也是唯一一個(gè)可供開(kāi)發(fā)者發(fā)布移動(dòng)應(yīng)用的平臺(tái)，它將各種移動(dòng)交互與PC系統(tǒng)任務(wù)有效的結(jié)合在一起。而原生nativeapp可以充分利用設(shè)備的特性，這一點(diǎn)是它得天獨(dú)厚的優(yōu)勢(shì)。

正式因?yàn)樗袕?fù)雜多變的CSS樣式消耗了大量性能，它才有一個(gè)更有競(jìng)爭(zhēng)力的優(yōu)勢(shì)——它帶來(lái)了多樣性的排版，能夠細(xì)致到每一個(gè)字寬行高和風(fēng)格的像素級(jí)處理，能夠給你帶來(lái)不一樣的圖文匯合的排版。

App和h5的小知識(shí)

當(dāng)app需要h5頁(yè)面的時(shí)候，作為前端開(kāi)發(fā)的我們不管是用原聲js還是使用框架Vue、React，我們都只是給app提供一個(gè)頁(yè)面而已。

一、當(dāng)app只需要h5做展示的時(shí)候，我們就是寫(xiě)一個(gè)頁(yè)面給他們就行了，非常容易。（注意做好兼容）

二、當(dāng)app需要捕獲h5獲取的數(shù)據(jù)的時(shí)候，也很容易

? ? ? 例如：支付頁(yè)面是h5

? ? ? ? ? ? ? ? 支付方式有三種：1、微信? ；2、支付寶；3:分期付款；

微信、支付寶需要調(diào)取原聲app，分期是h5操作；

這個(gè)時(shí)候我們就在確認(rèn)支付的以后在window上綁上payType就行了，app可以獲取window；

三、當(dāng)h5需要app數(shù)據(jù)的時(shí)候，最簡(jiǎn)單的方式就是app通過(guò)webView把h5需要的數(shù)據(jù)埋在cookie中；

但h5獲取數(shù)據(jù)的時(shí)候直接在cookie中取就行了

export function getCookie(name) {

? const reg = new RegExp(`(^| )${name}=([^;]*)(;|$)`);

? const arr = document.cookie.match(reg);

? ?if (arr) {

????????return arr[2];

???? }

???? return null;

?}

當(dāng)iOS和Android方式不同意的時(shí)候我們需要判斷系統(tǒng)；

const u = navigator.userAgent;

? ? ? ? ?app = navigator.appVersion;

? ? ? ? ?var isAndroid = u.indexOf('Android') -1 || u.indexOf('Linux') -1; //android終端或者uc瀏覽器

? ? ? ? const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios終端

根據(jù)不同的系統(tǒng)各自處理；

APP原生開(kāi)發(fā)和H5開(kāi)發(fā)以及APP混合開(kāi)發(fā)三者有什么區(qū)別？

這個(gè)如果詳細(xì)說(shuō)，那就是很復(fù)雜了，但是可以以口語(yǔ)方式簡(jiǎn)單的說(shuō)

APP原生開(kāi)發(fā)：就是安卓版，IOS版，和后臺(tái)，最起碼為3個(gè)人制作，3個(gè)不同的人掌握不同的技術(shù)，也就是說(shuō)，這個(gè)成本最高。

H5開(kāi)發(fā)：就是HTML5的網(wǎng)頁(yè)制作，也可以理解為網(wǎng)頁(yè)制作，然后加個(gè)殼打包，這個(gè)殼和打包對(duì)于外行也是比較模糊的概念，你只需要理解為最簡(jiǎn)單的html5制作就行，這個(gè)沒(méi)有什么技術(shù)含量，也最便宜。一個(gè)人可以搞定。

APP混合開(kāi)發(fā)：這個(gè)是介于原生開(kāi)發(fā)和H5開(kāi)發(fā)之間的，難度也是居中，相對(duì)來(lái)說(shuō)，技術(shù)上由2個(gè)人完成，一個(gè)前臺(tái)一個(gè)后臺(tái)，APP上有H5的制作內(nèi)容，也有原生開(kāi)發(fā)的制作內(nèi)容，所以叫混合開(kāi)發(fā)，或者說(shuō)也有WEB開(kāi)發(fā)的痕跡，這個(gè)是不能一句話說(shuō)清楚的。

從價(jià)格來(lái)說(shuō)這樣排列：最貴原生開(kāi)發(fā)，居中混合開(kāi)發(fā)，最便宜H5開(kāi)發(fā)。

關(guān)于h5混合app開(kāi)發(fā)和app原生開(kāi)發(fā) 混合開(kāi)發(fā) h5開(kāi)發(fā)的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。