Electron.NET开发入门（Linux && Windows）

先决条件

使用Electron.NET进行开发，不论是在Windows系统下，还是在Linux系统下，确保计算机已安装：

0. Node.js
1. NPM
2. dotnet CLI Electron.NET 全局工具： ElectronNET.CLI
3. .NET 5.0以上的SDK

Windows系统下环境搭建 操作系统及IDE

Windows 7及以上，X86/X64架构的即可。

IDE使用的是 Visual Studio 2019

安装步骤 Node.js及npm的安装

下载地址 选择与自己电脑对应的(32位/64位)Windows安装包(.msi)下载即可，一般默认选择的是最新版本。下载完成之后 双击 .msi 文件，运行，一路next下去，直到安装完成。

检测是否安装成功

win+r 输入cmd 打开命令行，输入node -v查看是否安装成功，输入npm -v查看集成的 npm是否正确安装。如果命令都输出对应的版本号，如下图，表示安装成功了。如果提示系统未识别的指令，则将node.exe文件所在路径添加到系统的环境变量中。

基本设置

下载npm的原因是通过他去下载功能丰富的各种组件，npm的全局模块和缓存模块默认是在C盘，为了便于管理，我们需要新建两个文件夹 ：node_global(全局模块)和node_cache(缓存模块)。 这里注意两个文件夹的名字必须是这个，否则后期可能会报错。同样是在命令行窗口中设置npm的全局模块和缓存模块。

C:UsersAdministrator>npm config set prefix "创建的node_global文件夹所在路径"      #设置全局模块 
​
C:UsersAdministrator>npm config set cache "创建的node_cache文件夹所在路径"          #设置缓存模块
​
C:UsersAdministrator>npm config get prefix   #查看全局模块所在路径
​
C:UsersAdministrator>npm config get cache   #查看缓存模块所在路径 

npm镜像源设置

npm的下载源默认是一个国外的网站，下载速度比较慢.为了提高下载速度。解决方案之一是 将下载源设置成淘宝源。另一种方式使用cnpm下载。设置npm源的几种方式

# the original source
https://registry.npmjs.org/
​
npm config set registry https://registry.npm.taobao.org  #设置成淘宝源
​
npm config get registry  #查看结果
​
#安装cnpm 其中-g表示全局安装
npm install -g cnpm  
​
cnpm -v        # 输出版本号表示cnpm安装成功,以后就可以用cnpm替代npm进行下载了 

.NET SDK安装

下载地址 选择与自己电脑对应的(32位/64位)Windows安装程序下载即可，5.0以上即可。下载完成之后 双击运行安装程序，一路next下去，直到安装完成。win+r 输入cmd 打开命令行，输入dotnet --info查看是否安装成功,显示以下结果表示安装成功。

ElectronNET.CLI的安装

在cmd控制台中，通过运行以下指令安装，使用的是13.5.1版本

C:Userswjt>dotnet tool install ElectronNET.CLI -g --version 13.5.1 

Linux系统下环境搭建 操作系统及IDE

操作系统：海光CPU+Deepin 20.3，其他的发行版如Debian，CentOS，Ubuntu均可，安装过程中除了部分指令不同，其他的的大同小异。

IDE：JetBrains Rider 2021.2版本

安装步骤 Node.js及npm的安装

下载地址　选择系统对应的的Linux二进制文件下载。为了方便管理，先在本地创建一个文件夹，下载的二进制文件放到这个文件夹下（以下指令都在在MATE终端中输入的）

mkdir Nodejs     #创建文件夹 Nodejs
cd Nodejs        #进入文件夹 Nodejs
＃在该目录下解压下载的文件，该文件
tar -xvf node-v14.16.0-linux-x64.tar 

配置环境变量

打开profile文件，这里编辑器使用的是vim(如果对vim不熟悉，见vim常见使用)

sudo vi /etc/profile 

复制这两行到profile文件最底部（注意node的安装地址是/Nodejs/node-v14.16.0-linux-x64,注意换成自己的安装地址）

export NODE_HOME=/Nodejs/node-v14.16.0-linux-x64
export PATH=$PATH:$NODE_HOME/bin 

