electron 相关

1. 用vscode调试electron主线程

拷贝项目electron-react-boilerplate@v2.0.1，其实做了配置，但是运行Electron: All并没有走进main.dev.ts中的断点，参考修改launch.json做如下修改：

package.json script新增：

    "start-main-debug": "yarn start:main --inspect=5858 --remote-debugging-port=9223"

launch.json

launch.json

vscode 需要安装Debugger for Chrome，并且需要用如下配置或者启动Chrome：

Attach
With "request": "attach", you must launch Chrome with remote debugging enabled in order for the extension to attach to it. Here's how to do that:

Windows
Right click the Chrome shortcut, and select properties
In the "target" field, append --remote-debugging-port=9222
Or in a command prompt, execute <path to chrome>/chrome.exe --remote-debugging-port=9222

macOS
In a terminal, execute /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

2. electron 制作右下角提示框

通常我们会

         const myNotification = new Notification('开始', {
             icon: 'img'
         });

但win10企业版 LTSC 1809中，无通知弹出，所以用BrowserWindow去模拟，但是有两个问题

• 弹窗定位问题
  x ,y 参数是相对左上角定位的，拿到显示器高度宽度减去弹窗的宽高度就定位在了右下角

     const { width, height } = screen.getPrimaryDisplay().workAreaSize;
     const msgBoxHeight = 100
        let browserWindow: BrowserWindow|null = new BrowserWindow({   
            width: 400,
            height: msgBoxHeight,
            x:width - 400,
            y:height - msgBoxHeight, 
            frame: false,
            alwaysOnTop:true,
            autoHideMenuBar: true,
            show: false,
            minimizable: false,
            maximizable: false,
            closable: true,
            title: "Dialog",
            webPreferences: {
                nodeIntegration: true,
            } })

• 加载白屏问题
  首先设置 BrowserWindow的 show: false,然后ready-to-show中调用show
  在加载页面时，渲染进程第一次完成绘制时，如果窗口还没有被显示，渲染进程会发出 ready-to-show 事件，解决出现白屏的问题

            browserWindow.once("ready-to-show", () => {
              browserWindow && browserWindow.show();
            });