使用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 应用开发
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 文件，因此让我们重构我们的项目：

创建 __CAPGO_KEEP_0__ src __CAPGO_KEEP_0__
创建 __CAPGO_KEEP_0__ index.js 在 src/.
创建 __CAPGO_KEEP_0__ 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 形式发布应用程序，请移除以下脚本导入: Ionic PWA Elements 删除以下 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>

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

vite.config.js

为了将我们的 Node.js 模块与 Vite 打包，我们需要一个配置文件，指定打包脚本的输出目的地。以下配置将文件 和将其打包为生产环境的__CAPGO_KEEP_0__.config.json 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

。此调整确保__CAPGO_KEEP_0__不会打包文件，使我们能够使用 Vite 来实现这一目的。 capacitor.config.json Vite "bundledWebRuntime": true To bundle our Node.js modules with false. This adjustment ensures that Capacitor does not bundle the files, allowing us to use Vite for that purpose instead.

随着这些变化，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 __CAPGO_KEEP_0__ 提供了一种方便的方式来测试您的应用程序在各种平台上。使用以下命令打开您的应用程序在各个平台的开发环境中： www/js 对于 Android： index.html __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

Capacitor

__CAPGO_KEEP_0__

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.

‣ Conclusion

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

请记住，在所有平台上进行彻底的测试，并利用 Capacitor 的原生插件来增强您的应用程序的功能。 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 for the implementation detail in Capacitor Plugins by Capgo, 添加或更新插件为添加或更新插件的实现细节 Ionic 企业插件替代方案为 Ionic 企业插件替代方案的产品流程 Capgo 原生构建为 Capgo 原生构建的产品流程