1. 用vscode调试electron主线程
拷贝项目[email protected]，其实做了配置，但是运行Electron: All并没有走进main.dev.ts中的断点，参考修改launch.json做如下修改：
package.json script新增：
"start-main-debug": "yarn start:main --inspect=5858 --remote-debugging-port=9223"
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
macOS
In a terminal, execute /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
JavaScript Debugging Recipes
Electron debugging (main and renderer process)
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();
});
3. win7下 svg显示不出来
项目在本地64位win10没问题 但是打包安装到win7 32位 有时候图片显示不出来，network报错 ERR_FILE_NOT_FOUND，
经过苦心搜索后发现，是electron的bug，资源多的时候进行密集请求很容易出现文件加载不出来的问题。
需要升级electron，我当前的版本为[email protected]，升级到11.4.1就好了
Unable to read files from asar after 10+ hours of runtime
4. 一些issue
透明窗口在切换可见性时闪烁 Transparent windows flicker on toggling visibility
frameless window use win.hide() then use win.show() and the window flicker
App processes don't close on exit
app.quit() can't terminate electron.exe in 'ready' event handler without any window created
从零开始的electron开发-主进程-窗口关闭与托盘处理
electron程序保护措施（崩溃监控，开机自启，托盘关闭）
5. process.platform 拿到的居然是browser
process.versions
{
"node": "12.18.3",
"v8": "8.7.220.31-electron.0",
"uv": "1.38.0",
"zlib": "1.2.11",
"brotli": "1.0.7",
"ares": "1.16.0",
"modules": "85",
"nghttp2": "1.41.0",
"napi": "6",
"llhttp": "2.0.4",
"http_parser": "2.9.3",
"openssl": "1.1.1",
"icu": "67.1",
"unicode": "13.0",
"electron": "11.4.1",
"chrome": "87.0.4280.141"
}
实现不了我想要的效果，打断点截图如下，但是运行完毕在控制台输出process.platform得到的是win32,最后选择使用
var os = require('os');
console.log(os.type()); // "Windows_NT"
console.log(os.release()); // "10.0.14393"
console.log(os.platform()); // "win32"
得到了正确的结果 ,win7 win10 都有问题
How do I determine the current operating system with Node.js
6. electron-builder 打包后 报错 cant not fine module
主进程代码：
import { Worker } from 'worker_threads'
const worker = new Worker(path)
传递path相对路径报错，传递绝对路径也报错，原因是依赖path文件在app.asar压缩包里导致程序拿不到文件，
配置electron-builder
asarUnpack: ['**/node_modules/**/*']
这个时候node_modules中的文件会在安装程序的时候被解压到app.asar.unpacked目录，并不会导致安装包体积变大。再传递绝对路径就没问题了。
Unable to use NodeJS worker_threads module
electron-builder打包导致的worker_thread子进程无法执行的问题
7. [email protected] 正常配置showOpenDialog参数 无法打开文件夹
github dist demo
万恶之源在于contextIsolation: true，做如下配置是没问题的
preload.ts
import { contextBridge, remote } from "electron";
const apiKey = "electron";
const api: any = {
async chooseFolder(intl: any) {
return await remote.dialog.showOpenDialog(remote.getCurrentWindow(), {
title: intl.formatMessage({ id: "open" }),
properties: ["openDirectory"],
});
},
};
contextBridge.exposeInMainWorld(apiKey, api);
renderer.ts
const selectPath = async (): Promise => {
if (isElectron()) {
const electron = (window as any).electron
const { filePaths } = await electron.chooseFolder(intl)
if (Array.isArray(filePaths)) {
form.setFieldsValue({ filePath: filePaths[0] })
}
}
}
或者contextIsolation设置为true,在renderer.ts里直接require(''electron")也是没问题的
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true,
contextIsolation: false,
enableRemoteModule: true,
// preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
}
8. -webkit-app-region: drag; 可能有魔力
某个标签设置该样式后，具备以下三个特性
- 该区域可以拖拽整个窗口
- 双击该区域可以还原窗口大小
- 右键会出现一些菜单
在chrome设置，但是并无效果，也就是说electron对该样式做了特殊处理
但是同时会带来一些问题
其上的元素（比如绝对定位的）的cursor:pointer跟click会无效，如何解决？
在上方的元素设置'-webkit-app-region': 'no-drag'
Set custom draggable region