抠丁客 抠丁客
项目
编辑 (2025/12/26)

微服务解决方案：移动应用程序

您必须拥有 ABP Business 或更高级别的许可证才能创建微服务解决方案。

ABP Studio 微服务解决方案模板附带一个可选的移动应用程序，该应用程序完全集成到解决方案中。移动应用程序有两种选项：

  • MAUI
  • React Native

您可以在创建解决方案时选择移动应用程序类型。

基础架构

以下部分解释了移动应用程序的通用结构（适用于 MAUI 和 React Native 应用程序）。

移动网关

如果您选择在解决方案中包含移动应用程序，一个名为 MobileGateway 的 API 网关也会被添加到解决方案中。它位于解决方案文件夹的 gateways/mobile 下。

您可以参考 API 网关 文档来了解移动网关的结构。

身份验证

MAUI 和 React Native 应用程序都以原生应用程序的形式安装在设备上。因此，它们使用 OpenID Connect 协议对用户进行身份验证。身份验证由 AuthServer 应用程序完成。

它们不在浏览器中运行，因此无法使用 Cookie 身份验证 方法。它们使用 JWT 持有者身份验证 方法。

与 AuthServer 应用程序通信的最佳方式是使用浏览器。因此，移动应用程序会打开一个浏览器窗口来对用户进行身份验证。然后浏览器将身份验证结果重定向回移动应用程序。

以下屏幕截图来自移动应用程序 UI 中 Account 模块的 登录 页面：

移动应用程序登录页面

用户管理

用户管理在 MAUI 应用程序的 Acme.CloudCrm.Maui 项目中实现，使用 XAML 和 C#（适用于 MAUI）；在 React Native 应用程序的 react-native 项目中实现（适用于 React Native UI 选项）。

个人资料管理

个人资料管理允许用户查看和更新他们的个人资料图片和密码。它为用户提供了在移动应用程序中管理个人资料的无缝体验，而无需导航到 authserver Web 应用程序。

以下屏幕截图来自 MAUI 应用程序中的 个人资料 页面：

其他功能

设置页面

设置页面允许用户更改应用程序的语言和主题、管理他们的个人资料、更改密码以及从应用程序注销。

  • 语言：应用程序在平台上实现了 ABP 本地化逻辑。语言会根据设备的语言自动选择。用户也可以从设置页面手动更改语言。

  • 深色/浅色主题：ABP MAUI 和 React Native 应用程序支持深色和浅色主题。主题会根据设备的主题自动选择。用户也可以从设置页面手动更改主题。

应用程序

以下部分解释 MAUI 和 React Native 应用程序的结构。

MAUI 应用程序

这是基于 Microsoft 的 MAUI 框架 构建的移动应用程序。仅当您选择了 MAUI 作为移动应用程序选项时，它才会包含在解决方案中。

项目结构

整个 MAUI 应用程序构建在 MAUI 的 AppShell 模式之上。您可以在 Acme.CloudCrm.Maui 项目中找到 AppShell 类。它是应用程序的入口点。它负责初始化应用程序和注册服务。您可以在 AppShell.xaml 文件中找到所有页面和路由信息。

  • 页面：页面位于项目的 Pages 文件夹中。每个页面都有一个 XAML 和 C# 文件。XAML 文件负责 UI，C# 文件负责页面的初始化。

  • 视图模型：视图模型位于项目的 ViewModels 文件夹中。每个视图模型都有一个 C# 文件。视图模型负责页面的业务逻辑。

  • Oidc：Oidc 文件夹包含应用程序的身份验证逻辑。它包含 MauiAuthenticationBrowser 类，用于管理应用程序的身份验证过程。

  • 本地化：本地化文件夹包含应用程序的本地化逻辑。它包含常规的 ABP 本地化逻辑和 LocalizationResourceManager 类，后者是 MAUI 上 ABP 本地化逻辑的包装器。

  • 消息：消息文件夹包含用于应用程序内部通信的消息数据。消息用于在页面和视图模型之间发送数据。它基于 MVVM Toolkit Messenger 功能设计。

  • 存储：存储文件夹包含应用程序的存储逻辑。它包含 IStorage 类，该类是 SecureStorage 功能的包装器。它用于存储用户的身份验证数据和应用程序偏好设置。