保存后退出，再执行下面命令将环境变量生效

source /etc/profile 

执行上面的指令之后没有输出表示已生效。如果出现报错信息，表示环境变量未设置成功。

建立安装目录软链接

将目录软链接到全局环境下，相当于是全局安装了，在终端输入 node开头的指令，不会显示找不到指令。

#软链接指令  ln -s 要链接的文件a所在目录/文件a 目标目录/文件a   表示将文件a链接到目标目录
ln -s /Nodejs/node-v14.16.0-linux-x64/bin/node /usr/local/bin/node
ln -s /Nodejs/node-v14.16.0-linux-x64/bin/npm /usr/local/bin/npm 

如果没有权限则在ln 前面加上sudo运行，注意：/bin/node和/usr/local是两个地址 ,中间有空格且需要一起执行完 。

在终端分别输入 node -v 和npm -v，如果可以输出版本号，表示Node.js和npm已安装成功，如下图所示

之后设置缓存模块，全局模块，npm镜像源和使用npm安装electron的方式和在Windows系统下的方法一样，只不过这里是在MATE终端中运行，详见此处。

这样安装好了之后，使用npm来安装各种包（如electron），使用包的命令时可能会提示找不到命令，这时，在用户目录下终端执行下面的命令即可（固定写法）

echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc 

这样，在所有用户下，都可以使用npm，也可以使用npm安装包的命令。

补充

/etc/profile是整个Linux系统存储环境变量的文件（很重要），如果错误修改的话，可能会导致正常情况下的指令，像sudo, vi, pwd等无法使用，甚至在正确输入账号密码的时候无法进入Linux系统。如果是碰到无法进入系统的情况，解决方案如下：

0. 在登陆界面，按 ctrl+Alt+(F1~F6)其中一个。不同电脑可能不同，我在这里就被坑了好久，好多地方都说是ctrl+Alt+F1，然而这台电脑是ctrl+Alt+F2，终于进入了MATE终端，接下来就是修改文件。

1. 之前由于环境变量错误修改，导致很多指令不能使用，需要使用该指令的绝对路径。在这里 sudo=/usr/bin/sudo vi=/usr/bin/vi

    /usr/bin/sudo /usr/bin/vi /etc/profile   #相当于之前的 “sudo vi /etc/profile” 
   

2. 然后会提示输入账号密码（这里输入密码时在屏幕上是看不到的，*也没有，所以注意一下正确输入即可），然后进入到profile文件，按a再回车进入编辑模式，将之前加的错误的语句修改，按ESC退出编辑模式，再输入 :w 保存文件，最后输入 :q 回到命令行，然后重启就可以正常登陆了。（遇到无法系统无法登陆的问题还可以参考Linux系统账户无法登录怎么办）

之前将node,npm软链接到全局环境下，为什么连接到/usr/local/bin目录下，/usr/local表示当前用户的本地文件目录，Linux系统中每一个用户都有一个这样的文件夹，用户存放用户相关的数据，bin 是 Binaries (二进制文件) 的缩写, 这个目录存放着最经常使用的命令。

.NET SDK安装

下载地址 选择与自己电脑对应的(32位/64位)Linux程序包下载，5.0以上版本即可。程序包名为 dotnet-sdk-5.0.407-linux-x64.tar.gz

在程序包所在目录下，打开终端，依次运行以下指令

mkdir -p $HOME/dotnet && tar zxf dotnet-sdk-5.0.407-linux-x64.tar.gz -C $HOME/dotnet
export DOTNET_ROOT=$HOME/dotnet
export PATH=$PATH:$HOME/dotnet 

任意打开一个终端输入dotnet --info,如果输出相关版本信息，如下图所示，表示.NET SDK 安装成功，若还是显示系统未识别的指令，尝试将dotnet 的可执行文件所在软链接到usr/local/bin目录下

ElectronNET.CLI的安装

在终端中，通过运行以下指令安装，使用的是13.5.1版本

dotnet tool install ElectronNET.CLI -g --version 13.5.1 

