【Electron Playground】Electron 視窗問題彙總

曉前端發表於2020-12-16

作者：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()
    })
})
  1. 父子視窗

沒有上述那麼麻煩，配置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)
  1. 渲染程式建立視窗

渲染程式通訊很簡單，通過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、簡書、開源中國、部落格園 關注我們。

相關文章