移動端開發大混戰--術語解釋

爲何要寫這篇文章？

一直從事PC端開發，對移動端知之甚少，常常看到前端文章中的不少術語，不明白其中的差異，所以特地整理了一下，但願能對您有幫助^_^

移動端開發分類

• 原生APP(NativeApp)
  • 開發技術：使用和手機系統一致的開發語言，所以能夠調用手機操做系統的任何功能。
  • 優勢：使用流暢。
  • 缺點：針對IOS、Android要兩個開發團隊，精力太大；每次更新時，用戶都要從新下載APP。
• WebApp
  • 嵌入在手機瀏覽器中的網頁，經常使用技術是HTML5+JS+CSS3
  • 優勢：每次更新時，用戶無感知。
  • 缺點：不能離線使用，沒法使用推送消息，必須用瀏覽器才能查看。
• 對比：用戶在WebApp中，瀏覽的網站較多，但停留時間較短。在原生APP中，瀏覽次數較少，但停留時間長。
• PWA：漸進式APP
  • chrome團隊爲了解決Web APP提出的一個解決方案，但目前尚未特別好的實例。
  • 支持離線、支持發送消息，能夠在桌面生成圖標（但用戶必須先用瀏覽器訪問一次該網站才能生成圖標，且IOS系統的支持還不理想）
• 混合應用
  • 由容器、網頁引擎、H5頁面構成
  • 容器提供 底層和H5之間的API Bridge，可讓H5頁面直接調用操做系統的API。
  • 不一樣的容器，支持的API Bridge不一樣。若是有新的系統更新，那須要 推出新版本的API Bridge
  • 優勢：跨平臺，一次開發，多個平臺使用；很容易加載外部的H5頁面；Web頁面能夠方便地調用外部的Web服務。
  • 缺點：不夠流暢

移動端開發--技術解釋

• 原生APP
  • IOS端：Object-C、Swift
    • X-Code開發工具
  • Android：Java
    • 調試時，必須鏈接真機，或安裝安卓虛擬機
  • WebView控件：須要開發者本身把WebView控件，放到頁面上
• 混合APP：Hybrid APP
  • 原理：把Web網頁放在不一樣的容器中，而後再打包成各個平臺的原生APP。即容器+Web。
  • 有多種容器可供選擇，不一樣容器提供的API Bridge不一樣。
    • PhoneGap、Codova、Ionic
  • WebView控件：頁面自己就是網頁，默認在WebView中顯示
  • PhoneGap（發行版）—>Cordova（內核）
  • 基於Cordova的框架：Ionic、Monaca、Framework7等
• 跨站（windows和Mac OS）APP
  • 不使用Web技術，有本身的語言體系，如Flutter用的是Dart語言，ReactNative用的和JS相似。
  • 原理：使用本身的語法寫UI層，而後編譯時，將其轉換成原生控件，或者使用本身的底層控件生成原生APP。
  • 開發技術：Flutter、ReactNative、Xamarin
  • ReactNative：JS語法
    • 全部的控件都是本身定義的，編譯時再一一翻譯爲對應的原生控件。
    • 但UI抽象層，翻譯爲適用IOS、安卓系統時的原生頁面，作不到徹底一致，尤爲是複雜頁面，會致使有各類小毛病，因此最好捨棄。
  • Xamarin：C#
    • 微軟公司作的，原理和React Native相似
  • Flutter：Dart語法
    • 本身實現一套控件，打包時，將整個控件直接打包進APP，不存在兼容性問題，無論什麼平臺都調用本身內嵌的那套控件，這樣IOS和Android下的體驗一致。
  • WebView控件：提供一個WebView的語法，編譯的時候，將其換成原生的WebView

參考連接

1.阮一峯--H5手機開發入門-概念篇

2.阮一峯--H5手機開發入門-技術篇

3.webapp 和 WAP的區別1

4.webapp 和 WAP的區別2