本篇文章給大家談談原生h5的app開發(fā)框架，以及原生框架+h5對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

什么叫支付寶原生h5

H5與原生是計算機領域的專業(yè)名詞，指的是原生開發(fā)和H5開發(fā)兩種APP開發(fā)方式。

（一）原生開發(fā)指的是基于系統(tǒng)語言的軟件開發(fā)。手機內通過安裝包安裝的應用基本都是原生開發(fā)。

具體的原生開發(fā)就是直接使用手機系統(tǒng)支持的框架語言直接開發(fā)。例如：Android手機就會直接使用Java語言和Android sdk開發(fā)Android手機的APP。蘋果手機就會使用OC或者Swift語言和蘋果APP的開發(fā)框架開發(fā)iOS手機APP。

當然，不論Android手機APP，還是蘋果手機APP，都是需要同一個后臺存儲數(shù)據(jù)和提供更新的。這樣的開發(fā)方式對人力分配和時間的消耗都比較高。

（二）H5指的是一種技術標準而非技術。這種標準需要廠商為此提供支持才能實現(xiàn)各種功能。H5一詞剛出現(xiàn)的時候，讓網(wǎng)頁擺脫了插件的局限。只是通過網(wǎng)頁代碼就能讓網(wǎng)頁頁面實現(xiàn)加載頁面素材，播放音頻等功能。提高了用戶和頁面之間的交互水平。

具體的H5開發(fā)就只需要H5的開發(fā)工程師將APP的頁面和功能全部實現(xiàn)。之后分別交給Android的工程師和iOS的工程師，兩個工程師直接套上一個APP開發(fā)的殼就可以直接使用了。非常節(jié)省時間和人力。但是在網(wǎng)絡連接不良的情況下，用戶體驗會比原生開發(fā)的APP要差一些。

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

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

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

1、開發(fā)方面的區(qū)別（這個地方太專業(yè)啦，請教了團隊的開發(fā)小伙伴）

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

移動WebApp

1、因為運行在移動設備的瀏覽器上，所以只需要一個開發(fā)項目

2、這種應用可以使用HTML5,CSS3以及JavaScript以及服務器端語言來完成(PHP,RubyonRails,Python)

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

原生App

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

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

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

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

移動WebApp

只能使用有限的移動硬件設備功能。

原生App

能夠與移動硬件設備的底層功能，比如個人信息，攝像頭以及重力加速器等等。對于這一點感觸很深刻，2016年做新年H5營銷小活動的時候，就是因為沒有考慮到H5不能使用移動硬件端重力加速器而導致臨時替換設計方案。

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

移動WebApp

1、從移動設備上的瀏覽器訪問

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

3、軟件更新只需要服務器就夠了

4、因為現(xiàn)在沒有什么商品或賣場提供這種App，不過一般都是嵌套在系統(tǒng)內部，或者內部系??????統(tǒng)中使用

5、跨平臺開發(fā)，用戶不需要去賣場來下載安裝App

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

7、任何時候都可以發(fā)布App，因為根本不需要官方賣場的審核

8、如果你已經有了一個WebApp，你可以使用responsivewebdesign來輔助改進(這也是優(yōu)勢?)

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

原生App

1、直接下載到設備

2、以獨立的應用程序運行(并不需要瀏覽器)

3、用戶必須手動去下載并安裝這些原生App

4、有一些商店與賣場來幫助用戶尋找你的App，appstore里面應有盡有。

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

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

7、原生型的APP可以調用手機終端的硬件設備(語音、攝像頭、短信、GPS、藍牙、重力感應等)

8、APP應用更新新功能，涉及到每次要向各個應用商店進行提交審核。

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

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

正式因為它有復雜多變的CSS樣式消耗了大量性能，它才有一個更有競爭力的優(yōu)勢——它帶來了多樣性的排版，能夠細致到每一個字寬行高和風格的像素級處理，能夠給你帶來不一樣的圖文匯合的排版。

H5 手機 App 開發(fā)入門：技術篇

手機 App 的技術?？梢苑殖扇?/p>

原生技術棧指的是，只能用于特定手機平臺的開發(fā)技術。比如，安卓平臺的 Java 技術棧，iOS 平臺的 Object-C 技術?；?Swift 技術棧。

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

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

這個技術棧就是純粹的容器技術棧，React Native、Xamarin、Flutter 都屬于這一類。學習時，除了學習容器的 API Bridge，還要學習容器提供的 UI 層，即怎么寫頁面

