Electron初探（一）

前言

Electron、NW(原名node-webkit)主要是通過 JavaScript 和 HTML 創建跨平臺桌面應用的框架，同時集成 Node 來授予網頁訪問底層系統的權限。Electron的出身晚于NW，但是生態圈卻比NW更豐富，比較出名的Atom、Vs Code編輯工具就是使用Electron構建的。

一、環境配置

1. 做為一個node開發人員，因為國內種種原因，使用npm原生鏡像速度賊慢，但是我并不推薦使用cnpm,雖然在cnpm下各種環境問題(如node-sass、phantomjs等)被阿里爸爸解決了，但是同時也因為環境的原因造成某些包遺漏等等會導致最終某些功能無法運行。所以先把npm的鏡像配置好。

npm config set registry https://registry.npm.taobao.org

2. 因為國內種種原因，Electron被墻了。請先配置Electron的鏡像，并全局安裝Electron，當前版本為1.7.9。

npm config set electron_mirror http://npm.taobao.org/mirrors/electron/
npm i electron -g
electron -v
v1.7.9

二、項目創建

1. 創建package.json

npm init

2. 安裝electron依賴

npm i electron -S

3. 新建一個app.js文件，并在文件內引入electron模塊，有幾個常用的electron模塊。

/** app 模塊主要是控制整個應用的生命周期
 *  BrowserWindow 模塊是讓你可以創建electron瀏覽器窗口
 *  Menu 模塊是用來設置electron窗口的菜單欄以及里面的功能
 *  dialog 模塊是用來調用系統原生的對話框的
 */
// 我們把它們導入
const { app, BrowserWindow } = require('electron');

let win;
let windowOptions = {
  width: 1024, // 窗體寬度
  height: 800, // 窗體高度
  // resizable: false, // 窗口是否可以改變大小
  frame: true  // 窗口有沒有外框
  // 等等..
}

const createWindow = () => {
  win = new BrowserWindow(windowOptions);
  win.loadURL('http://www.baidu.com');
  win.webContents.openDevTools(); // 打開調試工具
  win.on('closed', () => {
    win = null
  })
};

// 我們給app配上生命周期
app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
});

// 主要用于mac端
app.on('activate', () => {
  if (!win) createWindow()
});

最后在命令行執行

electron app.js

就可以讓程序跑起來了

三、菜單欄介紹

說到桌面應用就不得不說到菜單欄，有許多的快捷操作和快捷鍵供我們使用，非常方便，首先我們引入菜單欄所需要的模塊。

const Menu = require('electron').Menu;
const MenuItem = require('electron').MenuItem;
// 或者利用ES6解構出來也行
// const { Menu, MenuItem } = require('electron');

// 我們先定義一個列表的數組
let menuList = [
  lable: '文件',     // 菜單列表的名稱
  submenu: [
    label: '撤銷',   // 菜單按鈕的名字
    accelerator: 'CmdOrCtrl+Z',  // 菜單按鈕的快捷鍵
    role: 'undo'    // electron提供默認菜單的功能
    click(item, window) {  // item為當前按鈕的相關設置等, window為當前窗體信息
      // do something
      // 需要注意的是設置了click事件后role設置將不生效
    }
  ]
]

role屬性值可以為：

• undo - 撤銷
• redo - 恢復
• cut - 剪切
• copy - 復制
• paste - 粘貼
• selectall - 全選
• minimize - 最小化當前窗口
• close - 關閉當前窗口

配置完成后在上文createWindow配置上就可以看到效果了

Menu.setApplicationMenu(Menu.buildFromTemplate(template));