这一步会下载名为 electronize的可执行文件，注意这里下载完成之后要建立 electronize的可执行文件所在目录的软链接或者将 electronize的可执行文件所在目录添加到系统环境变量中，否则后面执行 electronize指令时系统可能无法识别，Windows系统则不存在这样的问题

# 建立软链接
sudo ln -s  electronize所在目录/electronize  /usr/bin/electronize 

Electron.NET工程创建 创建工程

Electron.NET工程项目使用的是ASP.NET Core Web应用(MVC)模板(Windows系统下的Visual Studio和Linux系统下的Rider均选用此项目模板来创建工程)，如下图

创建完成之后，基本工程目录如下图所示(Services目录，package.json和package-lock.json是后面自己添加的，可忽略)

添加依赖

工程创建完成之后，需要给项目添加ElectronNET.API的NuGet包(这里选择的是13.5.1版本)，具体步骤如下：

Rider中

依次点击顶部菜单栏的Tools—>NuGet---->Manage NuGet Packages …

然后在打开的窗口中搜索 ElectronNET.API，再选择ElectronNET.API包及其对应的合适的版本号，最后给对应项目添加依赖，如下图所示

Visual Studio 2019中

依次点击顶部菜单栏的工具—>NuGet包管理器---->管理解决方案的NuGet 程序包

然后类似的在打开的窗口中搜索 ElectronNET.API，再选择ElectronNET.API包及其对应的合适的版本号，最后给对应项目添加依赖，如下图所示

项目配置

更改Program.cs

更改CreateHostBuilder方法，所作更改表示将Electron作为整个web应用程序的宿主，同时注意在文件头部引入对应的命名空间。

public static IHostBuilder CreateHostBuilder(string[] args) =>
       Host.CreateDefaultBuilder(args)
          .ConfigureWebHostDefaults(webBuilder =>
          {
              webBuilder.UseElectron(args); //添加的部分
              webBuilder.UseStartup();
           }); 

更改Startup.cs

首先在文件中添加以下方法

public async void ElectronBootstrap()
{
    var size = await Electron.Screen.GetPrimaryDisplayAsync();
    BrowserWindow browserWindow = await Electron.WindowManager.CreateWindowAsync
                          (new BrowserWindowOptions
                          {
                              //窗口属性配置项,长度，宽度等
                              ...
                           });
     browserWindow.OnReadyToShow += () => browserWindow.Show();
} 

然后在Configure(IApplicationBuilder app, IWebHostEnvironment env)方法的末尾添加如下代码段

if (HybridSupport.IsElectronActive)
{
    ElectronBootstrap();
} 

项目初始化

在第一次运行Electron.NET项目之前，需要对整个项目进行初始化，在工程的根目录下(即Program.cs文件所在目录下)，打开终端或者cmd控制台，执行 electronize init，执行完成之后，工程的根目录下会增加一个electron.manifest.json文件

运行项目

至此，环境已基本配置完，可以通过指令启动项目，也可通过配置启动项的方式，在IDE中点击运行按钮来运行项目

指令启动

在工程的根目录下打开终端或者cmd控制台，执行 electronize start，即可启动项目，第一次启动时会下载所需的npm包，所以会稍微慢一些，后面运行的话会快很多。

直接通过IDE启动

工程的启动项配置文件为 工程根目录/Properties/launchSettings.json，执行 electronize init之后该文件会自动添加 Electron.NET项目的启动项配置信息，Visual Studio 2019中无需作任何更改，将启动项改为Electron.NET项目的启动项，然后点击运行按钮即可启动Electron.NET项目。

而在Linux系统下的Rider中，需将Electron.NET项目启动项中的 "workingDirectory"属性设置为.sln文件所在目录（可用 $(SolutionDir) 表示，这样在不同电脑上移动时无需更改），然后将启动项改为Electron.NET项目的启动项，然后点击运行按钮即可启动Electron.NET项目。

"Electron.NET App": {
      "commandName": "Executable",
      "executablePath": "electronize",
      "commandLineArgs": "start",
      "workingDirectory": "F:/NBA/Electron/GraduationProject/Electron-Oscilloscope",
      "nativeDebugging": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation"
      }
    }, 

