Electron介绍与使用

一、前言

NW.js和Electron都可以用前端的知识来开发桌面应用。NW.js和Electron起初是同一个作者开发。后来种种原因分为两个产品。一个命名为NW.js(英特尔公司提供技术支持)、另一命名为Electron(Github 公司提供技术支持)。

NW.js和Electron可以用Nodejs中几乎所有的模块。NW.js和Electron不仅可以把html写的web页面打包成跨平台可以安装到电脑上面的软件，也可以通过javascript访问操作系统原生的UI和Api(控制窗口、添加菜单项目、托盘应用菜单、读写文件、访问剪贴板)。

github的atom编辑器、微软的vscode编辑器，包括阿里内部的一些软件也是用electron开发的

1. Electron 是由谁开发的?

Electron是由Github开发

2. Electron 是什么?

Electron是一个用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库

3. Electron 把 HTML，CSS 和 JavaScript 组合的程序构建为跨平台桌面应用程序的原理是什么?

原理为Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

4. Electron 何时出现的，为什么会出现?

Electron于2013年作为构建Atom的框架而被开发出来。这两个项目在2014春季开源。 (Atom:为 Github 上可编程的文本编辑器)

一些历史:

2013年4月Atom Shell项目启动。

2014年5月Atom Shell被开源。

2015年4月Atom Shell被重命名为Electron

2016年5月Electron发布了v1.0.0版本

5. Electron 当前流行程度?

目前Electron已成为开源开发者、初创企业和老牌公司常用的开发工具。

6. Electron 当前由那些人在维护支持?

Electron当前由Github上的一支团队和一群活跃的贡献者维护。有些贡献者是独立开发者，有些则在用Electron构建应用的大型公司里工作。

7. Electron 新版本多久发布一次?

Electron的版本发布相当频繁。每当Chromium、Node.js有重要的bug修复，新API或是版本更新时Electron会发布新版本。

一般Chromium发行新的稳定版后的一到两周之内，Electron中Chromium的版本会对其进行更新，具体时间根据升级所需的工作量而定。

一般Node.js发行新的稳定版一个月后，Electron中Node.js的版本会对其进行更新，具体时间根据升级所需的工作量而定。

8. Electron 的核心理念是什么?

Electron的核心理念是:保持Electron的体积小和可持续性开发。

如:为了保持Electron的小巧 (文件体积) 和可持续性开发 (以防依赖库和API的泛滥) ，Electron限制了所使用的核心项目的数量。

比如Electron只用了Chromium的渲染库而不是其全部组件。这使得升级Chromium更加容易，但也意味着Electron缺少了Google Chrome里的一些浏览器相关的特性。添加到Electron的新功能应该主要是原生API。如果可以的话，一个功能应该尽可能的成为一个Node.js模块。

9. Electron 当前的最新版本为多少?

Electron当前的最新版本为4.0.1(当前时间为2019年1月6号)

二、环境搭建

1. 安装 electron

npm install -g electron

2. 克隆一个仓库、快速启动一个项目

# 克隆示例项目的仓库git clone https://github.com/electron/electron-quick-start# 进入这个仓库cd electron-quick-start# 安装依赖并运行npm install && npm start

3. 手动搭建一个 electron 项目

新建一个项目目录例如:electrondemo01

在electrondemo01目录下面新建三个文件:index.html、main.js、package.json

index.html里面用css进行布局(以前怎么写现在还是怎么写)

在main.js中写如下代码

varelectron=require('electron');//electron 对象的引用constapp=electron.app;//BrowserWindow 类的引用constBrowserWindow=electron.BrowserWindow;letmainWindow=null;//监听应用准备完成的事件 app.on('ready',function(){//监听应用准备完成的事件app.on('ready',function(){//创建窗口mainWindow=newBrowserWindow({width:800,height:600});mainWindow.loadFile('index.html');mainWindow.on('closed',function(){mainWindow=null;})})})//监听所有窗口关闭的事件 app.on('window-all-closed',function(){// On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if(process.platform!=='darwin'){app.quit();}})

运行

electron . #注意:命令后面有个点

4. electron-forge 搭建一个 electron 项目

