【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種方案可以隱藏選單

使用無邊框視窗，去除選單和邊框，自己手寫一個控制的邊框，目前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、簡書、開源中國、博客園關注我們，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/235688.html

標籤：HTML5

上一篇：SwiftUI如何在影片完成時得到通知

下一篇：ES6 let var const 對比區別總結 let面試題 JS中var和let const的區別學習阮一峰大佬的ES6入門的個人理解心得總結（1）

【Electron Playground】Electron 視窗問題匯總