總結：H5 開發(fā)主要用在混合技術棧。但是，跨平臺技術棧的某些容器也會用到（比如 React Native），因為它們的 UI 層借鑒了 Web 模型。

另外，混合技術棧和跨平臺技術棧的基礎，都是原生技術棧，因為最終都要編譯成原生App。所以，不管使用哪一種技術棧，多多少少要了解一些各平臺的原生技術。

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

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

原生安卓開發(fā)app的框架frida安裝和Python小試牛刀

本教程只用于學習探討，不允許任何人使用技術進行違法操作，閱讀教程即表示同意！

frida是一個hook原生 安卓開發(fā)app 的一個框架，也不止安卓，像ios和win等，都支持，但是好像看到用的不太多。

注意，是原生，就是用Java+安卓開發(fā)的app。

還有些是H5之類的，這些是hook不成的，當然，市面上最起碼80%的app都是原生開發(fā)，不必擔心。

再說，H5開發(fā)的不是更容易破解？懂的都懂！

hook英文是鉤子的意思，可以理解為一堆水管流水，我在某個水管中間挖一個洞，操作一波再繼續(xù)流。

當然，我也可以只看看某個水管有沒有水。

上述這個過程就叫做修改和驗證！

可以使用編寫的簡單Python環(huán)境管理器快速創(chuàng)建一個虛擬環(huán)境，可視化就是好，再也不用記該死的命令了！

相關鏈接：

這里已經創(chuàng)建完畢，虛擬環(huán)境名為 frida_env

當然，這是一個差不多的參考價值，不一定準，具體情況具體分析。

在安裝frida時，盡量科學上網(wǎng)，因為frida好像會下載一些東西，不科學上網(wǎng)非常慢...可能會卡住很長時間！

根據(jù)我的環(huán)境，這是我的依賴包，在虛擬環(huán)境中pip安裝即可！

安裝完成之后，分別執(zhí)行 frida --version 和導入 frida ，如果沒有報錯則表示安裝成功！

frida-server下載鏈接:

綜上所述，我pip的frida版本為14.2.18，手機是arm64，所以要下載這個！

確實存在，ok。

這樣就已經運行起來了，他是不會有提示的，是直接wait在這的！

注意啊，這個cmd窗口是不能關的，一直掛這就行！

激活上述創(chuàng)建好的虛擬環(huán)境，執(zhí)行以下命令。

如果出現(xiàn)以下信息，表示正確！這是手機的一些信息，表示能獲取到。

到這，pc端的frida和手機端的frida-server就建立成功了，主要流程就是

如果frida版本=12，好像是要進行端口轉發(fā)的

pc上配置frida沒什么好說的了，創(chuàng)建一個虛擬環(huán)境，安裝frida就好了。

手機上的話，第一次需要把frida-server拷貝到 /data/local/tmp 下和 chmod

然后運行這個frida-server，命令總結一下大概為：

下次使用直接復制就可以了！

因為frida使用的是js語言，并且需要安裝一個代碼自動提示插件，所以WebStorm最合適，官網(wǎng)下載點擊下一步下一步即可。

這里不做敘述。

嗯，還需要安裝node，自己折騰吧！

創(chuàng)建一個空項目，選擇合適的目錄。

打開項目，點擊下面的Terminal，輸入 npm i @types/frida-gum 安裝frida代碼自動提示。

這不，關于frida的代碼就能自動提示了！

題外話

通過Charles+postern進行抓包，發(fā)現(xiàn)登錄用的接口為

可以發(fā)現(xiàn)帶的數(shù)據(jù)是一個 {"Encrypt":"xxx"} ,擦,這是什么玩意啊？？？

這個apk是沒有加固的，通過反編譯搜索一下 user/login 試試！??！

找到了兩處 user/login ，其中一個是login函數(shù)！

那么，現(xiàn)在問題來了，到底 user/login 走的是不是login？如何驗證？

此時點擊手機上面的登錄按鈕，然后看pc上控制臺的輸出！

確實輸出了，經過驗證，確實是執(zhí)行了這個login。

然后你再進行一遍hook和分析即可。

下節(jié)課就來分析如何自動登錄這個app！

想要玩轉hook，大概分為以下幾步

人生沒有白走的路，加油！

原生h5的app開發(fā)框架的介紹就聊到這里吧，感謝你花時間閱讀本站內容，更多關于原生框架+h5、原生h5的app開發(fā)框架的信息別忘了在本站進行查找喔。