跨平台开发

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

本指南将专注于使用纯JavaScript创建应用程序，而不使用任何额外的框架。尽管2021年纯JavaScript应用开发的资源寻找挑战颇多，我们仍然为您提供了构建应用程序和利用CapacitorJS的native插件的全面教程。

‣ 必备条件

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

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/.
Create 创建 Vite 配置文件 vite.config.js 在主目录。
Remove 文件 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>

删除 <capacitor-welcome> 从 body 中删除 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.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 浏览器中运行您的应用，进行测试和调试即可。

‣ 结论

使用CapacitorJS和纯JavaScript开发跨平台应用是节省成本和提高效率的有效方法，仅需一个代码库即可创建多个平台的应用。按照本指南，您已经设置了项目、重构了它以适应Vite，并为开发做好了准备。基于此基础，您即将构建一个强大且多功能的应用。

请务必在所有平台上进行充分的测试，并充分利用Capacitor的原生插件来增强应用的功能。 coding!

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