随着移动应用开发的不断进步，渐进式网页应用（PWA）的崛起为跨平台运行时提供了新的途径。这些运行时使基于web的应用能够在应用商店中出现，而不仅仅依赖于原生code。 CapacitorJS, which allows developers to deploy a simple website as an application across Android, iOS, and the web using a single JavaScript codebase. This approach significantly reduces development costs and increases coding efficiency.
它允许开发者将简单的网站部署为应用程序，跨Android、iOS和web使用单个JavaScript代码库。这一方法显著降低了开发成本并提高了编码效率。
‣ 必备条件
开始之前，请确保您已安装以下工具：
- 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文件，因此让我们重新组织我们的项目：
- 在主目录中创建一个新文件夹 在主目录中创建一个新脚本文件
srcCreate - a new folder in the main directory.
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的原生插件来增强应用程序的功能。Happy coding!
继续阅读《CapacitorJS跨平台应用开发指南》
如果您正在使用 《CapacitorJS跨平台应用开发指南》 来规划原生插件工作，连接到 Capgo插件目录 为Capgo插件目录中的产品工作流程 Capacitor插件由Capgo 为Capacitor插件由Capgo中的实现细节 添加或更新插件 为添加或更新插件中的实现细节 Ionic 企业级插件替代品 为 Ionic 企业级插件替代品中的产品工作流程 Capgo 原生构建 为 Capgo 原生构建中的产品工作流程
