01-01 Electron + dotnet 5 Blazor + ElectronNET.API创建桌面程序

前言

随着.net core 的发布，C# 实现了跨平台，但是截至2021年1月22日，基于.net core构建的桌面程序如WPF，WinForm还是无法实现跨平台运行，所以可以构建web项目结合Electron来构可以跨平台运行的桌面程序，本文使用Electron结合Blazor App和Electron.NET类库构建桌面应用。

一、开发环境

1、安装Node.js
2、切换淘宝镜像源

npm config set registry http://registry.npm.taobao.org/

3、全局安装安装Electron

npm install electron -g

4、安装.Net 5 SDK
5、全局安装安装ElectronNET.CLI

dotnet tool install ElectronNET.CLI -g

二、创建项目

1、创建Blazor 应用，注意项目名不要使用Electron做命名空间，会造成命名空间冲突

选第一个，.net 版本选择.net 5

2、安装ElectronNET.API
（1）使用命令安装

PM> Install-Package ElectronNET.API

（2）使用NuGet包管理器安装

3、如果不是全局安装的ElectronNET.CLI就需要在项目中注册ElectronNET.API

<ItemGroup>
	<DotNetCliToolReference Include="ElectronNET.CLI" Version="0.0.9" />
</ItemGroup>

4、初始化，在项目根目录下运行下面脚本

electronize init

5、在程序中添加使用Electron
（1）修改Program.cs

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

（2）修改Startup.cs，在Configure方法中添加下面代码

Task.Run(async () =>
{
    var window = await Electron.WindowManager.CreateWindowAsync(
			    new BrowserWindowOptions
			    {
			        HasShadow = true,
			        AutoHideMenuBar = true, //自动隐藏菜单栏
			        Fullscreenable = true
			    });
   window.SetTitle("Blazor Demo App");
});

三、启动项目

（1）命令启动，在程序根目录下运行以下脚本，过程中会下载nodejs依赖，成功与否取决于当前网络。

electronize start

（2）VS 启动，效果相同

四、构建项目

在项目根目录下运行以下脚本，构建成功之后就不用使用命令启动，可以直接双击exe文件启动，构建成功后的文件在\bin\Desktop目录下

• windows平台：electronize build /target win
• macOS 平台：electronize build /target osx
• linux平台：electronize build /target linux
• 指定平台架构：electronize build /target custom "win7-x86;win32" /electron-arch ia32

五、最终效果

注：升级 ElectronNET.CLI命令

dotnet tool update ElectronNET.CLI -g