electron客户端开发

安装配置

https://blog.csdn.net/binnygoal/article/details/112524168

快速开始

https://www.electronjs.org/

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start

npm start时报错
Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
解决：

1. 进入到 node_modules/electron 文件夹。
2. 在当前文件夹开启终端，并运行 node install.js。

去除上方工具栏

import { app, BrowserWindow, screen, Menu } from 'electron';
Menu.setApplicationMenu(null);//去除菜单

APP默认图标修改

electron窗口左上角默认图标位置在src\assets\icons，格式为icns。要替换的话将512*512的png文件转换为icns格式，放入icons文件夹。
dist文件也要操作
https://www.jianshu.com/p/cbbcad649e64

与浏览器窗口相关的参数

api网址
https://www.electronjs.org/zh/docs/latest/api/browser-window
源码
在node_modules\electron\electron.d.ts文件

interface BrowserWindowConstructorOptions

ng添加font-awesome字体库

npm install --save font-awesome

styles.sass主文件中引入

$fa-font-path: "../fonts";
@import'~font-awesome/scss/font-awesome.scss';

使用

错误："Module not found: Error: Can't resolve fs"

原因：项目启动方式问题，在项目使用fs时启动浏览器调试项目会出现这个问题。
需要调整启动方式。
另：想使用dev模式启动调试代码的话，在angular.webpack.js文件中添加

config.externals= {
   'electron': 'require("electron")'
};

参考：fs 是 nodeJs 唯一的模块。当您运行“ng serve”时，您的应用程序将被编译并在您的浏览器中运行，因此您不能使用此模式。出于安全原因，您的浏览器无法在没有用户操作（选择文件）的情况下读取文件

自定义导航栏问题

在设置了自定义导航栏可拖拽之后，存在一个问题是双击自定义导航栏窗口尺寸变化。

.nav{
	-webkit-app-region: drag;
	.noDrag{
		-webkit-app-region: no-drag;
	}
}

解决一：angular监听window变化

import { fromEvent } from 'rxjs';
ngOnInit(): void {
    fromEvent(window,'resize').subscribe((event:any)=>{
      this.status = !this.status;
    })
}

一些开发教程

https://www.devdungeon.com/content/electron-angular-tutorial
https://github.com/maximegris/angular-electron
自定义工具栏
https://www.electronjs.org/zh/docs/latest/tutorial/process-model