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

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

<!--src/index.html--><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

<!--src/index.html--><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

<!--src/index.html--><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

<!--src/index.html--><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. 引入

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

mac上的消息通知

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

<!--src/index.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

<!--vue 文件中修改 style 为如下代码:--><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`了

<!--vue 文件中修改 style 为如下代码:--><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系统默认支持

(function(){constpath=require('path');const{app,Menu,BrowserWindow,Tray,shell}=require('electron');//创建系统托盘consttray=newTray(path.resolve(__static,'favicon.png'))//给托盘增加右键菜单consttemplate=[{label:'设置',click:function(){shell.openExternal('http://blog.poetries.top')}},{label:'帮助',click:function(){shell.openExternal('http://blog.poetries.top/2019/01/06/electron-summary')}},{label:'关于',click:function(){shell.openExternal('https://github.com/poetries/yuqing-monitor-electron')}},{label:'退出',click:function(){// BrowserWindow.getFocusedWindow().webContents().send('close-main-window');app.quit();}}];constmenu=Menu.buildFromTemplate(template);tray.setContextMenu(menu);tray.setToolTip('舆情监控系统');//监听关闭事件隐藏到系统托盘// 这里需要注意:在window中才生效,mac下系统默认支持// var win = BrowserWindow.getFocusedWindow();// win.on('close',(e)=>{//        if(!win.isFocused()){//            win=null;//        }else{//            e.preventDefault();  /*阻止应用退出*///            win.hide(); /*隐藏当前窗口*///        }      // })// //监听托盘的双击事件// tray.on('double-click',()=>{              //    win.show();// })})()

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在自己单独创建的应用用也可以完成打包功 能。但是由于配置太复杂所以我们不建议单独配置

2. electron-forge

https://github.com/electron-userland/electron-forge

electron-forgepackageelectron-forgemake

3. electron-vue中的打包方式

# https://simulatedgreg.gitbooks.io/electron-vue/content/cn/using-electron-packager. html# 之需要执行一条命令npm run build

13.4.4.2 修改应用信息

1. 修改package.json

image.png

2. 修改src/index.ejs标题信息

3. 修改build/icons图标

13.4.4.3 打包遇到的问题

1. 创建应用托盘的时候可能会遇到错误

把托盘图片放在根目录static里面,然后注意下面写法。

vartray=newTray(path.join(__static,'favicon.ico'))

如果托盘路径没有问题,还是包托盘相关错误的话,把托盘对应的图片换成.png格式重试

2. 模块问题可能会遇到的错误

image.png

image.png

解决办法

删掉node_modules然后重新用npm install安装依赖

用yarn来安装模块

用手机创建一个热点电脑连上热点重试

最后执行yarn run build即可

项目打包结果

项目截图

舆情监控系统页面

登录页

首页

全部舆情

舆情关键词

增加关键词

舆情报警设置

系统系统托盘、electron消息通知 (类似腾讯新闻)

系统托盘

消息通知

项目源码https://github.com/poetries/yuqing-monitor-electron

十四、更多参考

本文对应DEMO地址

一些比较常用的API,克隆后跑起来你就可以快速查看这些常用API

electron学习资料整理

electron中文文档

19人点赞

前端学习笔记

作者:poetries

链接:https://www.jianshu.com/p/2244653515a7

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 142,680评论 1 300
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,177评论 1 256
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 94,249评论 0 212
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,981评论 0 175
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,746评论 1 255
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,763评论 1 176
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,362评论 2 268
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,151评论 0 165
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,964评论 6 229
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,501评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,285评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,614评论 1 229
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,232评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,117评论 2 213
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,498评论 3 204
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,615评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,012评论 0 167
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,512评论 2 230
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,594评论 2 231