1. 用vscode調(diào)試electron主線(xiàn)程
拷貝項(xiàng)目electron-react-boilerplate@v2.0.1咒精，其實(shí)做了配置寒亥，但是運(yùn)行Electron: All并沒(méi)有走進(jìn)main.dev.ts中的斷點(diǎn)露该，參考修改launch.json做如下修改：
package.json script新增：
"start-main-debug": "yarn start:main --inspect=5858 --remote-debugging-port=9223"
launch.json
vscode 需要安裝Debugger for Chrome效拭，并且需要用如下配置或者啟動(dòng)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
JavaScript Debugging Recipes
Electron debugging (main and renderer process)
2. electron 制作右下角提示框
通常我們會(huì)
const myNotification = new Notification('開(kāi)始', {
icon: 'img'
});
但win10企業(yè)版 LTSC 1809中输吏，無(wú)通知彈出离陶，所以用BrowserWindow去模擬纷宇，但是有兩個(gè)問(wèn)題
- 彈窗定位問(wèn)題
x ,y 參數(shù)是相對(duì)左上角定位的坊萝，拿到顯示器高度寬度減去彈窗的寬高度就定位在了右下角
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,
} })
- 加載白屏問(wèn)題
首先設(shè)置 BrowserWindow的 show: false,然后ready-to-show中調(diào)用show
在加載頁(yè)面時(shí)苛预，渲染進(jìn)程第一次完成繪制時(shí)句狼，如果窗口還沒(méi)有被顯示，渲染進(jìn)程會(huì)發(fā)出 ready-to-show 事件热某，解決出現(xiàn)白屏的問(wèn)題
browserWindow.once("ready-to-show", () => {
browserWindow && browserWindow.show();
});
3. win7下 svg顯示不出來(lái)
項(xiàng)目在本地64位win10沒(méi)問(wèn)題 但是打包安裝到win7 32位 有時(shí)候圖片顯示不出來(lái)腻菇，network報(bào)錯(cuò) ERR_FILE_NOT_FOUND，
經(jīng)過(guò)苦心搜索后發(fā)現(xiàn)昔馋，是electron的bug筹吐，資源多的時(shí)候進(jìn)行密集請(qǐng)求很容易出現(xiàn)文件加載不出來(lái)的問(wèn)題。
需要升級(jí)electron秘遏，我當(dāng)前的版本為electron@11.2.2丘薛，升級(jí)到11.4.1就好了
Unable to read files from asar after 10+ hours of runtime
4. 一些issue
透明窗口在切換可見(jiàn)性時(shí)閃爍 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
從零開(kāi)始的electron開(kāi)發(fā)-主進(jìn)程-窗口關(guān)閉與托盤(pán)處理
electron程序保護(hù)措施（崩潰監(jiān)控，開(kāi)機(jī)自啟邦危，托盤(pán)關(guān)閉）
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"
}
實(shí)現(xiàn)不了我想要的效果洋侨，打斷點(diǎn)截圖如下舍扰，但是運(yùn)行完畢在控制臺(tái)輸出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"
得到了正確的結(jié)果 ,win7 win10 都有問(wèn)題
How do I determine the current operating system with Node.js
6. electron-builder 打包后 報(bào)錯(cuò) cant not fine module
主進(jìn)程代碼：
import { Worker } from 'worker_threads'
const worker = new Worker(path)
傳遞path相對(duì)路徑報(bào)錯(cuò)，傳遞絕對(duì)路徑也報(bào)錯(cuò)希坚，原因是依賴(lài)path文件在app.asar壓縮包里導(dǎo)致程序拿不到文件边苹，
配置electron-builder
asarUnpack: ['**/node_modules/**/*']
這個(gè)時(shí)候node_modules中的文件會(huì)在安裝程序的時(shí)候被解壓到app.asar.unpacked目錄，并不會(huì)導(dǎo)致安裝包體積變大裁僧。再傳遞絕對(duì)路徑就沒(méi)問(wèn)題了个束。
Unable to use NodeJS worker_threads module
electron-builder打包導(dǎo)致的worker_thread子進(jìn)程無(wú)法執(zhí)行的問(wèn)題
7. electron@13.1.6 正常配置showOpenDialog參數(shù) 無(wú)法打開(kāi)文件夾
萬(wàn)惡之源在于contextIsolation: true，做如下配置是沒(méi)問(wèn)題的
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<any> => {
if (isElectron()) {
const electron = (window as any).electron
const { filePaths } = await electron.chooseFolder(intl)
if (Array.isArray(filePaths)) {
form.setFieldsValue({ filePath: filePaths[0] })
}
}
}
或者contextIsolation設(shè)置為true,在renderer.ts里直接require(''electron")也是沒(méi)問(wèn)題的
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; 可能有魔力
某個(gè)標(biāo)簽設(shè)置該樣式后聊疲，具備以下三個(gè)特性
- 該區(qū)域可以拖拽整個(gè)窗口
- 雙擊該區(qū)域可以還原窗口大小
- 右鍵會(huì)出現(xiàn)一些菜單
在chrome設(shè)置茬底，但是并無(wú)效果，也就是說(shuō)electron對(duì)該樣式做了特殊處理
但是同時(shí)會(huì)帶來(lái)一些問(wèn)題
其上的元素（比如絕對(duì)定位的）的cursor:pointer跟click會(huì)無(wú)效获洲，如何解決阱表？
在上方的元素設(shè)置'-webkit-app-region': 'no-drag'
