在不断发展的移动应用开发领域，渐进式 Web 应用（PWA）的兴起为新的跨平台运行时铺平了道路。这些运行时让基于 Web 的应用无需完全依赖原生 code 就能进入应用商店。实现这一点的技术之一就是 CapacitorJS，它允许开发者使用单一 JavaScript 代码库，将简单网站作为应用部署到 Android、iOS 和 Web。这种方法显著降低开发成本并提升编码效率。
本指南将重点介绍如何仅用纯 JavaScript、不依赖任何额外 framework 来创建应用。尽管 2021 年纯 JavaScript 应用开发资源并不好找，我们仍会提供一份全面教程，教你构建应用并在 CapacitorJS 中使用原生插件。
‣ 前置条件
在开始之前，请确保已安装以下工具：
- Node.js (v14.16.1) 或更高版本
- NPM (v7.6.2) 或更高版本
- Android Studio 中的错误日志 用于 Android 应用开发
- Xcode 的 Mac 用于 iOS 应用开发 (仅限 macOS)
注意: iOS 应用开发只能在 macOS 设备上进行。
‣ 配置您的 Capacitor 项目
要创建一个 Capacitor 应用，请进入目标文件夹并在终端中执行以下命令：
npm init @capacitor/app按照提示安装 package 并完成项目设置。使用 Capacitor v3 后，您的项目目录结构如下：
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md完成初始设置后，即可继续后续步骤。
‣ 项目重构
我们将使用 Vite 来 bundle JavaScript 文件，因此需要对项目进行如下重构：
- 创建 一个新文件夹
src在主目录下。 - 创建 一个新的 script 文件
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 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>-
从 body 中删除
<capacitor-welcome>HTML 元素。 -
将 script 导入从
capacitor.js改为js/main.js。这将是我们打包后的 JavaScript 文件。 -
移除
js/capacitor-welcome.js导入。你的index.html现已准备就绪。
vite.config.js
要打包我们的 Node.js 模块，请使用 Vite，我们需要一个配置文件来指定 bundle 脚本的输出目录。以下配置将读取该文件 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 进行应用开发了。
‣ 应用开发
基础工作完成后，你就可以开始在 src/index.js 文件中编写应用逻辑了。在这里，你可以导入任何必要的 Node.js 模块，定义应用功能，并与 Capacitor 的 native plugins 进行交互。
每当您修改代码时，请记得运行 Vite 的 build 命令来打包您的 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 或浏览器中运行应用，以便根据需要进行测试和调试。
‣ 总结
使用纯 JavaScript 通过 CapacitorJS 开发跨平台应用，是一种通过单一代码库为多个平台构建应用的高效且低成本的方式。通过本指南，你已经完成了项目搭建、Vite 重构并为开发做好了准备。有了这个基础，你已经迈出了构建强大且多功能应用的关键一步。
记得在所有平台上进行彻底测试，并充分利用 Capacitor 的 native plugins 来增强应用功能。祝你编码愉快！
继续阅读《使用 CapacitorJS 开发跨平台应用：分步指南》
如果你正在使用 使用 CapacitorJS 开发跨平台应用：分步指南 要规划原生插件工作，请将其与 Capgo 插件目录 查看 Capgo 插件目录中的产品工作流， Capgo 提供的 Capacitor 插件 查看由 Capgo 提供的 Capacitor 插件中的实现细节， 添加或更新插件 查看添加或更新插件中的实现细节， Ionic Enterprise 插件替代方案 查看 Ionic Enterprise 插件替代方案中的产品工作流，以及 Capgo Native Build 查看 Capgo Native Builds 中的产品工作流。