要添加启动配置参数时，只需在"commandLineArgs"属性对应的start后面 添加对应的启动配置参数名 和值

{
    "commandLineArgs": "start /PublishSingleFile false" 
} 

由之前的介绍可知，第一次运行项目时，会执行 npm install 的操作，此操作会下载package.json(在工程根目录/obj/Host目录下)文件注明的所有dependency依赖，包括最重要的Electron的npm包，项目运行时可能会卡在 electron的依赖包下载这一步，比如卡在这一步

> electron@13.6.3 postinstall /home/huyang/Desktop/wjt/Electron_Oscilloscope_latest/Electron_Oscilloscope_latest/obj/Hostde_modules/electron
> node install.js 

甚至时间过长最后报错 RequestError: read ETIMEDOUT，这是因为npm的软件源是国外网站，导致下载速度过慢导致的，但是之前已经把npm的软件源设置为淘宝镜像源，下载速度还是很慢，可能是未全局设置，这里可以通过nrm来管理可用的npm 包的源地址，而不需要手动去输入npm的源地址，命令行模式下

# 全局安装nrm
npm install nrm -g
#查看可用源地址
nrm ls
#切换源地址
nrm use taobao

#然后通过npm install xxx 的方式就可以快速下载包了 

详见 安装 electon 的时候报错 RequestError: read ETIMEDOUT

如果这么操作还是不行的话，进入obj/Host/node_modules/electron文件夹下（注意：这个文件夹可能不存在，但是在执行node install.js的过程中却能找到该文件夹，项目运行意外终止后该文件夹却没有了。解决办法：项目运行过程中，注意看控制台窗口或终端，当执行到node install.js这一步，按Ctrl+C终止运行，此时该文件夹是存在的），编辑install.js，修改downloadArtifact这段代码

downloadArtifact({
  version,
  artifactName: 'electron',
  force: process.env.force_no_cache === 'true',
  cacheRoot: process.env.electron_config_cache,
  platform: process.env.npm_config_platform || process.platform,
  arch: process.env.npm_config_arch || process.arch,
    //添加的部分
    mirrorOptions: {
        mirror: 'https://npm.taobao.org/mirrors/electron'
    }
}).then(extractFile).catch(err => {
  console.error(err.stack);
  process.exit(1);
}); 

然后在obj/Host/node_modules/electron的cmd中执行

node install.js 

再继续使用 electronize start启动工程

项目调试

环境介绍

IDE：Rider 2021.2 / visual studio 2019

操作系统：deepin（Linux x64） / Windows(x64)

Electron.NET应用分为两大进程：主进程和渲染进程，各自调试的方式有一定区别。本项目中，主进程即整个后端(基于C#语言)，前端中主窗口和所有子窗口分别代表一个渲染进程，主要基于JavaScript语言。

主进程调试

主进程调试和普通应用的调试有很大的不同，先在需要调试的代码处打断点，具体步骤如下

0. 启动electron.net应用
1. 点击顶部选项栏中的 “Run”---->“Attach to Process”，在弹出的窗口中选择electron应用窗口启动的那个进程
2. 打开electron应用的开发者工具（快捷键 “Ctrl+Shift+I” ），然后按 ctrl+R重新加载应用，即可在IDE中调试后端C#代码

rider中

选择Electron.NET应用启动的进程

在应用的开发者工具下按 ctrl+R重新加载应用，即可调试主进程

visual Studio 2019中

选择Electron.NET应用启动的进程（项目名为Electron-Oscilloscope）

在应用的开发者工具下按 ctrl+R重新加载应用，即可调试主进程

渲染进程调试

选择了Electron应用的启动配置项之后，

0. rider/Visual Studio中点击启动按钮（绿色三角形）正常启动Electron.NET应用，
1. 打开Electron应用窗口的开发者工具（快捷键 “Ctrl+Shift+I” ），
2. 点击source标签，然后在需要调试的代码中打断点，
3. ctrl+R重新加载即可调试渲染进程。