【亲测免费】 Capacitor 开发教程

Capacitor 是由 Ionic 团队开发的一个现代化的原生应用开发框架，它允许开发者使用 web 技术（HTML, CSS, JavaScript）构建跨平台的原生移动和桌面应用。本教程将引导你了解其基本的目录结构、启动文件和配置文件。

1. 项目目录结构及介绍

初始化一个 Capacitor 项目后，目录结构通常如下：

my-capacitor-app/
|-- apps/
|   |-- my-app/    # 应用源代码目录，通常包括 `src` 目录
|       |-- src/     # 主要的前端代码，包括 HTML、CSS 和 JS 文件
|
|-- plugins/        # 插件存储位置，可以添加自定义或第三方插件
|
|-- config.json     # 配置文件，定义了项目的基本设置
|
|-- package.json    # npm 包依赖信息
|
|-- .gitignore      # Git 忽略规则文件
...

• apps/my-app: 应用的核心代码，其中 src 子目录包含前端代码。
• plugins: 存放所有使用的 Capacitor 插件，可以通过 CLI 添加。
• config.json: 项目的配置文件，用于设定各种选项。
• package.json: 定义项目的依赖关系，包括 Node.js 模块和 Capacitor 插件。

2. 项目的启动文件介绍

Capacitor 的启动流程主要围绕前端应用（在 src/index.html 中）和服务器端的配置（如果你使用的是服务如 @capacitor/core 提供的 HTTP API）。以下是一般情况下启动过程的关键文件：

• src/main.ts: 这是 Angular 或其他前端框架的主要入口点，通常在这里导入和初始化 Capacitor。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

在这个例子中，AppModule 是你的应用程序模块，用于加载应用程序组件。

3. 项目的配置文件介绍

Capacitor 使用 config.json 文件来配置项目属性。以下是部分重要配置项的说明：

{
  "appId": "com.example.myapp",
  "androidPackageName": "com.example.myapp",
  "webDir": "www",
  "server": {
    "allowNavigation": [
      "*"
    ],
    "whitelist": []
  },
  "cordova": {},
  "updates": {
    "checkOnLaunch": "never",
    "autoUpdate": false,
    "fallbackToCache": true
  }
}

• appId: 应用程序 ID，通常与 Android 和 iOS 平台的应用包名保持一致。
• androidPackageName: Android 平台上应用的包名。
• webDir: 网页资源目录，用于构建时指向应用的静态资源目录。
• server: 服务器相关配置，如 allowNavigation 允许导航到哪些域名，以及白名单设置。
• cordova: Cordova 相关配置，虽然 Capacitor 不依赖于 Cordova，但为了兼容性仍然保留此字段。
• updates: 更新相关的配置，如何检查更新和自动更新等。

完成以上步骤后，你可以通过 Capacitor CLI 来运行、构建和部署你的应用。更多详细信息可参考 Capacitor 文档。