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

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

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

‣ 必备条件

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

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配置文件 vite.config.js 删除
文件从 capacitor-welcome.js 您的新文件夹结构应类似于： www/js/.

Remove the file from your new folder

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. Your index.html 已经准备就绪。

vite.config.js

为了将我们的 Node.js 模块与 Vite一起打包，我们需要一个配置文件，指定打包后的脚本的输出位置。以下配置将文件 src/index.js 打包为生产环境的 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 属性并将其更改为 false。这项调整确保了 Capacitor 不会打包文件，让我们使用 Vite 来完成这个任务。

With these changes, your Capacitor application’s basic setup is complete, and you’re ready to start developing your app with pure JavaScript.

‣ 开发您的应用

Now that the groundwork is laid, you can begin writing your application logic in the src/index.js 文件。这里，您可以导入任何必要的 Node.js 模块，定义您的应用的功能，并与 Capacitor 的原生插件进行交互。

记住在您修改代码时，运行 Vite 的构建命令以打包您的 JavaScript 文件：

vite build

This command will generate the main.js 文件在您的 www/js 目录中，这个文件将被您的 index.html 文件引用。

‣ 测试和调试

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

对于 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

这些命令将允许您在 Android Studio、Xcode 或您的浏览器中运行您的应用程序，方便测试和调试。

‣ 结论

使用纯 JavaScript 开发跨平台应用程序的 CapacitorJS 是一种节省成本和高效的方法，能够以单个代码库创建多个平台的应用程序。通过遵循本指南，您已设置了项目、重构了它以适应 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 原生构建的产品工作流程。

使用CapacitorJS创建跨平台应用：一步步指南