0
0

利用 Avalonia UI 构建 Blazor 混合应用程序

在这里插入图片描述

Blazor 是一个 .NET 前端框架，用于仅使用 .NET 技术构建 Web 应用程序。2021 年，Blazor 扩展到桌面端，推出了 Blazor Hybrid（混合），使开发者可以在桌面平台上使用已有的技能。

Blazor 混合应用程序是传统的桌面应用程序，它们在一个 Web View 控件中托管实际的 Blazor Web 应用程序。虽然这些应用程序使用 .NET MAUI 作为桌面端技术，但如果不符合需求，也可以使用其他框架。

MAUI 的局限性在于它缺乏对 Linux 的支持，并且在 Windows 和 macOS 上使用不同的 Browser Engine。Microsoft Edge 和 Safari 在实现 Web 标准、执行 JavaScript 以及页面渲染方面存在差异。这些差异在高级应用程序中可能会导致 bug 并需要额外的测试。

如果 MAUI 不符合您的要求，可以考虑选择 Avalonia UI，它是一个跨平台的 UI 库，其生态系统中包含多个基于 Chromium 的 Web View。

在本文中，我们将探讨如何使用 Avalonia UI 和 DotNetBrowser 作为 Web View 来创建 Blazor 混合应用程序。

使用模板快速入门

要使用 DotNetBrowser 和 Avalonia UI 创建一个基本的 Blazor 混合应用程序，请使用我们的模板：

dotnet new install DotNetBrowser.Templates

然后，获取 DotNetBrowser 的免费 30 天试用许可证。

从模板创建一个 Blazor 混合应用程序，并将您的许可证密钥作为参数传递：

dotnet new dotnetbrowser.blazor.avalonia.app -o Blazor.AvaloniaUi -li <your_license_key>

然后运行应用程序：

dotnet run --project Blazor.AvaloniaUi

在 Linux 上的 Avalonia UI 上运行 Blazor 混合应用程序在 Linux 上的 Avalonia UI 上运行 Blazor 混合应用程序

实现

在混合环境中，Blazor 应用程序在其桌面壳程序的进程中运行。这个壳程序或窗口管理整个应用程序的生命周期，显示 Web View，并启动 Blazor 应用程序。我们将使用 Avalonia UI 创建这个窗口。

Blazor 应用程序的后端是 .NET 代码，前端是托管在 Web View 中的 Web 内容。 Web View 中的 Browser Engine 和 .NET 运行时之间没有直接连接。因此，为了前后端通信，Blazor 必须知道如何在它们之间交换数据。由于我们引入了一个新的 Web View，我们必须教会 Blazor 如何使用 DotNetBrowser 进行数据交换。

接下来，我们将带您了解 Blazor 与 Avalonia 和 DotNetBrowser 集成的关键部分。有关完整解决方案，请查看上面的模板。

创建窗口

为了托管 Blazor 混合应用程序，我们需要创建一个常规的 Avalonia 窗口，并添加一个 Web View 组件。

MainWindow.axaml

<Window...Closed="Window_Closed"><browser:BlazorBrowserViewx:Name="BrowserView".../>
        ...
    </browser:BlazorBrowserView></Window>

MainWindow.axaml.cs

publicpartialclassMainWindow:Window{publicMainWindow(){InitializeComponent();...    
        BrowserView.Initialize();}privatevoidWindow_Closed(object sender,EventArgs e){
        BrowserView.Shutdown();}}

BlazorBrowserView

是我们为了封装 DotNetBrowser 而创建的一个 Avalonia 控件。稍后，我们将在这个控件中将其与 Blazor 集成。

BlazorBrowserView.axaml

<UserControl...>
    ...
    <avaloniaUi:BrowserViewx:Name="BrowserView"IsVisible="False".../></UserControl>

BlazorBrowserView.axaml.cs

publicpartialclassBlazorBrowserView:UserControl{privateIEngine engine;privateIBrowser browser;publicBlazorBrowserView(){InitializeComponent();}publicasyncTaskInitialize(){EngineOptions engineOptions =newEngineOptions.Builder{
            RenderingMode = RenderingMode.HardwareAccelerated
        }.Build();
        engine =await EngineFactory.CreateAsync(engineOptions);
        browser = engine.CreateBrowser();...
        Dispatcher.UIThread.InvokeAsync(ShowView);}publicvoidShutdown(){
        engine?.Dispose();}privatevoidShowView(){
        BrowserView.InitializeFrom(browser);
        BrowserView.IsVisible =true;
        browser?.Focus();}}

配置 Blazor

在混合应用程序中，负责 Blazor 与环境集成的主要实体是 

WebViewManager

。这是一个抽象类，因此我们需要创建自己的实现，这里我们称之为 

BrowserManager

并在 

BlazorBrowserView

