使用 Angular 和 Capacitor 构建移动应用

在本教程中，我们将从一个新的 Angular 应用开始，然后使用Capacitor转换为原生移动应用。您也可以选择添加 Konsta UI 以使用Tailwind CSS改进的移动UI。

Capacitor使您能够轻松将Angular Web应用转换为原生移动应用，无需进行重大修改或学习新的技能，如React Native。

通过几个简单的步骤，大多数Angular应用程序可以转换为移动应用程序。

本教程将指导您完成整个过程，首先使用新Angular应用程序，然后将Capacitor引入到原生移动应用程序中。另外，您还可以选择使用 Konsta UI 来增强您的移动UI并使用Tailwind CSS。

关于Capacitor

CapacitorJS是一个革命性的工具！您可以轻松将其集成到任何Web项目中，它将您的应用程序包装在一个原生Webview中，生成原生Xcode和Android Studio项目。另外，它的插件提供了对原生设备功能的访问，如摄像头的JS桥。

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

准备您的Angular应用程序

要创建一个新的Angular应用程序，请运行以下命令：

ng new my-app
cd my-app

选择“Angular”时会提示您选择Angular版本。

要创建一个原生移动应用程序，我们需要一个 export 我们的项目中将包含一个简单的脚本，位于package.json中，用于构建和复制Angular项目： 执行命令后， 你应该在项目根目录下看到一个新的

{
  "scripts": {
    // ...
    "build": "ng build --prod"
  }
}

文件夹。 build这个文件夹将在之后被__CAPGO_KEEP_0__使用，但现在我们必须正确设置它。 dist 将__CAPGO_KEEP_0__添加到Angular App中

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your Angular App

首先，我们可以安装 sync __CAPGO_KEEP_0__ __CAPGO_KEEP_1__

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI 作为开发依赖项，并在我们的项目中设置它。在设置过程中，您可以按“回车”键以接受名称和包ID的默认值。

接下来，我们需要安装核心包和iOS和Android平台的相关包。

最后，我们可以添加平台，Capacitor将在我们的项目根目录下为每个平台创建文件夹：

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Angular project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

到目前为止，您应该能够在Angular项目中观察到新的 ios 和 android 文件夹。这些是真正的本机项目！

要在将来访问Android项目，必须安装

Android Studio 。对于iOS，需要Mac，并应安装ios Xcode.

此外，您应该在项目中找到一个 capacitor.config.ts 文件，其中包含一些基本的Capacitor设置，在同步过程中使用。您需要注意的是 webDir,它必须指向您的构建命令的结果。目前，它是不准确的。

为了纠正这个问题，请打开 capacitor.config.json 文件并更新 webDir:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

您可以通过执行以下命令来尝试：

npm run build
npx cap sync

第一个命令 npm run build 会简单地构建您的Angular项目并复制静态构建，而第二个命令 npx cap sync 会同步所有的web code 到native平台的正确位置，以便在应用中显示。

此外，同步命令可能会更新native平台并安装插件，所以当您安装新的 Capacitor 插件时，需要重新运行 npx cap sync 命令。

您可能没有注意到，但您现在实际上已经完成了，所以让我们在设备上查看应用！

构建和部署native应用

为了开发iOS应用，您需要安装 Xcode ，而对于Android应用，您需要安装 Android Studio 已安装。另外，如果您打算在应用商店上发布您的应用程序，则需要在 iOS 中注册 Apple Developer Program，在 Android 中注册 Google Play Console。

如果您是本机移动开发的新手，可以使用 Capacitor CLI 来轻松打开本机项目：

npx cap open ios
npx cap open android

一旦您设置了本机项目，部署应用程序到连接的设备就很容易了。在 Android Studio 中，只需等待所有内容就绪，然后您可以在不更改任何设置的情况下将应用程序部署到连接的设备。以下是示例：

android-studio-run

在 Xcode 中，您需要设置签名账户才能将应用程序部署到真实设备，而不是仅在模拟器上运行。如果您之前没有这样做过，Xcode 将指导您完成此过程（但请再次注意，您必须注册开发者计划）。随后，您可以简单地点击播放以在连接的设备上运行应用程序，您可以在顶部选择设备。以下是示例：

xcode-run

恭喜！您已成功将 Angular web 应用程序部署到移动设备。以下是示例：

但请稍等，有更快的方法可以在开发期间完成此操作……

Capacitor Live Reload

到目前为止，您可能习惯于所有现代框架都具有热重载的功能，而好消息是您可以在移动设备上实现相同的功能 在移动设备上 with minimal effort!

通过 Capgo 实现实时重载，直接访问本地主机的应用 在您的网络上 通过让 Capacitor 应用从特定 URL 加载内容来实现

