项目

分层解决方案:移动应用程序

您必须拥有 ABP Team 或更高许可证 才能使用 ABP Studio 创建移动应用程序项目。

移动应用程序是现代软件解决方案的重要组成部分。它们为最终用户提供友好的界面,并允许他们随时随地访问系统。ABP Studio 允许您为分层解决方案创建移动应用程序。您可以创建新的移动应用程序项目、进行配置并在您的设备上运行。

移动应用程序类型

ABP Studio 支持以下移动应用程序类型:

  • : 不创建移动应用程序项目。这是默认选项。
  • MAUI: 使用 .NET MAUI(多平台应用 UI)的跨平台移动应用程序。您可以使用 ABP Studio 创建 MAUI 项目。
  • React Native: 在 iOS 和 Android 平台之间共享代码的跨平台移动应用程序。您可以使用 ABP Studio 创建 React Native 项目。

您可以在创建新的分层应用程序项目时,于 移动框架 步骤中选择移动应用程序类型。

mobile-applications

MAUI 应用程序

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

项目结构

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

  • 页面: 页面位于项目的 Pages 文件夹中。每个页面都有一个 XAML 和 C# 文件。XAML 文件负责 UI,C# 文件负责页面的初始化。
  • 视图模型: 视图模型位于项目的 ViewModels 文件夹中。每个视图模型都有一个 C# 文件。视图模型负责页面的业务逻辑。
  • Oidc: Oidc 文件夹包含应用程序的身份验证逻辑。它包含 MauiAuthenticationBrowser 类,用于管理应用程序的身份验证过程。
  • 本地化: 本地化文件夹包含应用程序的本地化逻辑。它包含常规的 ABP 本地化逻辑以及 LocalizationResourceManager 类,该类是 ABP 在 MAUI 上本地化逻辑的包装器。
  • 消息: 消息文件夹包含用于应用程序内部通信的消息数据。消息用于在页面和视图模型之间传递数据。其设计基于 MVVM Toolkit Messenger 功能。
  • 存储: 存储文件夹包含应用程序的存储逻辑。它包含 IStorage 类,该类是 SecureStorage 功能的包装器。用于存储用户的身份验证数据和应用程序偏好设置。

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

运行应用程序

在运行 MAUI 应用程序之前,解决方案中的其他应用程序(例如 AuthServer、MobileGateway 和微服务)必须已经运行。

确保您已准备好用于调试的设备。您可以查看以下针对各平台的文档:

网络

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

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

adb reverse tcp:44300 tcp:44300

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

该命令需要针对正在运行的模拟器执行。如果您在运行命令后启动模拟器,则需要再次运行该命令。

目标框架

由于 MAUI 应用程序有多个目标框架,在运行应用程序之前您需要选择目标框架。您可以从 Solution Runner 的上下文菜单中选择目标框架。

ABP Studio MAUI Target Framework

使用 ABP Studio 运行

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

MAUI 应用程序开发

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

React Native 应用程序

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

项目结构

  • Environment.ts: 用于提供应用程序级别变量的文件,如 apiUrloAuthConfig 等。
  • api: api 文件夹包含 HTTP 请求文件,用于简化 React Native 启动模板中的 API 管理。
    • API.ts: 导出 axiosInstance。它提供了已填入 API URL 的 axios 实例。
  • components: 在 components 文件夹中,您可以找到内置的 React Native 组件,您可以在您的应用中使用它们。这些组件 为您的 列表、选择等操作提供便利。
  • contexts: contexts 文件夹包含 React Context。您可以在此处导出您的上下文。本地化上下文在此提供
  • navigators: 该文件夹包含 React Navigation 栈。创建新的 FeatureNameNavigator 后,我们需要在 DrawerNavigator.tsx 文件中将其提供为 Drawer.Screen
  • screens: 这是被导航页面的内容。我们将作为组件属性传递给 Stack.Screen
  • store: 该文件夹管理状态管理操作。我们将在此处定义 actionslistenersreducersselectors
  • styles: 该文件夹包含应用程序的样式。system-style.ts 作为内置模板提供,我们也可以添加新的样式。
  • utils: 该文件夹包含我们可以在应用程序中使用的辅助函数。

运行应用程序

React Native 应用程序无法使用 Solution Runner 运行。您需要使用 React Native CLI 运行它们。您可以查阅 React Native 文档 来了解如何设置 React Native 开发环境。

在运行 React Native 应用程序之前,解决方案中的其他应用程序(例如 AuthServer、MobileGateway 和微服务)必须已经运行。

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


在本文档中