中实例化它。

BrowserManager.cs

classBrowserManager:WebViewManager{privatestaticreadonlystring AppHostAddress ="0.0.0.0";privatestaticreadonlystring AppOrigin =$"https://{AppHostAddress}/";privatestaticreadonlyUri AppOriginUri =new(AppOrigin);privateIBrowser Browser {get;}publicBrowserManager(IBrowser browser,IServiceProvider provider,Dispatcher dispatcher,IFileProvider fileProvider,JSComponentConfigurationStore jsComponents,string hostPageRelativePath):base(provider, dispatcher, AppOriginUri, fileProvider, jsComponents,
               hostPageRelativePath){
        Browser = browser;}...}

BlazorBrowserView.axaml.cs

publicpartialclassBlazorBrowserView:UserControl{privateIEngine engine;privateIBrowser browser;privateBrowserManager browserManager;...publicasyncTaskInitialize(){EngineOptions engineOptions =newEngineOptions.Builder{
            RenderingMode = RenderingMode.HardwareAccelerated
        }.Build();
        engine =await EngineFactory.CreateAsync(engineOptions);
        browser = engine.CreateBrowser();...
        browserManager =newBrowserManager(browser,...);...}...}

一个 Blazor 应用程序需要一个或多个根组件。当 Web View 正在初始化时，我们将它们添加到 WebViewManager 中。

RootComponent.cs

publicclassRootComponent{publicstring ComponentType {get;set;}publicIDictionary<string,object> Parameters {get;set;}publicstring Selector {get;set;}publicTaskAddToWebViewManagerAsync(BrowserManager browserManager){ParameterView parameterView = Parameters ==null? ParameterView.Empty
                                          : ParameterView.FromDictionary(Parameters);return browserManager?.AddRootComponentAsync(
                Type.GetType(ComponentType)!, Selector, parameterView);}}

BlazorBrowserView.axaml.cs

publicpartialclassBlazorBrowserView:UserControl{privateIEngine engine;privateIBrowser browser;privateBrowserManager browserManager;publicObservableCollection<RootComponent> RootComponents {get;set;}=new();...publicasyncTaskInitialize(){...
        engine =await EngineFactory.CreateAsync(engineOptions);
        browser = engine.CreateBrowser();
        browserManager =newBrowserManager(browser,...);foreach(RootComponent rootComponent in RootComponents){await rootComponent.AddToWebViewManagerAsync(browserManager);}...}...}

MainWindow.axaml

<Window...Closed="Window_Closed"><browser:BlazorBrowserViewx:Name="BrowserView".../><browser:BlazorBrowserView.RootComponents><browser:RootComponentSelector="..."ComponentType="..."/></browser:BlazorBrowserView.RootComponents></browser:BlazorBrowserView></Window>

加载静态资源

在普通的 Web 应用程序中，Browser 通过向服务器发送 HTTP 请求来加载页面和静态资源。在 Blazor 混合应用程序中，虽然原理相似，但这里并没有传统的服务器。相反，

WebViewManager

提供了一个名为 

TryGetResponseContent

的方法，该方法接受一个 URL 并返回数据作为类似 HTTP 的响应。

我们通过拦截 DotNetBrowser 中的 HTTPS 流量将 HTTP 请求和响应传递到此方法并返回。

BlazorBrowserView.axaml.cs

publicpartialclassBlazorBrowserView:UserControl{privateIEngine engine;privateIBrowser browser;privateBrowserManager browserManager;...publicasyncTaskInitialize(){EngineOptions engineOptions =newEngineOptions.Builder{
            RenderingMode = RenderingMode.HardwareAccelerated,
            Schemes ={{
                    Scheme.Https,newHandler<InterceptRequestParameters,
                        InterceptRequestResponse>(OnHandleRequest)}}}.Build();

        engine =await EngineFactory.CreateAsync(engineOptions);
        browser = engine.CreateBrowser();
        browserManager =newBrowserManager(browser,...);...}publicInterceptRequestResponseOnHandleRequest(
            InterceptRequestParameters params)=>
            browserManager?.OnHandleRequest(params);...}

BrowserManager.cs