electron-forge相当于electron的一个脚手架，可以让我们更方便的创建、运行、打包electron项目

npm install -g electron-forge electron-forge init my-new-app cd my-new-appnpm start

三、Electron 运行流程

3.1 Electron 运行的流程

image.png

3.2 Electron 主进程和渲染进程

Electron运行package.json的main脚本的进程被称为主进程。

在主进程中运行的脚本通过创建web页面来展示用户界面。一个Electron应用总是有且只有一个主进程。

由于Electron使用了Chromium(谷歌浏览器)来展示web页面，所以Chromium的多进程架构也被使用到。每个Electron中的web页面运行在它自己的渲染进程中。

主进程使用BrowserWindow实例创建页面。每个BrowserWindow实例都在自己的渲染进程里运行页面。当一个BrowserWindow实例被销毁后，相应的渲染进程也会被终止

image.png

进程:进程是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。

线程:在一个程序里的一个执行路线就叫做线程(thread)。更准确的定义是: 线程是“一个进程内部的控制序列”。

线程和进程:一个程序至少有一个进程,一个进程至少有一个线程

3.3 Electron 渲染进程中通过 Nodejs 读取本地文件

在普通的浏览器中，web页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。然而Electron的用户在Node.js的API支持下可以在页面中和操作系统进行一些底层交互。

Nodejs在主进程和渲染进程中都可以使用。渲染进程因为安全限制，不能直接操作生GUI。虽然如此，因为集成了 Nodejs，渲染进程也有了操作系统底层API的能力，Nodejs中常用的Path、fs、Crypto等模块在Electron可以直接使用，方便我们处理链接、路径、文件MD5等，同时npm还有成千上万的模块供我们选择。

varfs=require('fs');varcontent=document.getElementById('content');varbutton=document.getElementById('button');button.addEventListener('click',function(e){fs.readFile('package.json','utf8',function(err,data){content.textContent=data;console.log(data);});});

四、Electron 模块介绍

Electron模块介绍、remote模块、通过BrowserWindow打开新窗口

4.1 Electron 主进程和渲染进程中的模块

4.2 Electron remote 模块

remote模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC)的简便途径

Electron中, 与GUI相关的模块(如dialog,menu等)只存在于主进程，而不在渲染进程中。为了能从渲染进程中使用它们，需要用ipc模块来给主进程发送进程间消息。使用remote模块，可以调用主进程对象的方法，而无需显式地发送进程间消息，这类似于Java的RMI

4.3 通过BrowserWindow 打开新窗口

Electron渲染进程中通过remote模块调用主进程中的BrowserWindow打开新窗口

https://electronjs.org/docs/api/browser-window

五、进程通信

渲染进程https://electronjs.org/docs/api/ipc-renderer

主进程https://electronjs.org/docs/api/ipc-main

6.1 主进程与渲染进程之间的通信

有时候我们想在渲染进程中通过一个事件去执行主进程里面的方法。或者在渲染进程中通知主进程处理事件，主进程处理完成后广播一个事件让渲染进程去处理一些事情。这个时候就用到了主进程和渲染进程之间的相互通信

Electron主进程，和渲染进程的通信主要用到两个模块:ipcMain和ipcRenderer

ipcMain:当在主进程中使用时，它处理从渲染器进程(网页)发送出来的异步和同步信息,当然也有可能从主进程向渲染进程发送消息。

ipcRenderer: 使用它提供的一些方法从渲染进程 (web页面) 发送同步或异步的消息到主进程。也可以接收主进程回复的消息

6.1.1 渲染进程给主进程发送异步消息

间接实现渲染进程执行主进程里面的方法

1. 引入ipcRender

<buttonid="send">在渲染进程中执行主进程里的方法（异步）</button><scriptsrc="render/ipcRender.js"></script>

2. 引入ipcMain

// 在主进程src/index.js中引入constcreateWindow=()=>{// 创建菜单 // 引入菜单模块require('./main/ipcMain.js')};

3. 渲染进程发送消息

