使用Angular和Capacitor构建移动应用

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

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

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

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

关于Capacitor

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

使用Capacitor，您可以获得一个出色的原生移动应用程序，无需进行复杂的设置或陡峭的学习曲线。它的轻薄API和流线化的功能使其成为轻松地将其引入您的项目的理想选择。相信我，您将惊叹于如何轻松地使用Capacitor实现一个功能齐全的原生应用程序！

准备您的 Angular 应用程序

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

ng new my-app
cd my-app

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

为了创建一个原生移动应用，我们需要一个 export 我们的项目。因此，让我们在 package.json 中添加一个简单的脚本，这样我们就可以利用它来构建和复制 Angular 项目：

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

执行命令 build后，您应该能够在项目根目录下看到一个新的 dist 文件夹。

这个文件夹将由 Capacitor 后来使用，但现在我们必须正确设置它。

将 Capacitor 添加到您的 Angular 应用中

将任何 Web 应用打包到原生移动容器中，我们必须遵循几个初始步骤，但之后只需执行一个 sync 命令即可。

首先，我们可以将 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，应安装 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 到原生平台的正确位置，以便在应用中显示。

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

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

构建和部署原生应用

为了开发iOS应用，您需要有 Xcode 需要安装 Android Studio 并且如果您打算在应用商店上发布应用，则需要为 iOS 和 Android 分别注册 Apple Developer Program 和 Google Play Console。

如果您是新手，想开始原生移动开发，可以使用 Capacitor CLI 来轻松打开原生项目：

npx cap open ios
npx cap open android

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

android-studio-run

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

xcode-run

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

但请稍等，开发期间还有更快的方法……

Capacitor Live Reload

现在你可能已经习惯了所有现代框架都有热重载的功能，好消息是你可以在移动设备上实现相同的功能 在移动设备上 只需花费最少的努力

通过让__CAPGO_KEEP_0__应用加载特定URL的内容来启用对本地托管应用的访问 在网络上 by having the Capacitor app load the content from the specific 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;

文件： __CAPGO_KEEP_0__我已经使用了这个示例中的默认Angular端口。

现在，我们可以将这些更改复制到我们的本地项目中：

npx cap copy

The copy 命令与 sync类似，但它只会 复制到web文件夹和配置中 而不更新本地项目。

您现在可以通过Android Studio或Xcode再次部署您的应用程序。之后，如果您在Angular应用程序中更改了什么 应用程序将自动重新加载 并显示更改！

请记住 如果您安装了新插件，如摄像头插件，它仍然需要重建您的原生项目。这是因为原生文件发生了变化，无法在实时进行。

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

使用Capacitor插件

让我们来看看如何使用Capacitor插件的示例，我们之前提到过几次。要实现这一点，我们可以通过运行以下命令来安装一个相当简单的插件：

npm i @capacitor/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组件。

例如，让我们打开 src/app/app.component.html 并将其更改为以下内容：

<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>

如果安装所有必要组件后，实时重新加载出现不一致的情况，请尝试重新启动所有内容。一旦您完成了这一步，您应该会看到一个使用Angular和Capacitor构建的native应用，外观有些像原生应用。

您应该看到以下页面作为结果：

结论

Capacitor是基于现有web项目构建native应用的优秀选择，提供了一个简单的方式来共享code并保持一致的UI。

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

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