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

移动应用开发领域的演进，渐渐地推动了进步式网页应用（PWA）的兴起。这些PWA使得基于web的应用能够在应用商店中存在，而不仅仅依赖于原生code。 CapacitorJS，允许开发者将简单的网站部署为应用程序，跨越Android、iOS和web，使用单一的JavaScript代码库。这一方法显著降低了开发成本，并提高了编码效率。

本指南将专注于使用纯JavaScript开发应用程序，而不使用任何额外的框架。尽管2021年纯JavaScript应用开发的资源寻找困难，但我们将为您提供一个全面指南，帮助您创建应用程序并利用CapacitorJS的原生插件。

‣ 前置条件

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

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

注意: iOS app开发仅在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

删除脚本导入 Ionic PWA 元素 如果您没有将应用程序作为 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 导入。您的 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来完成这个任务。

完成了Capacitor应用的基本设置，您现在可以使用纯JavaScript开始开发您的应用。

‣ 开发您的应用

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

记得在修改代码时运行 Vite 的构建命令来打包你的 JavaScript 文件：

vite build

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

‣ 测试和调试

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的原生插件来增强应用程序的功能。 coding!

继续阅读《CapacitorJS跨平台应用开发指南》

如果您正在使用 《CapacitorJS跨平台应用开发指南》 来规划原生插件工作，连接它到 Capgo原生插件目录在Capgo原生插件目录中 Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_1__ 添加或更新插件 Ionic 企业插件替代品为 Ionic 企业插件替代品中的产品工作流程 Capgo 原生构建为 Capgo 原生构建中的产品工作流程

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