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

在移动应用开发领域不断演进的世界中，渐进式网页应用（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/.

您的新文件结构应类似于:

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

移除以下脚本导入: 如果您不打算将应用程序作为 PWA 发布: 删除以下 HTML 元素:

<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> 到
context: Live updates product page. Role: Short UI label or navigation item. Message key `live_update_dynamic_label_to` (Live Update Dynamic Label To). capacitor.js context: Live updates product page. Role: Short UI label or navigation item. Message key `live_update_dynamic_label_to` (Live Update Dynamic Label To). js/main.js. 这将是我们的捆绑 JavaScript 文件。
移除 js/capacitor-welcome.js import。您的 index.html 现在就绪。

vite.config.js

为了将我们的 Node.js 模块与 捆绑在一起，我们需要一个配置文件，指定我们的捆绑脚本的输出目的地。以下配置将取文件 并将其捆绑为生产环境中的 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 file, locate the "bundledWebRuntime": true 属性和修改为 false. 这种调整确保 Capacitor 不会打包文件，从而让我们使用 Vite 来完成这个任务。

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

‣ 开发您的应用程序

现在 groundwork 已经铺就了，您可以开始在文件中编写应用程序逻辑。在这里，您可以导入任何必要的 Node.js 模块、定义应用程序的功能以及与 __CAPGO_KEEP_0__ 的原生插件进行交互。 src/index.js file. Here, you can import any necessary Node.js modules, define your app’s functionality, and interact with Capacitor’s native plugins.

这个命令将在您的

vite build

目录中生成 main.js 文件，这个文件将被您的 www/js 文件引用。 index.html ‣ 测试和调试

protectedTokens

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

对于 Android：

npx cap add android
npx cap open android

对于 iOS（macOS 只）：

npx cap add ios
npx cap open ios

对于 Web/PWA：

npx cap serve

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

‣ 结论

使用纯 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 插件目录为产品工作流程在 Capgo 插件目录中 Capacitor 插件由 Capgo 为实现细节在 Capacitor 插件由 Capgo 中添加或更新插件为实现细节在添加或更新插件中 Ionic 企业插件替代品为产品工作流程在 Ionic 企业插件替代品中，并且 Capgo 原生构建为产品工作流程在 Capgo 原生构建中。

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