internalclassBrowserManager:WebViewManager{privatestaticreadonlystring AppHostAddress ="0.0.0.0";privatestaticreadonlystring AppOrigin =$"https://{AppHostAddress}/";privatestaticreadonlyUri AppOriginUri =new(AppOrigin);...publicInterceptRequestResponseOnHandleRequest(InterceptRequestParameters p){if(!p.UrlRequest.Url.StartsWith(AppOrigin)){// 如果请求不以 AppOrigin 开头，则允许它通过。return InterceptRequestResponse.Proceed();}ResourceType resourceType = p.UrlRequest.ResourceType;bool allowFallbackOnHostPage = resourceType isResourceType.MainFrameor ResourceType.Favicon
                                           or ResourceType.SubResource;if(TryGetResponseContent(p.UrlRequest.Url, allowFallbackOnHostPage,outint statusCode,outstring _,outStream content,outIDictionary<string,string> headers)){UrlRequestJob urlRequestJob = p.Network.CreateUrlRequestJob(p.UrlRequest,newUrlRequestJobOptions{
                 HttpStatusCode =(HttpStatusCode)statusCode,
                 Headers = headers
                          .Select(pair =>newHttpHeader(pair.Key, pair.Value)).ToList()});
            Task.Run(()=>{using(MemoryStream memoryStream =new()){
                    content.CopyTo(memoryStream);
                    urlRequestJob.Write(memoryStream.ToArray());}

                urlRequestJob.Complete();});return InterceptRequestResponse.Intercept(urlRequestJob);}return InterceptRequestResponse.Proceed();}}

导航

现在，当 Web View 可以导航到应用页面并加载静态资源时，我们可以加载索引页并教导 

WebViewManager

如何执行导航操作。

BlazorBrowserView.axaml.cs

publicpartialclassBlazorBrowserView:UserControl{privateIEngine engine;privateIBrowser browser;privateBrowserManager browserManager;...publicasyncTaskInitialize(){...
        engine =await EngineFactory.CreateAsync(engineOptions);
        browser = engine.CreateBrowser();
        browserManager =newBrowserManager(browser,...);foreach(RootComponent rootComponent in RootComponents){await rootComponent.AddToWebViewManagerAsync(browserManager);}

        browserManager.Navigate("/");...}...}

BrowserManager.cs

internalclassBrowserManager:WebViewManager{...privateIBrowser Browser {get;}...protectedoverridevoidNavigateCore(Uri absoluteUri){
        Browser.Navigation.LoadUrl(absoluteUri.AbsoluteUri);}}

数据交换

与普通的 Web 应用程序不同，Blazor Hybrid 不使用 HTTP 进行数据交换。前端和后端通过字符串消息进行通信，使用的是特殊的 .NET-JavaScript 互操作机制。在 JavaScript 中，消息通过 

window.external

对象发送和接收，而在 .NET 端，则通过 

WebViewManager

进行。

我们使用 DotNetBrowser 的 .NET-JavaScript 桥接功能来创建 

window.external

对象并传输消息。

BrowserManager.cs

internalclassBrowserManager:WebViewManager{...privateIBrowser Browser {get;}privateIJsFunction sendMessageToFrontEnd;publicBrowserManager(IBrowser browser,IServiceProvider provider,Dispatcher dispatcher,IFileProvider fileProvider,JSComponentConfigurationStore jsComponents,string hostPageRelativePath):base(provider, dispatcher, AppOriginUri, fileProvider, jsComponents,
               hostPageRelativePath){
        Browser = browser;// 此处理程序在页面加载之后但在执行其自己的 JavaScript 之前调用。
        Browser.InjectJsHandler =newHandler<InjectJsParameters>(OnInjectJs);}...privatevoidOnInjectJs(InjectJsParameters p){if(!p.Frame.IsMain){return;}dynamic window = p.Frame.ExecuteJavaScript("window").Result;
        window.external = p.Frame.ParseJsonString("{}");// 当页面调用这些方法时，DotNetBrowser 会将调用代理到 .NET 方法。
        window.external.sendMessage =(Action<dynamic>)OnMessageReceived;
        window.external.receiveMessage =(Action<dynamic>)SetupCallback;}privatevoidOnMessageReceived(dynamic obj){this.MessageReceived(newUri(Browser.Url), obj.ToString());}privatevoidSetupCallback(dynamic callbackFunction){
        sendMessageToFrontEnd = callbackFunction asIJsFunction;}protectedoverridevoidSendMessage(string message){
        sendMessageToFrontEnd?.Invoke(null, message);}}

结论

在本文中，我们讨论了 Blazor Hybrid，这是一种用于使用 Blazor 构建桌面应用程序的 .NET 技术。

Blazor Hybrid 使用 .NET MAUI 存在两个局限性：

  • 不支持 Linux。
  • 在 Windows 和 macOS 上使用不同的 Browser Engine，使得相同的应用程序在不同平台上可能表现和外观不同。

我们建议使用 Avalonia UI + DotNetBrowser 作为替代方案。这种组合为 Windows、macOS 和 Linux 提供了全面支持，并确保在所有平台上都能保持一致的 Browser 环境。

标签： dotnetbrowser .net c#
本文转载自: https://blog.csdn.net/TeamDev/article/details/143579111
版权归原作者 TeamDev 所有， 如有侵权，请联系我们删除。
登录后发布评论

“利用 Avalonia UI 构建 Blazor 混合应用程序”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航