// src/render/ipcRender.js//渲染进程letsend=document.querySelector('#send');const{ipcRenderer}=require('electron');send.onclick=function(){// 传递消息给主进程// 异步ipcRenderer.send('sendMsg',{name:'poetries',age:23})}

2. 主进程接收消息

// src/main/ipcMain.js//主进程const{ipcMain}=require('electron')// 主进程处理渲染进程广播数据ipcMain.on('sendMsg',(event,data)=>{console.log('data\n ',data)console.log('event\n ',event)})

image.png

6.1.2 渲染进程发送消息，主进程接收消息并反馈

渲染进程给主进程发送异步消息，主进程接收到异步消息以后通知渲染进程

1. 引入ipcRender

<buttonid="sendFeedback">在渲染进程中执行主进程里的方法，并反馈给主进程（异步）</button><scriptsrc="render/ipcRender.js"></script>

2. 引入ipcMain

// 在主进程src/index.js中引入constcreateWindow=()=>{// 创建菜单 // 引入菜单模块require('./main/ipcMain.js')};

3. 渲染进程发送消息

// src/render/ipcRender.js//渲染进程letsendFeedback=document.querySelector('#sendFeedback');const{ipcRenderer}=require('electron');// 向主进程发送消息sendFeedback.onclick=function(){// 触发主进程里面的方法ipcRenderer.send('sendFeedback',{name:'poetries',age:23})}

4. 主进程收到消息处理并广播反馈通知渲染进程

// src/main/ipcMain.js//主进程const{ipcMain}=require('electron')// 主进程处理渲染进程广播数据，并反馈给渲染进程ipcMain.on('sendFeedback',(event,data)=>{// console.log('data\n ', data)// console.log('event\n ', event)// 主进程给渲染进程广播数据event.sender.send('sendFeedbackToRender','来自主进程的反馈')})

6.1.3 渲染进程给主进程发送同步消息

1. 引入ipcRender

<buttonid="sendSync">渲染进程和主进程同步通信</button><scriptsrc="render/ipcRender.js"></script>

2. 引入ipcMain

// 在主进程src/index.js中引入constcreateWindow=()=>{// 创建菜单 // 引入菜单模块require('./main/ipcMain.js')};

3. 渲染进程给主进程同步通信

// src/render/ipcMain.jsletsendSync=document.querySelector('#sendSync');// 渲染进程和主进程同步通信sendSync.onclick=function(){// 同步广播数据letmsg=ipcRenderer.sendSync('sendsync',{name:'poetries',age:23})// 同步返回主进程反馈的数据console.log('msg\n ',msg)}

4. 主进程接收数据处理

// src/main/ipcMain.js// 渲染进程和主进程同步通信接收同步广播ipcMain.on('sendsync',(event,data)=>{// console.log('data\n ', data)// console.log('event\n ', event)// 主进程给渲染进程广播数据event.returnValue='渲染进程和主进程同步通信接收同步广播，来自主进程的反馈.';})

6.1.4 渲染进程广播通知主进程打开窗口

一般都是在渲染进程中执行广播操作，去通知主进程完成任务

1. 引入openWindow

<buttonid="sendSync">渲染进程和主进程同步通信</button><scriptsrc="render/openWindow.js"></script>

2. 引入ipcMain2

// 在主进程src/index.js中引入constcreateWindow=()=>{// 创建菜单 // 引入菜单模块require('./main/ipcMain2.js')};

3. 渲染进程通知主进程打开窗口

// src/render/openWindow.js/* eslint-disable */letopenWindow=document.querySelector('#openWindow');var{ipcRenderer}=require('electron');// 渲染进程和渲染进程直接的通信========openWindow.onclick=function(){// 通过广播的形式通知主进程执行操作ipcRenderer.send('openwindow',{name:'poetries',age:23})}

4. 主进程收到通知执行操作

// src/main/ipcMain2.js/* eslint-disable */let{ipcMain,BrowserWindow}=require('electron')constpath=require('path')letwin;// 接收到广播ipcMain.on('openwindow',(e,data)=>{// 调用window打开新窗口win=newBrowserWindow({width:400,height:300,});win.loadURL(path.join('file:',__dirname,'../news.html'));win.webContents.openDevTools()win.on('closed',()=>{win=null;});})

