Electron4的使用範例

Electron4的使用範例

前言

  最近將遊戲引擎放到Electron後發現會報錯，查了一下是Electron4的初始化方式有一點不一樣，在此做個紀錄。

內容

  如果使用初探Electron裡的範例用在Electron4的話，會收到2個Warning，內容如下

Electron Deprecation Warning (nodeIntegration default change) This window has node integration enabled by default. In Electron 5.0.0, node integration will be disabled by default. To prepare for this change, set {nodeIntegration: true} in the webPreferences for this window, or ensure that this window does not rely on node integration and set {nodeIntegration: false}.
//
Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
    Policy set or a policy with "unsafe-eval" enabled. This exposes users of
    this app to unnecessary security risks.

google後發現Electron4有更改初始化的方法，可以參考Electron 4.0.0，而舊的範例使跑在Electron1.8，官網的教學並沒有更新，Electron4的範例如下

const {app, BrowserWindow} = require('electron')
  const path = require('path')
  const url = require('url')
  
  // 將這個 window 物件記在全域變數裡。
  // 如果沒這麼做，這個視窗在 JavaScript 物件被垃圾回收時（GC）後就會被自動關閉。
  let win
  
  function createWindow () {
    // 建立瀏覽器視窗。
    win = new BrowserWindow({
      width: 800, 
      height: 600,
      webPreferences:{
        nodeIntegration: true
      }
    });
  
    // 並載入應用程式的 index.html。
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }))
  
    // 打開 DevTools。
    win.webContents.openDevTools()
  
    // 視窗關閉時會觸發。
    win.on('closed', () => {
      // 拿掉 window 物件的參照。如果你的應用程式支援多個視窗，
      // 你可能會將它們存成陣列，現在該是時候清除相關的物件了。
      win = null
    })
  }
  
  
  // 當 Electron 完成初始化，並且準備好建立瀏覽器視窗時
  // 會呼叫這的方法
  // 有些 API 只能在這個事件發生後才能用。
  app.on('ready', createWindow)
  
  // 在所有視窗都關閉時結束程式。
  app.on('window-all-closed', () => {
    // 在 macOS 中，一般會讓應用程式及選單列繼續留著，
    // 除非使用者按了 Cmd + Q 確定終止它們
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  
  app.on('activate', () => {
    // 在 macOS 中，一般會在使用者按了 Dock 圖示
    // 且沒有其他視窗開啟的情況下，
    // 重新在應用程式裡建立視窗。
    if (win === null) {
      createWindow()
    }
  })
  process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
  // 你可以在這個檔案中繼續寫應用程式主程序要執行的程式碼。 
  // 你也可以將它們放在別的檔案裡，再由這裡 require 進來。

紅字的部分是新增的，新增完後就可以向舊版一樣使用。

參考資料

Why do I see an “Electron Security Warning” after updating my Electron project to the latest version?
Electron 4.0.0

相關文章

初探Electron