在移动应用开发领域不断演进的世界中，渐进式网页应用（PWA）的崛起为新型的跨平台运行时提供了道路。这些运行时使基于 web 的应用能够在应用商店中存在，而不仅仅依赖于原生 code。 CapacitorJS,它允许开发者使用单个 JavaScript 代码库将简单的网站部署为 Android、iOS 和 web 应用。这一方法显著降低了开发成本并提高了编码效率。
本指南将专注于使用纯 JavaScript 创建应用程序，而无需任何额外的框架。尽管 2021 年纯 JavaScript 应用开发资源的挑战，我们仍然为您提供了构建应用程序并利用 CapacitorJS 的原生插件的全面教程。
‣ 必备条件
在开始之前，请确保您已安装以下工具:
注意：：仅在 macOS 设备上才能进行 iOS 应用开发。
‣ 设置您的 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 Elements的脚本导入 www/index.html 如果您不将应用程序作为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元素 -
更新脚本导入
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.配置文件
在 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 ‣ 测试和调试
__CAPGO_KEEP_0__ 提供了一个方便的方式来测试您的应用程序在各种平台上。使用以下命令在各自平台的开发环境中打开您的应用程序：
Capacitor provides a convenient way to test your application on various platforms. Use the following commands to open your app in the respective platform’s development environment:
对于 iOS（macOS 只）：
npx cap add android
npx cap open android对于 Web/PWA：
npx cap add ios
npx cap open ios这些命令将允许您在 Android Studio、Xcode 或您的 web 浏览器中运行您的应用程序，进行测试和调试。
npx cap serve‣ 结论
‣ Conclusion
本指南将帮助您了解如何使用 CapacitorJS 开发跨平台应用程序。
记得在所有平台上进行彻底的测试，并利用Capacitor的原生插件来增强应用的功能。 coding快乐！
继续阅读 Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide
如果您正在使用 开发跨平台应用程序的CapacitorJS指南 来规划原生插件的工作，连接它与 Capgo 插件目录 Capgo Plugins by __CAPGO_KEEP_1__ Capacitor 插件由 Capgo 提供 Capacitor Plugins by Capgo 来获取实现细节在__CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__ 添加或更新插件 来获取实现细节在添加或更新插件中， 为Ionic Enterprise Plugin Alternatives的产品工作流程 Capgo原生构建 为Capgo原生构建的产品工作流程