image.png

6.2 渲染进程与渲染进程之间的通信

也就是两个窗口直接的通信

dialog属于主进程中的模块

dialog模块提供了api来展示原生的系统对话框，例如打开文件框，alert框，所以web应用可以给用户带来跟系统应用相同的体验

九、实现一个类似EditPlus的简易记事本代码编辑器

代码https://github.com/poetries/electron-demo/tree/master/notepad

十、系统托盘、托盘右键菜单、托盘图标闪烁

image.png

文档https://electronjs.org/docs/api/tray

系统托盘，托盘右键菜单、托盘图标闪烁点击右上角关闭按钮隐藏到托盘(仿杀毒软件)

1. 引入文件

// src/index.jsconstcreateWindow=()=>{require('./main/tray.js')};

2. Electron 创建任务栏图标以及任务栏图标右键菜单

// src/main/tray.jsvar{Menu,Tray,app,BrowserWindow}=require('electron');constpath=require('path');varappIcon=newTray(path.join(__dirname,'../static/lover.png'));constmenu=Menu.buildFromTemplate([{label:'设置',click:function(){}//打开相应页面 },{label:'帮助',click:function(){}},{label:'关于',click:function(){}},{label:'退出',click:function(){// BrowserWindow.getFocusedWindow().webContents().send('close-main-window');app.quit();}}])// 鼠标放上去提示信息appIcon.setToolTip('hello poetries');appIcon.setContextMenu(menu);

mac系统托盘

3. 监听任务栏图标的单击、双击事件

// 实现点击关闭按钮，让应用保存在托盘里面，双击托盘打开letwin=BrowserWindow.getFocusedWindow()win.on('close',(e)=>{e.preventDefault()win.hide()})iconTray.on('double-click',(e)=>{win.show()})

4. Electron 点击右上角关闭按钮隐藏任务栏图标

constwin=BrowserWindow.getFocusedWindow();win.on('close',(e)=>{console.log(win.isFocused());if(!win.isFocused()){win=null;}else{e.preventDefault();/*阻止应用退出*/win.hide();/*隐藏当前窗口*/}})

5. Electron 实现任务栏闪烁图标

varappIcon=newTray(path.join(__dirname,'../static/lover.png'));timer=setInterval(function(){count++;if(count%2==0){appIcon.setImage(path.join(__dirname,'../static/empty.ico'))}else{appIcon.setImage(path.join(__dirname,'../static/lover.png'))}},500);

十一、消息通知、监听网络变化、网络变化弹出通知框

11.1 消息通知

1. Electron 实现消息通知

Electron里面的消息通知是基于h5的通知api实现的

文档https://developer.mozilla.org/zh-CN/docs/Web/API/notification

1. 新建notification.js

// h5api实现通知constpath=require('path')letoptions={title:'electron 通知API',body:'hello poetries',icon:path.join('../static/img/favicon2.ico')// 通知图标}document.querySelector('#showNotification').onclick=function(){letmyNotification=newwindow.Notification(options.title,options)// 消息可点击myNotification.onclick=function(){console.log('click notification')}}

2. 引入

<buttonid="showNotification">弹出消息通知</button><scriptsrc="render/notification.js"></script>

mac上的消息通知

11.2 监听网络变化

1. 基本使用

// 监听网络变化// 端开网络再次连接测试window.addEventListener('online',function(){console.log('online')});window.addEventListener('offline',function(){console.log('offline')});

2. 监听网络变化实现消息通知

// 端开网络再次连接测试// 监听网络变化实现消息通知window.addEventListener('online',function(){console.log('online')});window.addEventListener('offline',function(){// 断开网络触发事件varoptions={title:'QQ邮箱',body:'网络异常，请检查你的网络',icon:path.join('../static/img/favicon2.ico')// 通知图标}varmyNotification=newwindow.Notification(options.title,options)myNotification.onclick=function(){console.log('click notification')}});

image.png

十二、注册全局快捷键/剪切板事件/nativeImage 模块

Electron注册全局快捷键 (globalShortcut) 以及clipboard剪切板事件以及nativeImage模块(实现类似播放器点击机器码自动复制功能)

