作者:Kurosaki
本節旨在匯總在開發Electron 窗口可能遇到的問題,做一個匯總,后續遇到問題會持續更新。
1. 窗口閃爍問題。
const { BrowserWindow } = require('electron');
const win = new BrowserWindow();
win.loadURL('https://github.com');
使用new BrowserWindow() 創建出窗口,如果不作任何配置的話,窗口就會出現,默認是白色的;這個時候使用win.loadURL('https://github.com'),加載遠程資源,窗口重新渲染,從而導致窗口出現閃爍。
解決方法:
const { BrowserWindow } = require('electron');
const win = new BrowserWindow({ show:false });
win.loadURL('https://github.com');
win.once('ready-to-show',()=>{
win.show();
})
2. 老版Window7系統下,窗口白屏問題。
公司業務開發的Electron應用,是給老師用的,有些老師是那種老版本Window7,並且關閉了自動更新。
解決辦法:
安裝最新版的.NET Framework
官方下載地址:https://dotnet.microsoft.com/download/dotnet-framework
相關issue: https://github.com/electron/electron/issues/25186
3. macOS下電腦關機,Electron應用阻止關機問題。
macOS 關機會把所有的窗口關閉,如果存在
// 窗口注冊close事件
win.on('close',(event)=>{
event.preventDefault() // 阻止窗口關閉
})
這種代碼,會導致阻止系統關機。
4. Window
系統下,使用 hide()
方法,可能導致頁面掛住不能用。
導致這種場景可以是因為調用 hide()
之后不調用 show()
方法,而只是調用 restore()
方法,會導致頁面掛住不能用。所以得在 restore()
方法之后添加 show()
方法
5. 新版Electron,導致渲染進程無法訪問到remote模塊。
切換成新版的Electron,new BrowserWindow(options)配置更新,webPreferences中配置enableRemoteModule:true
6. macOS下無邊框窗口,頂部拖拽問題。
在創建窗口時,配置一下preload.js,代碼如下:
function initTopDrag() {
const topDiv = document.createElement('div') // 創建節點
topDiv.style.position = 'fixed' // 一直在頂部
topDiv.style.top = '0'
topDiv.style.left = '0'
topDiv.style.height = '20px' // 頂部20px才可拖動
topDiv.style.width = '100%' // 寬度100%
topDiv.style.zIndex = '9999' // 懸浮於最外層
topDiv.style.pointerEvents = 'none' // 用於點擊穿透
topDiv.style['-webkit-user-select'] = 'none' // 禁止選擇文字
topDiv.style['-webkit-app-region'] = 'drag' // 拖動
document.body.appendChild(topDiv) // 添加節點
}
window.addEventListener('DOMContentLoaded', function onDOMContentLoaded() {
initTopDrag()
})
7. Window系統下,隱藏菜單問題。
Window系統下,菜單長的很丑,有2種方案可以隱藏菜單
- 使用無邊框窗口,去除菜單和邊框,自己手寫一個控制的邊框,目前github都有這些庫;
- 使用autoHideMenuBar:true 但是按下ALT鍵會出現菜單
8. 窗口之間通信。
- 主進程創建窗口
配置preload.js,將通信方法掛載到window
/**
* 這個是用於窗口通信例子的preload,
* preload執行順序在窗口js執行順序之前
*/
import { ipcRenderer, remote } from 'electron'
const { argv } = require('yargs')
const { BrowserWindow } = remote
// 父窗口監聽子窗口事件
ipcRenderer.on('communication-to-parent', (event, msg) => {
alert(msg)
})
const { parentWindowId } = argv
if (parentWindowId !== 'undefined') {
const parentWindow = BrowserWindow.fromId(parentWindowId as number)
// 掛載到window
// @ts-ignore
window.send = (params: any) => {
parentWindow.webContents.send('communication-to-parent', params)
}
}
創建窗口傳入id
browserWindow.webContents.on('new-window', (event, url, frameName, disposition) => {
event.preventDefault()
// 在通過BrowserWindow創建窗口
const win = new BrowserWindow({
show:false,
webPreferences: {
preload:preload.js,
additionalArguments:[`--parentWindow=${browserWindow.id}`] // 把父窗口的id傳過去
}
});
win.loadURl(url);
win.once('ready-to-show',()=>{
win.show()
})
})
- 父子窗口
沒有上述那么麻煩,配置preload就可以,具體實現
import { remote, ipcRenderer } from 'electron'
// 父窗口監聽子窗口事件
ipcRenderer.on('communication-to-parent', (event, msg) => {
alert(msg)
})
const parentWindow = remote.getCurrentWindow().getParentWindow()
// @ts-ignore
window.sendToParent = (params: any) =>
parentWindow.webContents.send('communication-to-parent', params)
- 渲染進程創建窗口
渲染進程通信很簡單,通過window.open,window.open會返回一個
windowObjectReference
通過postMessage就可以通信了。並且window.open 支持傳preload等配置。
9. 窗口全屏問題。
使用按鈕全屏和退出全屏是可以的,但是先點擊左上角🚥全屏,再使用按鈕退出全屏,是不行的。因為無法知道當前的狀態是全屏,還是不是全屏。
配置preload,使用Electron自帶的全屏API
import { remote } from 'electron'
const setFullScreen = remote.getCurrentWindow().setFullScreen
const isFullScreen = remote.getCurrentWindow().isFullScreen
window.setFullScreen = setFullScreen
window.isFullScreen = isFullScreen
10. macOS 開發環境,可能存在文件讀取權限問題。
在macOS下,我們啟動Electron應用,是在Application文件夾的外面,運行在一個只讀的disk image。基於安全的原因,需要存在用戶自己授權,electron-util做了一個很好的封裝。可以使用 electron-util
中的 enforceMacOSAppLocation
方法。該文檔electron-util。
const { app, BrowserWindow } = require('electron')
const { enforceMacOSAppLocation } = require('electron-util')
function createWindow() {
enforceMacOSAppLocation()
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
})
mainWindow.loadFile('index.html')
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
enforceMacOSAppLocation 方法封裝
'use strict';
const api = require('./api');
const is = require('./is');
module.exports = () => {
if (is.development || !is.macos) {
return;
}
if (api.app.isInApplicationsFolder()) {
return;
}
const appName = 'name' in api.app ? api.app.name : api.app.getName();
const clickedButtonIndex = api.dialog.showMessageBoxSync({
type: 'error',
message: 'Move to Applications folder?',
detail: `${appName} must live in the Applications folder to be able to run correctly.`,
buttons: [
'Move to Applications folder',
`Quit ${appName}`
],
defaultId: 0,
cancelId: 1
});
if (clickedButtonIndex === 1) {
api.app.quit();
return;
}
api.app.moveToApplicationsFolder({
conflictHandler: conflict => {
if (conflict === 'existsAndRunning') { // Can't replace the active version of the app
api.dialog.showMessageBoxSync({
type: 'error',
message: `Another version of ${api.app.getName()} is currently running. Quit it, then launch this version of the app again.`,
buttons: [
'OK'
]
});
api.app.quit();
}
return true;
}
});
};
如果你遇到Electron相關的問題,可以評論一下,我們共同解決,一起成長。
對 Electron 感興趣?請關注我們的開源項目 Electron Playground,帶你極速上手 Electron。
我們每周五會精選一些有意思的文章和消息和大家分享,來掘金關注我們的 曉前端周刊。
我們是好未來 · 曉黑板前端技術團隊。
我們會經常與大家分享最新最酷的行業技術知識。
歡迎來 知乎、掘金、Segmentfault、CSDN、簡書、開源中國、博客園 關注我們。