• frontend
  • flutter
  • H5 手机 APP 开发

H5 手机 APP 开发

一、H5 是什么

互联网早期，我们上网冲浪主要通过电脑的浏览器、桌面软件等，随着手机技术的革新，目前手机已经超过电脑成为互联网的最大入口。

手机 App 则是手机中的内容载体，我们在手机上浏览各种内容离不开手机 App 软件的开发。

手机 App 可以分为三类：

  • 原生应用（native application，简称 native App）
  • Web 应用（web application，简称 Web App）
  • 混合应用（hybrid application，简称 hybrid App）

H5 这个词，特指的是混合 App 的前端部分。它实际上就是 HTML5 网页。外国并没有 H5 这个词，直接叫混合 App。

二、原生应用

原生 App 是专门为特定的开发平台开发的应用程序，无法在其他平台运行。一个软件如果希望在苹果手机（ios 平台）和安卓手机（android 平台）同时运行，就需要开发两套 App。

这是因为 IOS 是由苹果公司出的，安卓是谷歌公司出的，两家公司都发布了自家平台原生 App 的开发方式。

原生 App 使用与手机操作系统相同的语言。iOS 的原生 App 使用 Objective-C 语言或 Swift 语言，安卓使用 Java 语言或 Kotlin 语言。由于跟底层系统的语言和技术模型一致，所以原生 App 的性能和用户体验都很好。

原生 App 的优点体现在：

  1. 性能和体验较好
  2. 可以直接调用系统的软件和硬件的 API，例如通知推送、摄像机、GPS 等功能。

缺点则是：

  1. 成本太高，一家公司同一个软件可能需要培养两个独立的团队，如果再出现第三者平台，例如鸿蒙，成本就会更高
  2. 原生 App 使用的底层操作语言，是重型编译语言，开发周期长
  3. 原生 App 比如下载安装才能使用

三、Web 应用

Web 应用是使用网页完成的应用程序，必须在浏览器中使用。

Web App 主要使用 Web 技术，只需要兼容手机的样式、尺寸即可，用户直接通过浏览器输入 URL 就可以访问。

优点：

  1. 开发快，成本低，只需要 Web 开发团队就可以完成
  2. 不需要下载安装，打开浏览器就可以访问最新版本

缺点：

  1. 浏览器提供的 API 有限，不具备完全使用手机操作系统的软硬件 API 的能力
  2. 浏览器渲染的网页，不适合做性能要求高的页面。
  3. 需要打开浏览器才能使用，不如原生 App 方便

3.1 PWA

从做浏览器的团队的立场来说，用户依赖浏览器是对他们最有利的行为。

谷歌公司的 chrome 团队就认为，Web App 能够满足大多数人的需求，而且能给用户带来原生应用的体验。

为了推广 Web App，他们开发了新技术“渐进式 Web App”（Progressive Web App，缩写 PWA）。PWA 能做到原生应用的体验不是靠某一项特定技术，而是经过应用一系列新技术进行改进。

它能够解决以下问题：

  1. 用户不需要通过浏览器，首屏就能直接进入 Web App。
  2. 缺乏通知推送能力。
  3. 不支持断网使用

它主要是把网站缓存在手机里面，这样离线就可以使用，还可以在手机首屏生成图标，让用户直接点击进入，并且具有推送通知的能力。另外还隐藏了浏览器的地址栏和状态栏，跟原生的 App 体验非常接近。

但是，PWA 需要浏览器访问一次网站，才能在首屏生成图标，并且目前 IOS 的支持并不理想，所以目前还是探索性的技术。

四、混合应用

混合 App 就是把 Web App 跟原生 App 结合起来，它的壳是原生 App，里面的内容放的是网页。

可以理解为，混合 App 内隐藏了一个浏览器，用户实际上是这个隐藏浏览器渲染出来的页面。

混合 App 从内到外有三层：容器层、网页引擎层、HTML5 网页层。

混合 App 的外壳是容器层，内部隐藏的浏览器，通常是系统提供的网页渲染控件（WebView 控件），也可以内置浏览器内核，网页层是用来展示页面的。

4.1 API Bridge

混合 App 里面的网页可以调用底层系统的所有 API，奥秘就在外层容器提供了 API Bridge，充当底层 API 的中介，允许内部的网页调用底层。

