移动端开发大混战--术语解释

为何要写这篇文章？

一直从事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