在 WPF 中集成 ASP.NET Core 和 WebView2 用於集成 SPA 應用

来源:https://www.cnblogs.com/aobaxu/p/18186785
-Advertisement-
Play Games

背景 我們有些工具在 Web 版中已經有了很好的實踐,而在 WPF 中重新開發也是一種費時費力的操作,那麼直接集成則是最省事省力的方法了。 思路解釋 為什麼要使用 WPF?莫問為什麼,老 C# 開發的堅持,另外因為 Windows 上已經裝了 Webview2/edge 整體打包比 electron ...


背景

我們有些工具在 Web 版中已經有了很好的實踐,而在 WPF 中重新開發也是一種費時費力的操作,那麼直接集成則是最省事省力的方法了。

思路解釋

  1. 為什麼要使用 WPF?莫問為什麼,老 C# 開發的堅持,另外因為 Windows 上已經裝了 Webview2/edge 整體打包比 electron 小很多,release 後的體積主要是 ASP.NET Core 的文件。
  2. 為什麼要使用 ASP.NET Core 進行代理呢?很簡單,因為很多操作要求使用 HTTP Context,在類似 file:/// 的鏈接下是不能使用的,如果做成聯網的有些資源進行跨域請求也是不能的。舉個很簡單的例子,vite 打包後的 SPA 如果直接點開那麼裡面打包的 ES Module 的文件全部不允許請求。
  3. 那你這個項目不聯網能用嗎?看你的需求了,不聯網當然能用,這裡集成的 SPA 不一定全部都得是完整的 SPA,整套集成如果客戶在有網的環境下可以直接引用網頁的 URL 就好了。比如我們要用 monaco-editor 或者其他的文字編輯器又或者是 3D 編輯器,在 C# 上找不到或不好找到類似的庫,那麼集成 npm 上現成的庫就是最佳選擇。

修改項目文件

我們首先修改項目文件,讓 WPF 項目可以包含 ASP.NET Core 的庫,以及引用 WebView2 控制項。

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
	<OutputType>WinExe</OutputType>
	<TargetFramework>net8.0-windows</TargetFramework>
	<Nullable>enable</Nullable>
	<ImplicitUsings>enable</ImplicitUsings>
	<UseWPF>true</UseWPF>
  </PropertyGroup>

  <ItemGroup>
    <!-- 這裡插入 WebView2 的包,用於顯示網頁 -->
	<PackageReference Include="Microsoft.Web.WebView2" Version="1.0.2478.35" />
    <!-- 這裡插入 ASP.NET Core 的框架引用,用於代理資源文件 -->
	<FrameworkReference Include="Microsoft.AspNetCore.App" />
  </ItemGroup>

  <ItemGroup>
    <!-- 這裡模仿 ASP.NET Core,將 SPA 資源文件存於 wwwroot 文件夾下 -->
	<None Update="wwwroot\**">
	  <CopyToOutputDirectory>Always</CopyToOutputDirectory>
	</None>
  </ItemGroup>

</Project>

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

這裡為了全局使用依賴註入,我們將 WebApplication.CreateBuilder() 放在 App.xaml.cs 中全局使用。為了使用依賴註入應註釋掉預設啟動視窗,並接管 Startup 事件。

<Application x:Class="WpfAircraftViewer.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfAircraftViewer"
             Startup="ApplicationStartup">
    <!-- 這裡將 StartupUri 屬性刪除,然後註冊 Startup 事件 -->
    <Application.Resources>
         
    </Application.Resources>
</Application>

然後通過修改 Startup 事件的代碼來實現相應的載入動作。

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.StaticFiles;
using Microsoft.Extensions.DependencyInjection;
using System.Windows;

