eshop-移动客户端

eShop示例应用程序已更新并移至https://github.com/dotnet/eShop。活跃开发将在那里继续。

eshop-移动客户端是一个参考.NET MAUI多平台客户端应用程序，其设想目的是为一家销售产品的虚构公司的移动员工提供服务。该应用程序允许您管理目录、查看产品以及管理购物篮和订单。

依赖项

虽然eshop-移动客户端移动应用依赖于eShopOnContainers仓库作为其后端，但默认情况下，它使用内部的MockServices实现所有功能。更多详情请参阅设置部分。

<img src="https://yellow-cdn.veclightyear.com/2b54e442/485f3bb0-8711-4f07-b462-275be4d8c0a3.png" alt="eShopOnContainers" Width="800" />

架构

应用程序架构包含两个部分：

1. 一个适用于iOS、macOS、Android和Windows的.NET MAUI移动应用。
2. 几个部署为Docker容器的.NET Web API微服务。

.NET MAUI应用

该项目涉及以下平台、框架和功能：

• .NET MAUI
  • XAML
  • 行为
  • 绑定
  • 转换器
  • 中央样式
  • 动画
  • IoC
  • 消息中心
  • 自定义控件
  • xUnit测试
• Azure移动服务
  • C#后端
  • WebAPI
  • Entity Framework
  • Identity Server 4

后端服务

所有与后端服务相关的代码和组件都在eShopOnContainers仓库中维护。

支持的平台

该应用针对四个平台：

• iOS
• Android
• macOS（必须在Mac上构建和部署）
• Windows（必须在Windows上构建和部署）

要求

• Visual Studio 2022（2022或更高版本）以编译C#语言特性
  • 完全支持Visual Studio社区版！
• Visual Studio的.NET MAUI插件（可通过Visual Studio安装程序获得）

或

• 为Mac、Windows或Linux上的.NET MAUI开发配置的Visual Studio Code。

设置

1. 确保已安装.NET MAUI平台

您可以按照安装.NET MAUI中提到的步骤进行操作。

2. 确保.NET MAUI已更新

Visual Studio会定期自动检查更新。您也可以使用更新Visual Studio选项手动检查更新。

3. 项目设置

恢复项目的NuGet包。

4. 确保已安装Android模拟器

您可以使用任何Android模拟器或设备。有关设置的详细信息，请参阅Android模拟器文档。

注意：Android模拟器在虚拟机内或通过远程桌面或VNC无法正常运行，因为它依赖于虚拟化。

要在物理设备上部署和调试应用程序，请参阅在Android设备上调试文章。

5. 可选的iOS部署

要部署到iOS，您可以直接从Mac机器部署，或者可选择从Windows机器直接部署到设备，或通过将Windows机器与Mac配对。

6. 使用实际微服务

默认情况下，eshop多平台客户端使用内部模拟服务，让用户探索应用程序中的不同功能集。

但如果您想使用真实服务测试应用程序，也可以这样做。

为此，您需要执行以下操作：

1. 从eShopOnContainers仓库部署eShop应用程序的后端服务。您可以将应用程序部署到本地Kubernetes或AKS环境。

2. 在设置部分启用微服务端点。

<img src="https://yellow-cdn.veclightyear.com/2b54e442/4eff0a79-2078-42bf-9cf9-4522563f7d57.png" alt="启用微服务端点" Width="300" /> <img src="https://yellow-cdn.veclightyear.com/2b54e442/62c7dbc8-a616-4128-8b7a-e150d15fe6d1.png" alt="配置微服务端点" Width="300" />

身份URL：http://<您的IP或DNS名称>/identity 移动网关购物URL：http://<您的IP或DNS名称>/mobileshoppingapi

3. 启用HTTP流量。

Android应用

您还需要在network_security_config.xml文件的<domain includeSubdomains="true"><您的IP或DNS名称></domain>部分中包含<您的IP或DNS名称>，以使用HTTP流量。

更多详情请参阅使用网络安全配置管理Android上的HTTP和明文流量

iOS应用

您需要确保您的info.plist文件包含以下配置。

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>

更多详情请参阅退出ATS

**注意：**请注意，在生产环境中，您将使用HTTPS端点的服务。

7. 为Android设置Google地图

在eShopOnContainers\Platforms\Android\AndroidManifest.xml中，您必须将com.google.android.geo.API_KEY的值替换为有效的Google地图API密钥。

<meta-data android:name="com.google.android.geo.API_KEY" android:value="您的密钥在这里" />

更多详情请参阅.NET MAUI地图 - 获取Google地图API密钥。

截图

<img src="https://yellow-cdn.veclightyear.com/2b54e442/7c5e7875-7fb4-43db-a3c7-bb80072526d4.png" alt="登录" Width="210" /> <img src="https://yellow-cdn.veclightyear.com/2b54e442/ef575cbd-5fec-485a-b3d1-e09b750b593e.png" alt="登录" Width="210" /> <img src="https://yellow-cdn.veclightyear.com/2b54e442/e386f238-4489-4de8-978f-a17b27f02135.png" alt="目录" Width="210" /> <img src="https://yellow-cdn.veclightyear.com/2b54e442/c6a3737c-eca1-4249-aeb7-8333e3417d77.png" alt="个人资料" Width="210" /> <img src="https://yellow-cdn.veclightyear.com/2b54e442/90167f3e-4edb-4bdb-90f4-fbbad91a096e.png" alt="订单详情" Width="210" />

清理和重建

如果从仓库拉取更新时遇到构建问题，请尝试清理和重建解决方案。

故障排除

许可

本项目使用了一些需要注明出处的第三方资产：

• .NET MAUI社区工具包
• MVVM社区工具包
• PCLCrypto
• IdentityModel

版权和许可

• 代码和文档版权2023 Microsoft Corp. 代码基于MIT许可发布。