使用 CapacitorJS 开发跨平台应用：一步步指南

在移动应用开发领域不断演进的世界中，渐进式网页应用（PWA）的兴起为新型的跨平台运行时提供了道路。这些运行时使基于web的应用能够在应用商店中存在，而不仅仅依赖于native code。其中一种促进这一技术的工具是 CapacitorJS,它允许开发者使用单个JavaScript代码库将简单的网站部署为应用程序，跨越Android、iOS和web。这种方法显著降低了开发成本并提高了编码效率。

本指南将专注于使用纯JavaScript（无需任何额外框架）创建应用程序。尽管2021年纯JavaScript应用开发资源的挑战，我们仍然为您提供了构建应用程序和利用CapacitorJS的native插件的全面教程。

‣ 必备条件

在开始之前，请确保您已安装以下工具：

Node.js (v14.16.1) 或更高版本
NPM (v7.6.2) 或更高版本
Android Studio 为 Android 应用开发
Xcode 为 iOS 应用开发 (macOS only)

注意: iOS 应用开发仅在 macOS 设备上可用。

‣ 设置您的 Capacitor 项目

要创建一个 Capacitor 应用，请导航到您的所需文件夹并在终端中执行以下命令：

npm init @capacitor/app

按照提示安装包并设置项目。使用 Capacitor v3，项目目录应如下所示：

www/
  css/
    style.css
  js/
    capacitor-welcome.js
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md

完成初始设置后，您就可以继续了。

‣ 项目重构

我们将使用 Vite 来打包 JavaScript 文件，因此让我们重新组织我们的项目：

创建新建一个文件夹 src 在主目录。
创建在新建一个脚本文件 index.js 在 src/.
创建在主目录。 vite.config.js 删除
文件从 capacitor-welcome.js 您的新文件夹结构应类似于： www/js/.

__CAPGO_KEEP_0__

src/
  index.js
www/
  css/
    style.css
  js/
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js

‣ 适应纯 JavaScript

让我们修改一些文件以适应纯 JavaScript：

www/index.html

移除对 Ionic PWA Elements 的脚本导入（如果您不打算将应用程序发布为 PWA）：

<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>

删除 <capacitor-welcome> HTML 元素从 body 中。
更新脚本导入从 capacitor.js 到 js/main.js。这将是我们的打包 JavaScript 文件。
移除 js/capacitor-welcome.js import. 你的 index.html 已经准备就绪。

vite.config.js

为了将我们的 Node.js 模块与 Vite一起打包，我们需要一个配置文件，指定打包后的脚本的输出位置。以下配置将文件 src/index.js __CAPGO_KEEP_0__.config.json www/js/main.js:

import { defineConfig } from 'vite';
import path from 'node:path';

export default defineConfig({
  build: {
    outDir: path.resolve(__dirname, 'www'),
    rollupOptions: {
      input: './src/index.js',
      output: {
        format: 'es',
        file: path.resolve(__dirname, 'www/js/main.js')
      }
    }
  }
});

capacitor.config.json

属性修改为 capacitor.config.json 。这项调整确保 "bundledWebRuntime": true __CAPGO_KEEP_0__ false. This adjustment ensures that Capacitor does not bundle the files, allowing us to use Vite for that purpose instead.

使用这些更改，Capacitor应用的基本设置已经完成，您可以开始使用纯JavaScript开发应用程序了。

‣ 开发您的应用程序

现在 groundwork 已经铺好，您可以开始编写应用程序逻辑的 src/index.js 文件。在这里，您可以导入任何必要的Node.js模块、定义应用程序的功能并与Capacitor的原生插件进行交互。

请记住，在您进行更改时运行Vite的构建命令以打包您的JavaScript文件：

vite build

此命令将在您的 main.js 目录中生成 www/js 文件，这个文件将被您的 index.html 文件引用。

‣ 测试和调试

Capacitor提供了一个方便的方式来测试您的应用程序在各种平台上。使用以下命令在各个平台的开发环境中打开您的应用程序：

For Android:

npx cap add android
npx cap open android

For iOS (macOS only):

npx cap add ios
npx cap open ios

For Web/PWA:

npx cap serve

These commands will allow you to run your application in Android Studio, Xcode, or your web browser, where you can test and debug as needed.

‣ 结论

使用 CapacitorJS 开发跨平台应用程序的纯 JavaScript 是一种节省成本和高效的方法，通过单个代码库来创建多个平台的应用程序。通过遵循本指南，您已设置项目、重构为 Vite 并为开发做好准备。基于此基础，您已经具备了构建强大且灵活的应用程序的能力。

请记住在所有平台上进行彻底的测试，并利用 Capacitor 的原生插件来增强应用程序的功能。Happy coding!

继续阅读 Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide

如果您正在使用 Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide 来规划原生插件工作，连接它与 Capgo Plugin Directory 来为 Capgo Plugin Directory 中的产品工作流程做准备, Capacitor 插件由 Capgo 为 Capacitor 插件由 Capgo 的实现细节添加或更新插件为添加或更新插件的实现细节 Ionic 企业插件替代品为 Ionic 企业插件替代品的产品工作流程, 和 Capgo 本机构建为 Capgo 本机构建的产品工作流程。