12.1 注册全局快捷键

image.png

keyboard-shortcuts文档

app模块参考文档

1. 新建src/main/shortCut.js

const{globalShortcut,app}=require('electron')app.on('ready',()=>{// 注册全局快捷键globalShortcut.register('command+e',()=>{console.log(1)})// 检测快捷键是否注册成功 true是注册成功letisRegister=globalShortcut.isRegistered('command+e')console.log(isRegister)})// 退出的时候取消全局快捷键app.on('will-quit',()=>{globalShortcut.unregister('command+e')})

2. 引入src/index.js

// 注意在外部引入即可不用放到app中require('./main/shortCut.js')

12.2 剪切板clipboard、nativeImage 模块

image.png

剪切板clipboard文档

nativeImage模块

1. html

<div><h2>双击下面信息复制</h2><pid='msg'>123456789</p><buttonid="plat">粘贴</button><br/><inputid="text"type="text"/></div>.<div><h2>复制图片到界面</h2><buttonid="copyImg">复制图片</button><br/></div><scriptsrc="render/clipboard.js"></script>

2. 新建src/render/clipboard.js

// clipboard可以在主进程或渲染进程使用const{clipboard,nativeImage}=require('electron')//复制// 运行ctrl+v可看到复制的内容// clipboard.writeText('poetries')// clipboard.readText() //获取复制的内容粘贴// 双击复制消息letmsg=document.querySelector('#msg')letplat=document.querySelector('#plat')lettext=document.querySelector('#text')msg.ondblclick=function(){clipboard.writeText(msg.innerHTML)alert(msg.innerHTML)}plat.onclick=function(){text.value=clipboard.readText()}// 复制图片显示到界面letcopyImg=document.querySelector('#copyImg')copyImg.onclick=function(){// 结合nativeImage模块letimage=nativeImage.createFromPath('../static/img/lover.png')// 复制图片clipboard.writeImage(image)// 粘贴图片letimgSrc=clipboard.readImage().toDataURL()// base64图片// 显示到页面上letimgDom=newImage()imgDom.src=imgSrc document.body.appendChild(imgDom)}

十三、结合electron-vue

13.1 electron-vue 的使用

1. electron-vue 的一些资源

https://github.com/SimulatedGREG/electron-vue

Electron-vue文档https://simulatedgreg.gitbooks.io/electron-vue/content/cn

2. electron-vue 环境搭建、创建项目

npm install -g vue-clivue init simulatedgreg/electron-vue my-projectcd my-projectyarn # or npm installyarn run dev # or npm run dev

3. electron-vue 目录结构分析

image.png

13.2 electron-vue 中使用 sass/ElementUi

1. electron-vue UI 框架 ElementUi 的使用

http://element-cn.eleme.io/#/zh-CN

2. electron-vue 中使用 sass

electron-vue 中使用 sass

# 安装 sass-loader:npm install --save-dev sass-loader node-sass

<stylelang="scss">body{/* SCSS */}</style>

13.3 electron-vue 中隐藏顶部菜单隐藏

electron-vue 中隐藏顶部菜单隐藏顶部最大化、最小化、关闭按钮自定最大化、最小化、关闭按钮

1. electron-vue 中隐藏顶部菜单

// src/main/index.jsmainWindow.setMenu(null)

2. electron-vue 中隐藏关闭最大化最小化按钮

// src/main/index.jsmainWindow=newBrowserWindow({height:620,useContentSize:true,width:1280,frame:false/*去掉顶部导航去掉关闭按钮最大化最小化按钮*/})

3 .electron-vue 自定义关闭/最大化最小化按钮

// 注意在mac下不需要监听窗口最大最小化、以为系统默认支持，这个只是针对windows平台ipc.on('window-min',function(){mainWindow.minimize();})//登录窗口最大化 ipc.on('window-max',function(){if(mainWindow.isMaximized()){mainWindow.restore();}else{mainWindow.maximize();}})ipc.on('window-close',function(){mainWindow.close();})

4. electron-vue 自定义导航可拖拽

可拖拽的css:-webkit-app-region: drag;

不可拖拽的css:-webkit-app-region: no-drag;

13.4 使用electron-vue开发舆情监控系统

13.4.1 配置开发环境

1. 项目搭建

npm install -g vue-clivue init simulatedgreg/electron-vue my-projectcd my-projectyarn # or npm installyarn run dev # or npm run dev

2. 安装一些依赖

# 安装 sass-loader:npm install --save-dev sass-loader node-sass# 安装elementUI、js-md5npm i element-ui js-md5 -S

在.electron-vue/webpack.renderer.config.js中配置sass-loader就可以编写``sass`了

<stylelang="scss">body{/* SCSS */}</style>

13.4.2 主进程配置

1.src/main/index.js

functioncreateWindow(){// 去掉顶部菜单mainWindow.setMenu(null)// 菜单项require('./model/menu.js');// 系统托盘相关require('./model/tray.js');

2.src/main/menu.js菜单配置

const{Menu,ipcMain,BrowserWindow}=require('electron');//右键菜单constcontextMenuTemplate=[{label:'复制',role:'copy'},{label:'黏贴',role:'paste'},{type:'separator'},//分隔线{label:'其他功能',click:()=>{console.log('click')}}];constcontextMenu=Menu.buildFromTemplate(contextMenuTemplate);ipcMain.on('contextmenu',function(){contextMenu.popup(BrowserWindow.getFocusedWindow());})

3.src/main/tray.js系统托盘配置

托盘点击监听事件只有在windows下才生效，mac系统默认支持

4.src/main/shortCut.js快捷键配置

在src/main/index.js中引入（require('src/main/shortCut.js')）即可，不需要放到app监控中

var{globalShortcut,app}=require('electron')app.on('ready',()=>{// 注册全局快捷键globalShortcut.register('command+e',()=>{console.log(1)})// 检测快捷键是否注册成功 true是注册成功letisRegister=globalShortcut.isRegistered('command+e')console.log(isRegister)})// 退出的时候取消全局快捷键app.on('will-quit',()=>{globalShortcut.unregister('command+e')})

13.4.3 渲染进程配置

1. src/render/main.js配置

importVuefrom'vue'importaxiosfrom'axios'importAppfrom'./App'importrouterfrom'./router'importstorefrom'./store'importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importVueHighchartsfrom'vue-highcharts';importVueSocketIOfrom'vue-socket.io'Vue.use(ElementUI);Vue.use(VueHighcharts);//引入socket.io配置连接Vue.use(newVueSocketIO({debug:true,connection:'http://118.123.14.36:3000',vuex:{store,actionPrefix:'SOCKET_',mutationPrefix:'SOCKET_'}}))if(!process.env.IS_WEB)Vue.use(require('vue-electron'))Vue.http=Vue.prototype.$http=axiosVue.config.productionTip=false/* eslint-disable no-new */newVue({components:{App},router,store,template:'<App/>'}).$mount('#app')

2. 路由配置src/renderer/router/index.js

importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/home',name:'home',component:require('@/components/Home').default},{path:'/report',name:'report',component:require('@/components/Report').default},{path:'/negativereport',name:'negativereport',component:require('@/components/NegativeReport').default},{path:'/positivereport',name:'positivereport',component:require('@/components/PositiveReport').default},{path:'/keyword',name:'keyword',component:require('@/components/KeyWord').default},{path:'/alarm',name:'alarm',component:require('@/components/Alarm').default},{path:'/msg',name:'msg',component:require('@/components/Msg').default},{path:'*',redirect:'/home'}]})

其他页面更多详情Github

3. 在渲染进程中使用主进程方式

// electron挂载到了vue实例上 $electronthis.$electron.shell

13.4.4 多平台打包

需要注意的是打包mac版本在mac系统上打包，打包window则在windows上打包，可以避免很多问题

# 在不同平台上执行即可打包应用npm run build

13.4.4.1 打包介绍

electron-vue打包文档

1. electron 中构建应用最常用的模块

electron-packager

electron-builder

electron-packager和electron-builder在自己单独创建的应用用也可以完成打包功能。但是由于配置太复杂所以我们不建议单独配置