分层解决方案:移动应用程序
您必须拥有 ABP Team 或更高许可证 才能使用 ABP Studio 创建移动应用程序项目。
移动应用程序是现代软件解决方案的重要组成部分。它们为最终用户提供友好的界面,并允许他们随时随地访问系统。ABP Studio 允许您为分层解决方案创建移动应用程序。您可以创建新的移动应用程序项目、进行配置并在您的设备上运行。
移动应用程序类型
ABP Studio 支持以下移动应用程序类型:
- 无: 不创建移动应用程序项目。这是默认选项。
- MAUI: 使用 .NET MAUI(多平台应用 UI)的跨平台移动应用程序。您可以使用 ABP Studio 创建 MAUI 项目。
- React Native: 在 iOS 和 Android 平台之间共享代码的跨平台移动应用程序。您可以使用 ABP Studio 创建 React Native 项目。
您可以在创建新的分层应用程序项目时,于 移动框架 步骤中选择移动应用程序类型。
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 运行
您可以使用 Solution Runner 启动 MAUI 应用程序。可以点击 Solution Runner 树中 MAUI 应用程序的启动按钮。它将在选定的目标框架上启动应用程序。由于它们不在进程中运行,而是在设备上运行,因此您不会在 Solution Runner 中看到它们处于运行状态。应用程序部署后,它将在设备上打开,并在 Solution Runner 中显示为已停止。
MAUI 应用程序开发
您可以遵循 移动应用程序开发教程 - MAUI 来学习如何在 MAUI 应用程序上进行开发。
React Native 应用程序
这是基于 Facebook 的 React Native 框架 和 Expo 构建的移动应用程序。仅当您选择了 React Native 作为移动应用程序选项时,它才会出现在解决方案中。
项目结构
- Environment.ts: 用于提供应用程序级别变量的文件,如
apiUrl、oAuthConfig等。 - 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: 该文件夹管理状态管理操作。我们将在此处定义
actions、listeners、reducers和selectors。 - styles: 该文件夹包含应用程序的样式。
system-style.ts作为内置模板提供,我们也可以添加新的样式。 - utils: 该文件夹包含我们可以在应用程序中使用的辅助函数。
运行应用程序
React Native 应用程序无法使用 Solution Runner 运行。您需要使用 React Native CLI 运行它们。您可以查阅 React Native 文档 来了解如何设置 React Native 开发环境。
在运行 React Native 应用程序之前,解决方案中的其他应用程序(例如 AuthServer、MobileGateway 和微服务)必须已经运行。
然后,您可以按照以下文档运行 React Native 应用程序:React Native 入门。
抠丁客




