【Electron Playground】Electron 窗口問題彙總

做者：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種方案能夠隱藏菜單

1. 使用無邊框窗口，去除菜單和邊框，本身手寫一個控制的邊框，目前github都有這些庫；
2. 使用autoHideMenuBar:true 可是按下ALT鍵會出現菜單

8. 窗口之間通訊。

1. 主進程建立窗口

配置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()
    })
})

2. 父子窗口

沒有上述那麼麻煩，配置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)

3. 渲染進程建立窗口

渲染進程通訊很簡單，經過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、簡書、開源中國、博客園 關注咱們。