一、方案選擇Electron/MAUI + Blazor(AntDesgin blazor)
文章插圖
BlazorApp：Blazor Razor頁面層，抽象獨立層，被BlazorAppElectron/BlazorAppMAUI項目引用
BlazorAppElectron：Electron跨平臺客戶端層
BlazorAppMAUI：MAUI跨平臺客戶端層
二、BlazorApp創建首頁歡迎頁面組件
文章插圖
三、BlazorAppElectron創建Electron.NET文檔：https://github.com/ElectronNET/Electron.NET
AntDesgin文檔：https://github.com/ant-design-blazor/ant-design-blazor
3.1、使用Blazor Server模板，創建項目
文章插圖
3.2、Electron配置3.2.1、初始化項目命令行工具安裝
dotnet tool install --global ElectronNET.CLI項目目錄下，執行下面命令electronize initlaunchSettings.json生成啟動項、electron.manifest.json
文章插圖
文章插圖
文章插圖
啟動參數配置，禁用單文件，有些組件Nuget有問題，如：MySql.Data，具體參考：https://www.cnblogs.com/WNpursue/p/14717646.html
3.2.2、代碼配置引用包
Install-Package ElectronNET.APIprogram.cs配置，配置AntDesign、Electron
文章插圖
_Layout.cshtml配置，AntDesgin的js、css引用
文章插圖
App.razor，路由配置，引用BlazorApp的Razor組件路由 。
文章插圖
MainLayout.razor，AntDesign布局菜單設置，默認根路徑"/"，與BlazorApp中Welcome.razor 中的@page 對應
文章插圖
_Imports.razor，添加命名空間
文章插圖
3.2.3、運行效果Electron.NET App啟動配置，有客戶端界面
文章插圖
BlazorAppElectron啟動配置，瀏覽器UI
文章插圖
3.2.4、打包安裝包
electronize build/PublishSingleFile false /target win【跨平臺客戶端Blazor方案嘗試】
文章插圖
3.2.5、安裝后調試工具Debugtron
文章插圖
四、BlazorAppMAUI創建4.1、Visual Studio 2022 Preview 使用MAUI模板，創建項目
文章插圖
4.2、MAUI配置4.2.1、代碼配置MauiProgram.cs配置，配置AntDesign
文章插圖
index.html配置，AntDesgin的js、css引用
文章插圖
Main.razor，路由配置，引用BlazorApp的Razor組件路由 。
文章插圖
MainLayout.razor，AntDesign布局菜單設置，默認根路徑"/" ， 與BlazorApp中Welcome.razor 中的@page 對應
文章插圖
_Imports.razor ， 添加命名空間
推薦閱讀
- 上 學習ASP.NET Core Blazor編程系列六——新增圖書
- 基于tauri打造的HTTP API客戶端工具-CyberAPI
- 學習ASP.NET Core Blazor編程系列五——列表頁面
- 學習ASP.NET Core Blazor編程系列四——遷移
- 某云負載均衡獲取客戶端真實IP的問題
- 搜狐視頻客戶端的下載方法？
- 搜狐視頻怎么下載電視劇? 搜狐視頻客戶端怎么下載視頻
- 英雄聯盟客戶端怎么設置隱身 英雄聯盟客戶端怎么設置窗口大小
- 手機qq客戶端在哪里下載
- 火車票積分怎么兌換