【南昌APP開發(fā)】H5 手機 App 開發(fā)入門：技術(shù)篇
2020-05-23 09:26:19
新人學習手機 App 開發(fā)，一開始總要選擇一條學習路徑。
如果你熟悉 Java 語言，可以學習安卓開發(fā)；如果熟悉腳本語言（比如 Python 或 Ruby），可以學習 Swift 語言，進行 iOS 開發(fā)；如果像我一樣，比較熟悉 Web 網(wǎng)頁技術(shù)，那么 H5 開發(fā)是最容易上手的。
手機 App 的技術(shù)?？梢苑殖扇?。
（1）原生 App 技術(shù)棧 （native technology stack）
原生技術(shù)棧指的是，只能用于特定手機平臺的開發(fā)技術(shù)。比如，安卓平臺的 Java 技術(shù)棧，iOS 平臺的 Object-C 技術(shù)?；?Swift 技術(shù)棧。
這種技術(shù)棧只能用在一個平臺，不能跨平臺。
（2）混合 App 技術(shù)棧 （hybrid technology stack）
混合技術(shù)棧指的是開發(fā)混合 App 的技術(shù)，也就是把 Web 網(wǎng)頁放到特定的容器中，然后再打包成各個平臺的原生 App。所以，混合技術(shù)棧其實是 Web 技術(shù)棧 + 容器技術(shù)棧，典型代表是 PhoneGap、Cordova、Ionic 等框架。
如果已經(jīng)掌握了 Web 技術(shù)，這個技術(shù)棧就主要學習容器提供的 API Bridge，網(wǎng)頁通過它們?nèi)フ{(diào)用底層硬件的 API。
（3）跨平臺 App 技術(shù)棧 （cross-platform technology stack）
跨平臺技術(shù)棧指的是使用一種技術(shù)，同時支持多個手機平臺。它與混合技術(shù)棧的區(qū)別是，不使用 Web 技術(shù)，即它的頁面不是 HTML5 頁面，而是使用自己的語法寫的 UI 層，然后編譯成各平臺的原生 App。
這個技術(shù)棧就是純粹的容器技術(shù)棧，React Native、Xamarin、Flutter 都屬于這一類。學習時，除了學習容器的 API Bridge，還要學習容器提供的 UI 層，即怎么寫頁面。
（4）小結(jié)
H5 開發(fā)主要用在混合技術(shù)棧。但是，跨平臺技術(shù)棧的某些容器也會用到（比如 React Native），因為它們的 UI 層借鑒了 Web 模型。
另外，混合技術(shù)棧和跨平臺技術(shù)棧的基礎(chǔ)，都是原生技術(shù)棧，因為最終都要編譯成原生App。所以，不管使用哪一種技術(shù)棧，多多少少要了解一些各平臺的原生技術(shù)。
下面就依次介紹上面三類技術(shù)棧，每個技術(shù)棧都會給出一個最簡單的例子：加載網(wǎng)頁。通過各種技術(shù)棧加載網(wǎng)頁的不同做法，幫助大家理解它們的特點，對 App 的技術(shù)實現(xiàn)有一個總體的認識。
二、WebView 控件
講解具體的技術(shù)棧之前，大家需要知道，不管什么技術(shù)，最終在 App 里面顯示網(wǎng)頁，一定需要一個網(wǎng)頁引擎，這樣才能解析網(wǎng)頁。
通常情況下，App 內(nèi)部會使用 WebView 控件作為網(wǎng)頁引擎。這是系統(tǒng)自帶的控件，專門用來顯示網(wǎng)頁。應用程序的界面，只要放上 WebView，就好像內(nèi)嵌了瀏覽器窗口，可以顯示網(wǎng)頁
不同的 App 技術(shù)棧要顯示網(wǎng)頁，區(qū)別僅僅在于怎么處理 WebView 這個原生控件。
?原生技術(shù)棧：需要開發(fā)者自己把 WebView 控件放到頁面上。
?混合技術(shù)棧：頁面本身就是網(wǎng)頁，默認在 WebView 中顯示。
?跨平臺技術(shù)棧：提供一個 WebView 的語法，編譯的時候?qū)⑵鋼Q成原生的 WebView。
如果你熟悉 Java 語言，可以學習安卓開發(fā)；如果熟悉腳本語言（比如 Python 或 Ruby），可以學習 Swift 語言，進行 iOS 開發(fā)；如果像我一樣，比較熟悉 Web 網(wǎng)頁技術(shù)，那么 H5 開發(fā)是最容易上手的。
南昌APP開發(fā),南昌APP制作,南昌app開發(fā)公司,南昌小程序開發(fā),南昌網(wǎng)站建設(shè),江西APP定制開發(fā)
這個系列教程的第一篇，已經(jīng)介紹過了手機 App 的種類[1]。所謂的 H5 頁面，其實就是混合 App 的前端，外面是一個原生的殼，里面是 Web 網(wǎng)頁。本文緊接上一篇，介紹手機 App 開發(fā)的技術(shù)棧，尤其是跟 H5 開發(fā)相關(guān)的技術(shù)。
手機 App 的技術(shù)?？梢苑殖扇?。
（1）原生 App 技術(shù)棧 （native technology stack）
原生技術(shù)棧指的是，只能用于特定手機平臺的開發(fā)技術(shù)。比如，安卓平臺的 Java 技術(shù)棧，iOS 平臺的 Object-C 技術(shù)?；?Swift 技術(shù)棧。
這種技術(shù)棧只能用在一個平臺，不能跨平臺。
（2）混合 App 技術(shù)棧 （hybrid technology stack）
混合技術(shù)棧指的是開發(fā)混合 App 的技術(shù)，也就是把 Web 網(wǎng)頁放到特定的容器中，然后再打包成各個平臺的原生 App。所以，混合技術(shù)棧其實是 Web 技術(shù)棧 + 容器技術(shù)棧，典型代表是 PhoneGap、Cordova、Ionic 等框架。
如果已經(jīng)掌握了 Web 技術(shù)，這個技術(shù)棧就主要學習容器提供的 API Bridge，網(wǎng)頁通過它們?nèi)フ{(diào)用底層硬件的 API。
（3）跨平臺 App 技術(shù)棧 （cross-platform technology stack）
跨平臺技術(shù)棧指的是使用一種技術(shù)，同時支持多個手機平臺。它與混合技術(shù)棧的區(qū)別是，不使用 Web 技術(shù)，即它的頁面不是 HTML5 頁面，而是使用自己的語法寫的 UI 層，然后編譯成各平臺的原生 App。
這個技術(shù)棧就是純粹的容器技術(shù)棧，React Native、Xamarin、Flutter 都屬于這一類。學習時，除了學習容器的 API Bridge，還要學習容器提供的 UI 層，即怎么寫頁面。
（4）小結(jié)
H5 開發(fā)主要用在混合技術(shù)棧。但是，跨平臺技術(shù)棧的某些容器也會用到（比如 React Native），因為它們的 UI 層借鑒了 Web 模型。
另外，混合技術(shù)棧和跨平臺技術(shù)棧的基礎(chǔ)，都是原生技術(shù)棧，因為最終都要編譯成原生App。所以，不管使用哪一種技術(shù)棧，多多少少要了解一些各平臺的原生技術(shù)。
下面就依次介紹上面三類技術(shù)棧，每個技術(shù)棧都會給出一個最簡單的例子：加載網(wǎng)頁。通過各種技術(shù)棧加載網(wǎng)頁的不同做法，幫助大家理解它們的特點，對 App 的技術(shù)實現(xiàn)有一個總體的認識。
二、WebView 控件
講解具體的技術(shù)棧之前，大家需要知道，不管什么技術(shù)，最終在 App 里面顯示網(wǎng)頁，一定需要一個網(wǎng)頁引擎，這樣才能解析網(wǎng)頁。
通常情況下，App 內(nèi)部會使用 WebView 控件作為網(wǎng)頁引擎。這是系統(tǒng)自帶的控件，專門用來顯示網(wǎng)頁。應用程序的界面，只要放上 WebView，就好像內(nèi)嵌了瀏覽器窗口，可以顯示網(wǎng)頁
不同的 App 技術(shù)棧要顯示網(wǎng)頁，區(qū)別僅僅在于怎么處理 WebView 這個原生控件。
?原生技術(shù)棧：需要開發(fā)者自己把 WebView 控件放到頁面上。
?混合技術(shù)棧：頁面本身就是網(wǎng)頁，默認在 WebView 中顯示。
?跨平臺技術(shù)棧：提供一個 WebView 的語法，編譯的時候?qū)⑵鋼Q成原生的 WebView。
注意，不同系統(tǒng)的 WebView 控件名稱不一樣，安卓系統(tǒng)就叫 WebView，iOS 系統(tǒng)有較老的 UIWebView，也有較新的 WKWebView，作用都是一樣的，差異在于功能的強弱。
南昌樂騰科技有限公司是國內(nèi)8年專業(yè)從事南昌APP定制開發(fā)、南昌微信小程序開發(fā)、南昌微信應用開發(fā)、南昌網(wǎng)站建設(shè)、南昌電商網(wǎng)站平臺開發(fā)的公司，我們致力于成為國內(nèi)最好的互聯(lián)網(wǎng)應用研發(fā)公司?？蛻魺峋€：4006881286