首先，我们需要确定本地 IP 地址。如果您使用的是 Mac，方法是在终端中运行以下命令：

ipconfig getifaddr en0

在 Windows 上运行：

ipconfig

然后查找 IPv4 地址

我们可以通过在文件中添加另一个条目来指示 Capacitor 从服务器直接加载应用： capacitor.config.ts 确保使用

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:4200',
    cleartext: true
  }
};

export default config;

正确的 IP 和端口 本例中，我使用了默认的 Angular 端口。在 Windows 上运行：

现在，我们可以将这些更改应用到本地项目中：

npx cap copy

命令与 copy 类似，但它只会 sync将 web 文件夹和配置中的更改复制到本地项目中，而不更新本地项目。 您可以通过 Android Studio 或 Xcode 再次部署您的应用。之后，如果您在 Angular 应用中更改了什么内容， 应用将自动重新加载

并显示更改！ 请注意 如果您安装了新插件，如摄像头，它仍然需要重新构建本地项目。这是因为本机文件已更改，无法在飞行中完成。

请注意，您应该在配置中使用正确的 IP 和端口。上面的__CAPGO_KEEP_0__块显示了示例目的地的默认 Angular 端口。 Capacitor

Note that you should use the correct IP and port in your configuration. The code block above shows the default Angular port for demonstration purposes.

使用 Capacitor 插件

让我们看看如何使用一个 Capacitor 插件的示例，我们之前提到过几次。要实现这一点，我们可以通过运行：

npm i @capacitor/share

没有什么特别的关于 Share 插件，但它仍然会弹出原生分享对话框！为了实现这一点，我们现在只需要导入包并调用相应的 share() 函数从我们的应用中，所以让我们将 src/app/app.component.ts 改为：

import { Component } from '@angular/core';
import { Share } from '@capacitor/share';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-app';

  async share() {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  }
}

如前所述，当安装新插件时，我们需要执行同步操作，然后重新部署应用到设备上。要实现这一点，请运行以下命令：

npx cap sync

点击按钮后，您可以亲眼目睹美丽的原生分享对话框！

添加 Konsta UI

要在 Nuxt 3 应用中使用 Konsta UI，您需要有已经安装了 Tailwind 并且要安装的包是:

npm i konsta

另外，您需要修改您的 tailwind.config.js 文件：

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{html,ts}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig 将扩展默认（或您的自定义）Tailwind CSS 配置文件，添加一些额外的变体和辅助工具，以支持 Konsta UI。

现在我们需要设置主 App 组件，以便我们可以设置一些全局参数（如 theme).

我们需要将整个应用程序包裹在 App 中 src/app/app.component.html:

<app>
  <h1>Welcome to Angular and Capacitor!</h1>
  <button (click)="share()">Share now!</button>
</app>

示例页面

现在一切都设置好了，我们可以在 Angular 页面中使用 Konsta UI Vue 组件。

For example, let’s open src/app/app.component.html and change it to the following:

<app>
  <page>
    <navbar title="My App" />

    <block strong>
      <p>
        Here is your Angular & Konsta UI app. Let's see what we have here.
      </p>
    </block>
    <block-title>Navigation</block-title>
    <list>
      <list-item href="/about/" title="About" />
      <list-item href="/form/" title="Form" />
    </list>

    <block strong class="flex space-x-4">
      <button>Button 1</button>
      <button>Button 2</button>
    </block>
  </page>
</app>

如果安装了所有必要的组件后，live reload 出现了不一致的情况，请尝试重新启动。重新启动后，您应该能够看到一个使用 Angular 和 Capacitor 构建的具有较高本地化程度的移动应用。

You should see the following page as a result:

结论

Capacitor 是基于现有 Web 项目构建本地应用的出色选择，提供了一个简单的方式来共享 code 并保持 UI 的一致性。

并且通过添加 Capgo，您可以更轻松地为应用添加实时更新，确保您的用户始终可以访问最新的功能和 bug 修复。

如果您想学习如何将 Capgo 添加到您的 Angular 应用中，请参阅下一篇文章：

继续阅读 Building Mobile Apps with Angular 和 Capacitor

如果您正在使用 使用 Angular 和 Capacitor 构建移动应用 来规划原生媒体和界面行为，连接它与使用 @capgo/capacitor-live-activities 为原生能力在使用 @capgo/capacitor-live-activities 中 @capgo/capacitor-live-activities 为实现细节在 @capgo/capacitor-live-activities 中使用 @capgo/capacitor-video-player 为原生能力在使用 @capgo/capacitor-video-player 中 @capgo/capacitor-video-player 为实现细节在 @capgo/capacitor-video-player 中，和使用 @capgo/capacitor-native-navigation 为使用 @capgo/capacitor-native-navigation 开发原生能力而设计的。

使用Angular和Capacitor构建移动应用