使用.NET5、Blazor和Electron.NET建構跨平台桌面應用

Electron.NET是一個嵌入了ASP.NET Core的Electron的封裝，通過Electron.NET可以建構基于.NET5的跨平台的桌面應用，使得開發人員隻需要使用ASP.NET Core和 Blazor就可以勝任桌面應用的開發工作。

開發環境

• 作業系統Windows/macOS/Linux
• .NET5.0
• npm

建立新項目

• 建立檔案夾

mkdir ElectronNETDemon
           

• 建立解決方案

dotnet new sln
           

• 建立項目ElectronNETDemon

dotnet new blazorserver -f net5.0 -o ElectronNETDemon
           

• 将項目“ElectronNETDemon/ElectronNETDemon.csproj”添加到解決方案中。

dotnet sln ElectronNETDemon.sln add ElectronNETDemon
           

• 切換到項目目錄

cd ElectronNETDemon
           

• 将包“ElectronNET.API”的 PackageReference 添加到項目ElectronNETDemon

dotnet add package ElectronNET.API
           

• 修改Program.cs使用Electron擴充

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.UseElectron(args);
            webBuilder.UseStartup<Startup>();
        });
           

• 修改Startup.cs，打開Electron視窗

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    // Open the Electron-Window here
    Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
}
           

• 删除應用上的 https 相關配置

1. launchSettings.json
2. Startup.cs

app.UseHsts();
app.UseHttpsRedirection();
           

• 啟動應用程式

1. 要啟動應用程式，請確定已将'ElectronNET.CLI'軟體包安裝為全局工具：

dotnet tool install ElectronNET.CLI -g
           

1. 然後初始化Electron.NET項目,electronnet.manifest.json應該出現在你的 ASP.NET Core項目中。

electronize init
           

1. 運作以下指令啟動程式

electronize start
           

第一次啟動期間可能需要等待漫長的時間，如啟動失敗可以設定 npm 的源鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org
           

• 建構桌面應用

輸入以下指令建構各平台的桌面應用，預設為這些平台生成 x64 包。

electronize build /target win
electronize build /target osx
electronize build /target linux
           

如需建構 X86 的包，請使用以下指令

electronize build /target custom "win7-x86;win32" /electron-arch ia32 
           

将包“AntDesign”的 PackageReference 添加到項目ElectronNETDemon

dotnet add package AntDesign --version 0.1.0-*
           

• 修改Startup.cs，在項目中注冊Antdesign

public void ConfigureServices(IServiceCollection services)
{
    services.AddAntDesign();
    
    ...
}
           

• 在 wwwroot/index.html(WebAssembly) 或 Pages/_Host.cshtml(Server) 中引入靜态檔案

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
           

• 在 _Imports.razor 中加入命名空間

@using AntDesign
           

• 為了動态地顯示彈出元件，需要在 App.razor 中添加一個 元件。

<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

<AntContainer />
           

• 最後我們就可以在 razor 頁面中使用 AntDesign，在Index.razor加入以下代碼，觸發按鈕的點選事件

@inject MessageService _message
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />


<Button Type="primary" OnClick="Success">Hello World!</Button>

@code {
    private async Task Success()
    {
        await _message.Success("This is a success message");
    }
}
           

本文 GitHub 代碼

https://github.com/huangmingji/ElectronNETDemon

相關文檔

• ElectronNet
• Ant Design Blazor
• ASP.NET Core Blazor

作者：黃明基 出處：http://www.cnblogs.com/229015504/ 如果你喜歡本文章，歡迎轉載，請保留此段聲明，且在文章頁面明顯位置給出原文連接配接。 如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。歡迎大家掃描右邊二維碼關注公衆号。