namespace WpfAircraftViewer
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application, IAsyncDisposable
    {
        public WebApplication? WebApplication { get; private set; }

        public async ValueTask DisposeAsync()
        {
            if (WebApplication is not null)
            {
                await WebApplication.DisposeAsync();
            }
            GC.SuppressFinalize(this);
        }
        
        private async void ApplicationStartup(object sender, StartupEventArgs e)
        {
            // 這裡是創建 ASP.NET 版通用主機的代碼
            var builder = WebApplication.CreateBuilder(Environment.GetCommandLineArgs());
            // 註冊主視窗和其他服務
            builder.Services.AddSingleton<MainWindow>();
            builder.Services.AddSingleton(this);
            var app = builder.Build();
            // 這裡是文件類型映射,如果你的靜態文件在瀏覽器中載入報 404,那麼需要在這裡註冊,這裡我載入一個 3D 場景文件的類型
            var contentTypeProvider = new FileExtensionContentTypeProvider();
            contentTypeProvider.Mappings[".glb"] = "model/gltf-binary";
            app.UseStaticFiles(new StaticFileOptions
            {
                ContentTypeProvider = contentTypeProvider,
            });
            // 你如果使用了 Vue Router 或者其他前端路由了,需要在這裡添加這句話讓路由返回前端,而不是 ASP.NET Core 處理
            app.MapFallbackToFile("/index.html");
            WebApplication = app;
            // 處理退出事件,退出 App 時關閉 ASP.NET Core
            Exit += async (s, e) => await WebApplication.StopAsync();
            // 顯示主視窗
            MainWindow = app.Services.GetRequiredService<MainWindow>();
            MainWindow.Show();
            await app.RunAsync().ConfigureAwait(false);
        }
    }
}

此時,我們已經可以正常開啟一個預設界面的 MainWindow 了。

使用 WebView2 控制項

這時我們就可以先將 SPA 文件從 npm 項目的 dist 複製到 wwwroot 了,在編輯 MainWindow 加入 WebView2 控制項後就可以查看了。

<Window x:Class="WpfAircraftViewer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAircraftViewer"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d" MinHeight="450" MinWidth="800" SnapsToDevicePixels="True">
        <!-- 在上面加入 xmlns:wv2 屬性用於引用 WebView2 控制項 -->
    <Grid>
        <!-- 這裡插入 WebView2 控制項,我們預設可以讓 Source 是 http://localhost:5000,這是 ASP.NET Core 的預設監聽地址 -->
        <wv2:WebView2 Name="webView"
                  Source="{Binding SourceUrl, FallbackValue='http://localhost:5000'}" AllowDrop="True" SnapsToDevicePixels="True"/>
    </Grid>
</Window>

我們可以繼續編輯視窗的信息,讓他可以關聯 ASP.NET Core 的監聽地址。

using Microsoft.AspNetCore.Hosting.Server;
using Microsoft.AspNetCore.Hosting.Server.Features;
using System.Windows;

namespace WpfAircraftViewer
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public string SourceUrl { get; set; }
        public MainWindow(IServer server)
        {
            InitializeComponent();
            // 這裡通過註入的 IServer 對象來獲取監聽的 Url
            var addresses = server.Features.Get<IServerAddressesFeature>()?.Addresses;
            SourceUrl = addresses is not null ? (addresses.FirstOrDefault() ?? "http://localhost:5000") : "http://localhost:5000";
            // 無 VM,用自身當 VM
            DataContext = this;
        }
    }
}

這時我們就可以看到視窗打開了我們的 SPA 頁面了。