其余文件夹是 MAUI 的默认文件夹。您可以查看 .NET MAUI 单项目文档 了解更多信息。

运行应用程序

在运行 MAUI 应用程序之前，解决方案中的其他应用程序（如 AuthServer、MobileGateway 和微服务）必须正在运行。

确保您已为调试准备好设备。您可以查看以下每个平台的文档。

网络

包括 iOS、MacCatalyst 和 Windows 在内的所有平台，都在与主机相同的网络中运行应用程序。因此，您可以使用 localhost 地址连接到应用程序。

但在 Android 模拟器 中，您需要使用 adb reverse 命令来连接到应用程序。您可以使用以下命令连接到 AuthServer 应用程序：

adb reverse tcp:44300 tcp:44300

44300 是一个示例端口。您需要根据 AuthServer 和 MobileGateway 应用程序的端口进行更改。

您需要为正在运行的模拟器运行该命令。如果在运行该命令后启动模拟器，则需要再次运行该命令。

目标框架

由于 MAUI 应用程序有多个目标框架，因此在运行应用程序之前需要选择目标框架。您可以从解决方案运行器的上下文菜单中选择目标框架。

ABP Studio MAUI 目标框架

使用 ABP Studio 运行

您可以使用解决方案运行器启动 MAUI 应用程序。您可以点击解决方案运行器树中 MAUI 应用程序的启动按钮。它将在选定的目标框架上启动应用程序。由于它们不是在进程中运行，而是在设备上运行，您无法在解决方案运行器中看到它们处于运行状态。应用程序部署后，它将在设备上打开，并在解决方案运行器中显示为已停止。

MAUI 应用程序开发

您可以按照 移动应用程序开发教程 - MAUI 来学习如何在 MAUI 应用程序上进行开发。

React Native 应用程序

这是基于 Facebook 的 React Native 框架 和 Expo 构建的移动应用程序。仅当您选择了 React Native 作为移动应用程序选项时，它才会包含在解决方案中。

项目结构

  • Environment.ts：用于提供应用程序级别变量的文件，如 apiUrl、oAuthConfig 等。

  • api：api 文件夹包含简化 React Native 启动模板中 API 管理的 HTTP 请求文件

    • API.ts：导出 axiosInstance。它提供了填充了 API URL 的 axios 实例。

  • 组件：在 components 文件夹中，您可以找到内置的 React Native 组件，可以在应用程序中使用。这些组件便于您的列表、选择等操作。

  • 上下文：contexts 文件夹包含 React 上下文。您可以在此文件夹中导出您的上下文。本地化上下文在此提供

  • 高阶组件：添加此文件夹是为了包含高阶组件。目的是用附加功能或属性包装组件。它最初有一个 PermissionHoc.tsx，用于包装一个组件以检查权限授予状态。

  • 钩子：涵盖了 React Native 钩子，您可以从官方文档获取参考。

  • 拦截器：初始化一个名为 APIInterceptor.ts 的文件，该文件有一个函数可以更好地管理 HTTP 操作。

  • 导航器：文件夹包含 React Navigation 栈。创建新的 FeatureNameNavigator 后，我们需要在 DrawerNavigator.ts 文件中以 Drawer.Screen 的形式提供。

  • 屏幕：文件夹包含导航页面的内容。我们将作为组件属性传递给 Stack.Screen

  • 存储：文件夹管理状态管理操作。我们将在此处定义 actions、listeners、reducers 和 selectors。

  • 样式：文件夹包含应用程序样式。system-style.ts 是内置模板附带的，我们也可以添加新样式。

  • 工具：文件夹包含我们可以在应用程序中使用的辅助函数。

运行应用程序

React Native 应用程序无法使用解决方案运行器运行。您需要使用 React Native CLI 运行它们。您可以查看 React Native 文档 来了解如何为 React Native 开发设置环境。

在运行 React Native 应用程序之前，解决方案中的其他应用程序（如 AuthServer、MobileGateway 和微服务）必须正在运行。

然后，您可以按照以下文档运行 React Native 应用程序：React Native 入门。

在本文档中