在 WPF 中集成 ASP.NET Core 和 WebView2 用于集成 SPA 应用

背景

我们有些工具在 Web 版中已经有了很好的实践，而在 WPF 中重新开发也是一种费时费力的操作，那么直接集成则是最省事省力的方法了。
修改项目文件

我们首先修改项目文件，让 WPF 项目可以包罗 ASP.NET Core 的库，以及引用 WebView2 控件。

1. <Project Sdk="Microsoft.NET.Sdk">
3.   <PropertyGroup>
4.         <OutputType>WinExe</OutputType>
5.         <TargetFramework>net8.0-windows</TargetFramework>
6.         <Nullable>enable</Nullable>
7.         <ImplicitUsings>enable</ImplicitUsings>
8.         <UseWPF>true</UseWPF>
9.   </PropertyGroup>
11.   <ItemGroup>
12.    
13.         <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.2478.35" />
14.    
15.         <FrameworkReference Include="Microsoft.AspNetCore.App" />
16.   </ItemGroup>
18.   <ItemGroup>
19.    
20.         <None Update="wwwroot\**">
21.           <CopyToOutputDirectory>Always</CopyToOutputDirectory>
22.         </None>
23.   </ItemGroup>
25. </Project>

复制代码

修改 App.xaml 和 App.xaml.cs 以使用 ASP.NET Core 的 WebApplication.CreateBuilder()

这里为了全局使用依赖注入，我们将 WebApplication.CreateBuilder() 放在 App.xaml.cs 中全局使用。为了使用依赖注入应表明掉默认启动窗口，并接受 Startup 变乱。

1. <Application x:
2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.              xmlns:local="clr-namespace:WpfAircraftViewer"
5.              Startup="ApplicationStartup">
6.    
7.     <Application.Resources>
8.          
9.     </Application.Resources>
10. </Application>

复制代码

然后通过修改 Startup 变乱的代码来实现相应的加载动作。

1. using Microsoft.AspNetCore.Builder;
2. using Microsoft.AspNetCore.StaticFiles;
3. using Microsoft.Extensions.DependencyInjection;
4. using System.Windows;
6. namespace WpfAircraftViewer
7. {
8.     /// <summary>
9.     /// Interaction logic for App.xaml
10.     /// </summary>
11.     public partial class App : Application, IAsyncDisposable
12.     {
13.         public WebApplication? WebApplication { get; private set; }
15.         public async ValueTask DisposeAsync()
16.         {
17.             if (WebApplication is not null)
18.             {
19.                 await WebApplication.DisposeAsync();
20.             }
21.             GC.SuppressFinalize(this);
22.         }
23.         
24.         private async void ApplicationStartup(object sender, StartupEventArgs e)
25.         {
26.             // 这里是创建 ASP.NET 版通用主机的代码
27.             var builder = WebApplication.CreateBuilder(Environment.GetCommandLineArgs());
28.             // 注册主窗口和其他服务
29.             builder.Services.AddSingleton<MainWindow>();
30.             builder.Services.AddSingleton(this);
31.             var app = builder.Build();
32.             // 这里是文件类型映射，如果你的静态文件在浏览器中加载报 404，那么需要在这里注册，这里我加载一个 3D 场景文件的类型
33.             var contentTypeProvider = new FileExtensionContentTypeProvider();
34.             contentTypeProvider.Mappings[".glb"] = "model/gltf-binary";
35.             app.UseStaticFiles(new StaticFileOptions
36.             {
37.                 ContentTypeProvider = contentTypeProvider,
38.             });
39.             // 你如果使用了 Vue Router 或者其他前端路由了，需要在这里添加这句话让路由返回前端，而不是 ASP.NET Core 处理
40.             app.MapFallbackToFile("/index.html");
41.             WebApplication = app;
42.             // 处理退出事件，退出 App 时关闭 ASP.NET Core
43.             Exit += async (s, e) => await WebApplication.StopAsync();
44.             // 显示主窗口
45.             MainWindow = app.Services.GetRequiredService<MainWindow>();
46.             MainWindow.Show();
47.             await app.RunAsync().ConfigureAwait(false);
48.         }
49.     }
50. }

复制代码

此时，我们已经可以正常开启一个默认界面的 MainWindow 了。
使用 WebView2 控件

这时我们就可以先将 SPA 文件从 npm 项目的 dist 复制到 wwwroot 了，在编辑 MainWindow 加入 WebView2 控件后就可以查看了。

1. <Application x:
2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.              xmlns:local="clr-namespace:WpfAircraftViewer"
5.              Startup="ApplicationStartup">
6.    
7.     <Application.Resources>
8.          
9.     </Application.Resources>
10. </Application>           

复制代码

我们可以继续编辑窗口的信息，让他可以关联 ASP.NET Core 的监听地点。

1. using Microsoft.AspNetCore.Hosting.Server;
2. using Microsoft.AspNetCore.Hosting.Server.Features;
3. using System.Windows;
5. namespace WpfAircraftViewer
6. {
7.     /// <summary>
8.     /// Interaction logic for MainWindow.xaml
9.     /// </summary>
10.     public partial class MainWindow : Window
11.     {
12.         public string SourceUrl { get; set; }
13.         public MainWindow(IServer server)
14.         {
15.             InitializeComponent();
16.             // 这里通过注入的 IServer 对象来获取监听的 Url
17.             var addresses = server.Features.Get<IServerAddressesFeature>()?.Addresses;
18.             SourceUrl = addresses is not null ? (addresses.FirstOrDefault() ?? "http://localhost:5000") : "http://localhost:5000";
19.             // 无 VM，用自身当 VM
20.             DataContext = this;
21.         }
22.     }
23. }

复制代码

这时我们就可以看到窗口打开了我们的 SPA 页面了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。