跨平台客户端Blazor方案尝试

时间:2022-10-16 15:08:59

Electron/MAUI + Blazor(AntDesgin blazor)

跨平台客户端Blazor方案尝试

BlazorApp:Blazor Razor页面层,抽象独立层,被BlazorAppElectron/BlazorAppMAUI项目引用

BlazorAppElectron:Electron跨平台客户端层

BlazorAppMAUI:MAUI跨平台客户端层

二、BlazorApp创建

首页欢迎页面组件

跨平台客户端Blazor方案尝试

三、BlazorAppElectron创建

Electron.NET文档:https://github.com/ElectronNET/Electron.NET

AntDesgin文档:https://github.com/ant-design-blazor/ant-design-blazor

3.1、使用Blazor Server模板,创建项目

跨平台客户端Blazor方案尝试

3.2、Electron配置

3.2.1、初始化项目

命令行工具安装

dotnet tool install --global ElectronNET.CLI

项目目录下,执行下面命令

electronize init

launchSettings.json生成启动项、electron.manifest.json

跨平台客户端Blazor方案尝试

跨平台客户端Blazor方案尝试

跨平台客户端Blazor方案尝试

启动参数配置,禁用单文件,有些组件Nuget有问题,如:MySql.Data,具体参考:https://www.cnblogs.com/WNpursue/p/14717646.html

3.2.2、代码配置

引用包

Install-Package ElectronNET.API

program.cs配置,配置AntDesign、Electron

跨平台客户端Blazor方案尝试

_Layout.cshtml配置,AntDesgin的js、css引用

跨平台客户端Blazor方案尝试

App.razor,路由配置,引用BlazorApp的Razor组件路由。

跨平台客户端Blazor方案尝试

MainLayout.razor,AntDesign布局菜单设置,默认根路径"/",与BlazorApp中Welcome.razor 中的@page 对应

跨平台客户端Blazor方案尝试

_Imports.razor,添加命名空间

跨平台客户端Blazor方案尝试

3.2.3、运行效果

Electron.NET App启动配置,有客户端界面

跨平台客户端Blazor方案尝试

BlazorAppElectron启动配置,浏览器UI

跨平台客户端Blazor方案尝试

3.2.4、打包安装包

electronize build  /PublishSingleFile false /target win

跨平台客户端Blazor方案尝试

3.2.5、安装后调试工具Debugtron

跨平台客户端Blazor方案尝试

四、BlazorAppMAUI创建

4.1、Visual Studio 2022 Preview 使用MAUI模板,创建项目

跨平台客户端Blazor方案尝试

4.2、MAUI配置

4.2.1、代码配置

MauiProgram.cs配置,配置AntDesign

跨平台客户端Blazor方案尝试

index.html配置,AntDesgin的js、css引用

跨平台客户端Blazor方案尝试

Main.razor,路由配置,引用BlazorApp的Razor组件路由。

跨平台客户端Blazor方案尝试

MainLayout.razor,AntDesign布局菜单设置,默认根路径"/",与BlazorApp中Welcome.razor 中的@page 对应

跨平台客户端Blazor方案尝试

_Imports.razor,添加命名空间

跨平台客户端Blazor方案尝试

4.2.2、运行效果

跨平台客户端Blazor方案尝试

 

五、案例源码

https://github.com/yinyunpan/blazorapp