示例代碼


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在現代社會中,機動車已經成為人們生活的重要交通工具。而行駛證作為機動車的身份證明,具有重要的法律效力。然而,對於行駛證上的信息進行手工識別是一項繁瑣的工作,容易出現錯誤,並且耗時較長。為瞭解決這個問題,挖數據平臺提供了行駛證OCR識別Api介面,可以對行駛證上的信息進行快速準確地識別和提取。 這個A ...
  • 大家好,我是 Java陳序員。 問君能有幾多愁,開源項目解千愁! 今天,給大家介紹一個快速開發平臺,完全開源可商用! 關註微信公眾號:【Java陳序員】,獲取開源項目分享、AI副業分享、超200本經典電腦電子書籍等。 項目介紹 SmartAdmin —— 一個簡潔、高效、安全的快速開發平臺,以高質 ...
  • 大家好,我是R哥。 金三銀四結束了,上個月分享了一個 35K 入職的面試輔導案例: 35K*14 薪入職了,這公司只要不裁員,我能一直呆下去。。 今天再分享一個上個月讓人很有成就感的面試輔導 case: 外包、空窗四個月、薪資 10k、996 ——> 甲方公司、薪資15k、早九晚六(WLB),從報名 ...
  • 當一個線程被啟動後,如果再次調start()方法,將會拋出IllegalThreadStateException異常。 這是因為Java線程的生命周期只有一次。調用start()方法會導致系統在新線程中運行執行體,但是如果線程已經結束,則不能再次使用,需要重新創建一個新的線程對象並調用start()... ...
  • 正文 昨天玩到了凌晨 3 點,今天睡了一天…… 斷斷續續睡到 12 點起床,下午又從 5 點睡到了 7 點。我願稱之為睡神……. 其它時間就是做工作日一直沒時間做的雜事,比如洗衣服,刷鞋,換洗被套什麼的,還挺花時間。用了得有兩三個小時。 所以昨天說的今天開擺,那是真的開擺了 (笑。 現在晃一下頭,能 ...
  • 1. Spring6 的JdbcTemplate的JDBC模板類的詳細使用說明 @目錄1. Spring6 的JdbcTemplate的JDBC模板類的詳細使用說明每博一文案2. 環境準備3. 數據準備4. 開始4.1 從數據表中插入(添加)數據4.2 從數據表中修改數據4.3 從數據表中刪除數據4 ...
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
一周排行
    -Advertisement-
    Play Games
  • 不廢話,直接代碼 private Stack<Action> actionStack = new Stack<Action>(); private void SetCellValues() { var worksheet = Globals.ThisAddIn.Application.ActiveS ...
  • OpenAPI 規範是用於描述 HTTP API 的標準。該標準允許開發人員定義 API 的形狀,這些 API 可以插入到客戶端生成器、伺服器生成器、測試工具、文檔等中。儘管該標準具有普遍性和普遍性,但 ASP.NET Core 在框架內預設不提供對 OpenAPI 的支持。 當前 ASP.NET ...
  • @DateTimeFormat 和 @JsonFormat 是 Spring 和 Jackson 中用於處理日期時間格式的註解,它們有不同的作用: @DateTimeFormat @DateTimeFormat 是 Spring 框架提供的註解,用於指定字元串如何轉換為日期時間類型,以及如何格式化日 ...
  • 一、背景說明 1.1 效果演示 用python開發的爬蟲採集軟體,可自動抓取抖音評論數據,並且含二級評論! 為什麼有了源碼還開發界面軟體呢?方便不懂編程代碼的小白用戶使用,無需安裝python、無需懂代碼,雙擊打開即用! 軟體界面截圖: 爬取結果截圖: 以上。 1.2 演示視頻 軟體運行演示視頻:見 ...
  • SpringBoot筆記 SpringBoot文檔 官網: https://spring.io/projects/spring-boot 學習文檔: https://docs.spring.io/spring-boot/docs/current/reference/html/ 線上API: http ...
  • 作為後端工程師,多數情況都是給別人提供介面,寫的好不好使你得重視起來。 最近我手頭一些活,需要和外部公司對接,我們需要提供一個介面文檔,這樣可以節省雙方時間、也可以防止後續扯皮。這是就要考驗我的介面是否規範化。 1. 介面名稱清晰、明確 顧名思義,介面是做什麼的,是否準確、清晰?讓使用這一眼就能知道 ...
  • 本文介紹基於Python語言,遍歷文件夾並從中找到文件名稱符合我們需求的多個.txt格式文本文件,並從上述每一個文本文件中,找到我們需要的指定數據,最後得到所有文本文件中我們需要的數據的合集的方法~ ...
  • Java JUC&多線程 基礎完整版 目錄Java JUC&多線程 基礎完整版1、 多線程的第一種啟動方式之繼承Thread類2、多線程的第二種啟動方式之實現Runnable介面3、多線程的第三種實現方式之實現Callable介面4、多線的常用成員方法5、線程的優先順序6、守護線程7、線程的讓出8、線 ...
  • 實時識別關鍵詞是一種能夠將搜索結果提升至新的高度的API介面。它可以幫助我們更有效地分析文本,並提取出關鍵詞,以便進行進一步的處理和分析。 該介面是挖數據平臺提供的,有三種模式:精確模式、全模式和搜索引擎模式。不同的模式在分詞的方式上有所不同,適用於不同的場景。 首先是精確模式。這種模式會儘量將句子 ...
  • 1 為啥要折騰搭建一個專屬圖床? 技術大佬寫博客都用 md 格式,要在多平臺發佈,圖片就得有外鏈 後續如博客遷移,國內博客網站如掘金,簡書,語雀等都做了防盜鏈,圖片無法遷移 2 為啥選擇CloudFlare R2 跳轉:https://dash.cloudflare.com/ 有白嫖額度 免費 CD ...