Electron初探（一）

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));