Electron桌面客户端美化笔记

美化内容

1.Electron自定义窗口标题栏
2.为标题栏增加图标，放大，刷新，关闭功能按钮（涉及主进程和渲染进程通信）
3.鼠标右键新增自定义菜单按钮

Electron自定义窗口标题栏

我们知道Electron窗口可直接加载网页连接（比如百度），打包后即可安装（exe即桌面程序），所以很多网站做好web端的同时，可能需要提供一个可安装执行的桌面程序，使得用户觉得更直观（有安装图标，点击即运行），而无需打开浏览器，点击连接或则输入网址访问。
但是Electron自带标题栏样式很不美观，我们往往需要自定义顶部标题栏已符合我们自己的程序。这就需要自定义标题栏，需要以下几个步骤：

1. 去掉原生标题栏 ，将原生标题栏取消或隐藏调,在main.js中进行窗口配置

const WIDTH = 1550
const HEIGHT = 900
let mainWindow
let winConfig = {
   width: WIDTH,
   transparent: false,//修改，否则窗口放大没法恢复
   height: HEIGHT,
   show: false,
   resizable: true,
   fullscreenable: true,
   maximizable: true,
   titleBarStyle: 'hidden',   //启用自定义标题栏
   frame: true,
   webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
       // 2. Enable Node.js integration
       nodeIntegration: true,
       enableRemoteModule: true,
       contextIsolation: false,
       webSecurity: f