electron基本配置

Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。 Electron通過將Chromium和Node.js合併到同一個運行時環境中，並將其打包爲Mac，Windows和Linux系統下的應用來實現這一目的。

前端又打開了一扇通向新世界的大門，通過Electron前端就可以開發桌面應用啦。
先來了解一下框架的基本配置。
安裝

npm install [email protected] -g --save
npm install electron-packager -g --save

後者是electron的打包工具。
最新版本的electron可能會安裝失敗。
和webpack打包很像，需要package.json和一個入口的js文件。
package.json
start是不打包在測試環境運行，version是查看electron的庫版本（這和安裝時候的6.1.0版本不一樣），package這個比較重要，是專門用來打包的命令其中test是項目的名字，--win是打包windows平臺，--out是打包生成的位置，--arch是打包成64位（x64）或32位（ia32），--electron-version是對應的剛纔用version查出來的版本庫，--icon是logo圖標

{
  "name": "test",
  "version": "0.0.1",
  "description": "a simple application",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "version": "electron -v",
    "package": "electron-packager . test --win --out ./test --arch=x64 --electron-version=1.6.15 --icon=logo.ico"
  },
  "author": "test",
  "license": "ISC",
  "dependencies": {
    "iconv-lite": "^0.5.0"
  }
}

main.js
這裏做工程中相關的配置，包括窗口大小和一些相關的類似生命週期的邏輯處理

const {app,BrowserWindow,ipcMain} = require('electron');
let win;
let windowConfig = {
  width: 750,
  height: 712,
  webPreferences: {
    javascript: true,
    plugins: true,
    nodeIntegration: true, // 是否集成 Nodejs
    webSecurity: false,
  }
};
function createWindow() {
  win = new BrowserWindow(windowConfig);
  win.loadURL(`file://${__dirname}/index.html`);//關聯的頁面文件
  //開啓調試工具
  win.webContents.openDevTools();
  win.on('close', () => {
    //回收BrowserWindow對象
    win = null;
  });
  win.on('resize', () => {
    // win.reload();
  })
}

app.on('ready', createWindow);
app.on('window-all-closed', () => {
  app.quit();
});
app.on('activate', () => {
  if (win == null) {
    createWindow();
  }
})

基本的配置大體就完成了