API Bridge 是容器在底层接口和网页之间，建立的一层桥梁，让双方通信。容器一旦收到网页的请求，就根据请求去调用底层系统 API，然后将结果返回给网页。

API Bridge 往往以 JavaScript 语言提供，方便网页调用，这时又称为 JSbridge。

API Bridge 需要跟着平台更新，比如，IOS 新发布了版本，有了新的硬件 API，容器也必须跟着出新的 API Bridge，否则网页就不能使用新的硬件。

4.2 混合应用的优缺点

混合 App 同时具有原生 App 和 Web App 的优点，如下：

  1. 跨平台，开发者只需要写一次页面，就能够支持多个平台，开发成本低
  2. 开发便捷，传统的前端程序员就可以完成功能
  3. 版本更新容易，只需要在服务器发布更新版本，并触发容器内更新就可以了。

缺点也很明显：

  1. 由于存在网页引擎的中间层，性能不仅不如原生 App，而且由于 WebView 并非全功能浏览器，可能比 Web App 也要慢一些
  2. 由于页面跨平台，就无法使用特定平台提供的功能，导致体验不如原生 App。比如早期安卓有物理后退按钮，iPhone 没有，所以 IOS 的页面设计就需要加上后退按钮，这样产生的结果是同样的页面在安卓上会出现两个后退按钮。

4.3 小程序

小程序可以看作是针对特定容器的 H5 开发。微信本身就是这样一个容器，它开放了自己的接口，外部开发者使用规定的语法，编写页面，容器可以动态加载这些页面。

小程序对于微信官方的好处是扩展了功能和应用场景，繁荣了微信生态。给外部开发者带来的好处是有了流量入口，并且还能调用微信的一些功能。

五、技术方案

手机 App 的技术栈可以分成三类：

  1. 原生 App 技术栈

    特定于手机平台的开发技术。比如安卓的 Java 技术栈，IOS 平台的 Swift 或 Object-C 技术栈，这种技术栈只能用于一个平台。

  2. 混合 App 技术栈

    开发混合 App 的技术，也就是把 Web 网页放到特定的容器中，然后打包成各个平台的原生 App。混合技术栈其实是 Web 技术栈+容器技术栈。主要学习方向是通过容器提供的 API Bridge，来使得网页可以调用底层硬件的 API。

  3. 跨平台 App 技术栈

    跨平台技术栈指的是一种技术同时支持多个手机平台。它与混合技术栈的区别是，不适用 Web 技术，它的页面并不是 HTML5 页面，而是使用自己的语法写的 UI 层，然后编译成各平台的原生 App。

    这个技术栈是纯粹的容器技术栈，除了要学习容器的 API Bridge，还需要学习容器提供的书写 UI 页面的方法。

H5 开发主要用在混合技术栈。但是，跨平台技术栈的某些容器也会用到（比如 React Native），因为它们的 UI 层借鉴了 Web 模型。

5.1 WebView 控件

不管用什么技术，最终想在 App 中显示页面，都需要网页引擎才能解析页面。

通常情况下，App 内部会提供 WebView 控件作为网页引擎，这是系统提供的硬件专门用来显示网页。应用程序的界面，只要放上 WebView，就好像装上了浏览器窗口，就可以显示网页。

但不同的 App 技术栈处理 WebView 控件的方式不同：

  • 原生技术栈：需要开发者自己把 WebView 控件放页面上
  • 混合技术栈：页面本身就是网页，默认在 WebView 上显示
  • 跨平台技术栈：提供一个 WebView 语法，编译的时候将其换成原生的 WebView

5.2 最早的跨平台方案

最早的跨平台解决方案是基于 WebView 的，主要是通过 HTML、JavaScript 来构建界面，让其显示在各个平台的 WebView 中，但这样有一些缺陷，网页默认不能调用手机本地的一些服务，比如（蓝牙，相机等），这就需要通过 JSBridge 来间接调用原生应用的方法来实现功能。

这种方式导致的客户体验并不理想。

5.3 React Native

RN 使用 JavaScript 语言、JSX、CSS 来开发移动应用，为了保证渲染性能，它用原生的 UI 组件来实现核心的渲染引擎。

本质上是通过 JavaScript VM（虚拟机）来调用原生接口，通信效率比较低效，并且框架本身不负责渲染，而是间接通过原生方法来渲染。