一、什么是Electron

1. 基本介绍

electron软件系统开发定制是一个使用前端技术开软件系统开发定制发跨平台桌面应用程序的框架，软件系统开发定制帮我们把网页转换成桌面应用。

Electron：软件系统开发定制你只需把精力放在你的软件系统开发定制应用核心上即可，软件系统开发定制我们负责难搞的部分。

2. 优势

1. 专一，软件系统开发定制专门为桌面应用而生。
2. 软件系统开发定制可以调用所有的js和node原生的api
3. 开源，文档简洁，社区活跃（软件系统开发定制这貌似跟我没关系）

二、快速上手

1. 创建项目

新建一个文件夹，打开终端输入，初始化项目，填写名称、作者、版本等各项配置

npm init
1

2. 安装electron

将electron的node模块下载到本地，如果失败（跟我一样倒霉），可以换用淘宝镜像cnpm

npm install electron --save
1

3. 配置json文件

添加一行代码，将main字段的值改为main.js（不改也可以，对应的是等一下创建的入口js文件的名称）

{  "name": "hello-electron",  "version": "1.0.0",  "description": "",  "main": "main.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    // 新加的一行，方便运行electron    "electron": "electron ."  },  "author": "",  "license": "ISC",  "dependencies": {    "electron": "^19.0.8"  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4. 编写入口js文件创建窗口

具体代码写在下面，写有注释

// app对象用于控制electron的生命周期事件// BrowserWindow用于初始化窗口，返回一个窗口对象，与vue对象类似const { app , BrowserWindow } = require("electron");//绑定生命周期事件app.on('ready',() => {  const mainwin = new BrowserWindow({  	// 初始化窗口的宽高    width:500,    height:500  })  // 在主窗口中加载html文件，html中的内容会显示在窗口中  mainwin.loadFile('./src/index.html');})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

顺便吐槽一下，可爱的vscode是不是更新之后不能快速生成html了，可恶。

三、热加载

每次修改代码之后都需要重新编译，很麻烦，可以安装插件实现热更新。

1. npm安装

npm install --save-dev electron-reloader
1

2. 引入插件
   在main.js中加入代码

// 热加载const reloder = require("electron-reloader")// module模块对象是所有对象reloder(module);
1
2
3
4

这个时候修改项目的任何有关联的地方electron应用都会随着更改。

四、进程

• 主进程就是main.js的加载进程，用来创建和展示用户界面
• 其他的进程就是渲染进程，用于展示界面，每个界面运行在各自的渲染进程中
• 主进程只能有一个，渲染进程可以有多个，由chrome实现
• 主进程的调试在终端窗口查看，渲染进程的调试窗口通过ctrl + shift + i打开，跟浏览器的调试窗口不能说是大差不差，只能说是一模一样。
• 渲染进程的调试窗口可以通过代码打开

mainwin.webContents.openDevTools();
1

五、原生菜单(Menu类)

1. 原生菜单配置

原生菜单的配置项很多，一次学不下来，简单看几个。
首先要引入Menu类。

const { Menu } = require("electron"); 
1

菜单的配置是一个数组，每个数组元素是一个对象，代表一个菜单项。
每个菜单项可以分别配置label（菜单项名称）、click（点击事件）、submenu（点击后打开的子菜单）

const option = [    {      label: '文件',      submenu: [        {          label: '新建窗口',          click(){            new BrowserWindow({              width: 100,              height: 100            })          }        }      ]    },    {      label: '关于'    },  ];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

然后编译菜单模板，设置菜单

// 编译菜单模板  const menu = Menu.buildFromTemplate(option);  // 设置菜单  Menu.setApplicationMenu(menu);
1
2
3
4

2. 自定义菜单

自定义菜单怎么弄，很简单。
把默认的去掉，然后自己用html写一个，然后开启渲染进程中的node模块和remote模块（remote是主进程的模块）
去除默认菜单的方法：在创建窗口时加入配置

// 关闭自定义菜单frame: false,webPreferences: {	// 开启渲染进程的node模块	nodeIntegration : true,	// 开启渲染进程的remote模块	enableRemoteModule : true}
1
2
3
4
5
6
7
8

在css中加入允许拖拽，并且取消菜单项的拖拽，否则会阻止事件

ul {	// 打开拖拽  -webkit-app-region: drag;}li {	// 关闭拖拽  -webkit-app-region: no-drag;}
1
2
3
4
5
6
7
8
9

3. 打开浏览器

使用shell对象的方法
使用a标签会在将应用程序本身当作浏览器去访问

import { shell } form 'element';// 使用默认应用程序打开某网址或本地文件shell.openExternal('路径');
1
2
3

六、本地文件操作

1. 读取文件

通过remote得到dialog模块
dialog模块内有打开电脑对话框的函数showOpenDialogSync([window,],option)，其中第一个参数可以不填，第二个参数可以配置默认的对话框
这个方法返回读取到的文件路径组成的数组，并不会操作文件，之后调用node内置的fs模块来读取文件。

option的配置很多，列举下边几个，需要更多的时候再查。

title: '读取文件',buttonlabel: '读取'filters: [	{ name: 'picture' , extension: ['js'] }]
1
2
3
4
5

2. 保存文件

在dialog中有一个showSaveDialogSync([window,],option)可以打开保存文件的窗口，和打开文件很类似

这个函数返回保存的地址。但并不会进行文件操作，需要调用node中对应的fs模块来实现操作。

title: '保存文件',buttonlabel: '保存'filters: [	{ name: 'index' , extension: ['js'] }]
1
2
3
4
5

七、快捷键的定义

可以引入globalShortcut模块来定义快捷键
注意globalShortcut是主进程的模块，在渲染进程中需要通过remote来引入

globalShortcut.register("快捷键组合" , <事件函数>)
1

八、主进程和渲染进程的通信

1. 在渲染进程中通过ipcRenderer模块发射事件

function maxWindow() {	ipcRenderer.send('max-window',data);}
1
2
3

2. 在主进程中引入ipcMain模块定义事件函数

ipcMain.on('max-window',(event,prame) => {	})
1
2
3

3. 传参

• 在send的第一个参数后可以在跟一个参数传递
• 接收时事件函数中第一个参数为事件对象，第二个参数为传递的参数

九、打包

1. 安装打包工具

cnpm i electron-packager -D
1

2. 配置打包指令

"build" : "electron-packager ./ helloworld --platform=win32 --arch=x64 --out ./outApp --overwrite --icon=favicon.ico"
1

十、结合vue

1. 通过vue脚手架创建项目。
2. 在项目中安装electron

cnpm i electron -S
1

3. 在项目的package.json中添加electron的配置，编写electron的的main.js
4. 通过mainwin.loadURL加载vue项目