一、方案选择Electron/MAUI + Blazor(AntDesgin blazor)
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/13120010T-0.png)
文章插图
BlazorApp:Blazor Razor页面层,抽象独立层,被BlazorAppElectron/BlazorAppMAUI项目引用
BlazorAppElectron:Electron跨平台客户端层
BlazorAppMAUI:MAUI跨平台客户端层
二、BlazorApp创建首页欢迎页面组件
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/131200O50-1.png)
文章插图
三、BlazorAppElectron创建Electron.NET文档:https://github.com/ElectronNET/Electron.NET
AntDesgin文档:https://github.com/ant-design-blazor/ant-design-blazor
3.1、使用Blazor Server模板,创建项目
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/1312005105-2.png)
文章插图
3.2、Electron配置3.2.1、初始化项目命令行工具安装
dotnet tool install --global ElectronNET.CLI
项目目录下,执行下面命令electronize init
launchSettings.json生成启动项、electron.manifest.json![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/13120051a-3.png)
文章插图
![跨平台客户端Blazor方案尝试](https://www.huyubaike.com//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2ltZzIwMjIuY25ibG9ncy5jb20vYmxvZy8xNDczNTIvMjAyMjEwLzE0NzM1Mi0yMDIyMTAxNjEzMzUxNzI1OC0xMDUxMzgwODM0LnBuZw==.jpg)
文章插图
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/1312002248-5.png)
文章插图
启动参数配置,禁用单文件,有些组件Nuget有问题,如:MySql.Data,具体参考:https://www.cnblogs.com/WNpursue/p/14717646.html
3.2.2、代码配置引用包
Install-Package ElectronNET.API
program.cs配置,配置AntDesign、Electron![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/1312001431-6.png)
文章插图
_Layout.cshtml配置,AntDesgin的js、css引用
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/131200A07-7.png)
文章插图
App.razor,路由配置,引用BlazorApp的Razor组件路由 。
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/1312002Q8-8.png)
文章插图
MainLayout.razor,AntDesign布局菜单设置,默认根路径"/",与BlazorApp中Welcome.razor 中的@page 对应
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/1312002435-9.png)
文章插图
_Imports.razor,添加命名空间
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/131200M21-10.png)
文章插图
3.2.3、运行效果Electron.NET App启动配置,有客户端界面
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/131200Na-11.png)
文章插图
BlazorAppElectron启动配置,浏览器UI
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/1312003227-12.png)
文章插图
3.2.4、打包安装包
electronize build/PublishSingleFile false /target win
【跨平台客户端Blazor方案尝试】![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/1312003636-13.png)
文章插图
3.2.5、安装后调试工具Debugtron
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/131200C15-14.png)
文章插图
四、BlazorAppMAUI创建4.1、Visual Studio 2022 Preview 使用MAUI模板,创建项目
![跨平台客户端Blazor方案尝试](https://www.huyubaike.com//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2ltZzIwMjIuY25ibG9ncy5jb20vYmxvZy8xNDczNTIvMjAyMjEwLzE0NzM1Mi0yMDIyMTAxNjE0MjYyMDUxNS0xMzM2MjgxNzgwLnBuZw==.jpg)
文章插图
4.2、MAUI配置4.2.1、代码配置MauiProgram.cs配置,配置AntDesign
![跨平台客户端Blazor方案尝试](https://www.huyubaike.com//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2ltZzIwMjIuY25ibG9ncy5jb20vYmxvZy8xNDczNTIvMjAyMjEwLzE0NzM1Mi0yMDIyMTAxNjE0MzAxMDM5MS0xMzcxNTg0NTkyLnBuZw==.jpg)
文章插图
index.html配置,AntDesgin的js、css引用
![跨平台客户端Blazor方案尝试](https://www.huyubaike.com//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2ltZzIwMjIuY25ibG9ncy5jb20vYmxvZy8xNDczNTIvMjAyMjEwLzE0NzM1Mi0yMDIyMTAxNjE0MzE0NTAzNC0xMjU5ODI5NDg0LnBuZw==.jpg)
文章插图
Main.razor,路由配置,引用BlazorApp的Razor组件路由 。
![跨平台客户端Blazor方案尝试](https://www.huyubaike.com//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2ltZzIwMjIuY25ibG9ncy5jb20vYmxvZy8xNDczNTIvMjAyMjEwLzE0NzM1Mi0yMDIyMTAxNjE0MzMwMDkwNC0xNzU3OTkzMTQ2LnBuZw==.jpg)
文章插图
MainLayout.razor,AntDesign布局菜单设置,默认根路径"/" , 与BlazorApp中Welcome.razor 中的@page 对应
![跨平台客户端Blazor方案尝试](https://www.huyubaike.com//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHBzL2ltZzIwMjIuY25ibG9ncy5jb20vYmxvZy8xNDczNTIvMjAyMjEwLzE0NzM1Mi0yMDIyMTAxNjE0MzM1Nzg0NS03MDk1MjkwMzUucG5n.jpg)
文章插图
_Imports.razor , 添加命名空间
![跨平台客户端Blazor方案尝试](http://img.zhejianglong.com/231018/13120064J-20.png)
推荐阅读
- 上 学习ASP.NET Core Blazor编程系列六——新增图书
- 基于tauri打造的HTTP API客户端工具-CyberAPI
- 学习ASP.NET Core Blazor编程系列五——列表页面
- 学习ASP.NET Core Blazor编程系列四——迁移
- 某云负载均衡获取客户端真实IP的问题
- 搜狐视频客户端的下载方法?
- 搜狐视频怎么下载电视剧? 搜狐视频客户端怎么下载视频
- 英雄联盟客户端怎么设置隐身 英雄联盟客户端怎么设置窗口大小
- 手机qq客户端在哪里下载
- 火车票积分怎么兑换