Web 开发人员构建移动应用程序的最简单方法

对于有兴趣构建移动应用的 Web 开发者来说，如今的选择非常丰富。开发者可以选择 React Native、NativeScript、Cordova、Ionic Framework 和 Capacitor 等项目，仅举几例。

由于选项众多，对于寻求熟悉的基于 Web 的开发体验的 Web 开发人员来说，并不总是清楚什么是最合适的。

因此，我想证明Capacitor （可选地使用像Ionic Framework这样的以移动为中心的 UI 框架）是 Web 开发人员构建移动应用程序最自然、最简单的方式。

“移动版 Electron”

Electron是一款非常流行的解决方案，它使用标准 Web 技术构建跨平台桌面应用。Web 开发者可以使用他们用于 Web 应用的标准 HTML、CSS 和 JavaScript，包括任何流行的库，例如 React/Angular/Vue、Tailwind 或 Material UI，并将这些应用转变为功能强大的桌面应用。

这个简单的公式让 Electron 成为了最受欢迎的跨平台工具包之一。如今，Electron 为许多热门应用提供支持，例如 Slack 和 VS Code。

如果你曾经问过自己“除了移动应用程序之外，Electron 的类似物是什么？”答案就是Capacitor。

与 Electron 类似，Capacitor 采用在浏览器中运行的标准 Web 应用，并通过强大的原生 API 和原生 UI（例如相机和文件系统）对其进行扩展。这些 API 适用于 iOS、Android、Web 和 Electron。

Electron 通过 Chromium 捆绑了“Web 视图”，而 Capacitor 使用的是 iOS 和 Android 上可用的标准嵌入式 Web 视图原生控件。这意味着 Capacitor 不会像 Electron 那样遭受系统臃肿的问题。

最终效果是，Capacitor 实际上是一种“移动版 Electron”。

那么 React Native 或 Flutter 怎么样？

您可能会问自己：为什么 React Native（或 Flutter）不是“移动版 Electron”？

原因在于，React Native 和 Flutter 不使用标准的 Web 浏览器环境来运行应用。相反，它们是对系统 UI 控件和 API 的抽象，旨在提供“类似 Web”的应用构建体验，而非真正的 Web 环境。两者都需要针对每个平台专门编写代码，并且无法使用特定于 Web 的库或代码。

这很重要，因为这意味着 Web 开发人员构建移动应用程序的最短路径毫无疑问是 Capacitor：

一个例子

让我们举一个简单的例子，一个使用 Ionic Framework 和 React 的 Web 应用程序，以获得原生质量的移动 UI 体验，并使用 Capacitor 将其原生部署到 iOS、Android 和 Web。

看一下代码，我们发现它只是一个普通的 React 应用，只是恰好使用了 Ionic 框架作为 UI 组件。例如，熟悉 React Router 的开发者应该会发现用于构建 Tab 布局的 JSX很熟悉。

然后，通过运行一些 Capacitor 命令，我们可以捆绑应用程序并直接在 Xcode 中运行它：

由于我们的应用程序只是一个简单的 React 应用程序，我们还可以直接在浏览器中运行它，甚至可以将其作为渐进式 Web 应用程序部署到任何静态 Web 主机：

最后，Capacitor 附带一个 JS 模块，@capacitor/core它提供了一种一致的跨平台方法来访问设备功能。

例如，要访问FilesystemAPI，我们可以在 iOS、Android、Web 和 Electron 上使用相同的代码：

import {

  Plugins, 

  FilesystemDirectory,

  FilesystemEncoding

} from '@capacitor/core';


const { Filesystem } = Plugins;


async fileWrite() {

  try {

    const result = await Filesystem.writeFile({

      path: 'secrets/text.txt',

      data: "This is a test",

      directory: FilesystemDirectory.Documents,

      encoding: FilesystemEncoding.UTF8

    })

    console.log('Wrote file', result);

  } catch(e) {

    console.error('Unable to write file', e);

  }

}

谁在使用电容器？

如今，Capacitor 已广泛应用于主流应用。汉堡王、Popeyes 和 BBC（BBC 曾撰写了一篇精彩的文章，介绍他们如何利用 Capacitor 构建通用的 Web 原生应用）等公司都在使用 Capacitor，通过统一的代码库和标准的 Web 技术，构建适用于 iOS、Android、Web 和桌面平台的应用。

Capacitor 也是Ionic Framework的新原生基础，目前为应用商店中超过 15% 的应用提供支持。

电容器入门

如果你熟悉 Electron，那么 Capacitor 对你来说应该非常熟悉。它像一个典型的 JS 模块一样直接安装到你的应用中，并且还添加了一个本地 CLI 工具，用于将你的 Web 应用复制到原生 iOS 和 Android 项目，以及同步和安装新的 Capacitor 插件。

要开始使用 Capacitor，请查看官方Capacitor 文档并开始构建！