锐客网

  1. 首页 > it技术 > >

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 运行的流程
Electron介绍与使用
文章图片
image.png
3.2 Electron 主进程和渲染进程
Electron运行package.json的main脚本的进程被称为主进程。
在主进程中运行的脚本通过创建web页面来展示用户界面。 一个Electron应用总是有且只有一个主进程。
由于Electron使用了Chromium(谷歌浏览器)来展示web页面，所以Chromium的 多进程架构也被使用到。 每个Electron中的web页面运行在它自己的渲染进程中。
主进程使用BrowserWindow实例创建页面。每个BrowserWindow实例都在自己的渲 染进程里运行页面。 当一个BrowserWindow实例被销毁后，相应的渲染进程也会被终止
Electron介绍与使用
文章图片
image.png
Electron介绍与使用
文章图片
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
五、进程通信
Electron介绍与使用
文章图片
渲染进程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
在 渲染进程中执行主进程里的方法（异步）
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
在 渲染进程中执行主进程里的方法，并反馈给主进程（异步）
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
渲染进程和主进程同步通信
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='https://www.it610.com/article/渲染进程和主进程同步通信 接收同步广播，来自主进程的反馈.'; })
6.1.4 渲染进程广播通知主进程打开窗口
一般都是在渲染进程中执行广播操作，去通知主进程完成任务
1. 引入openWindow
渲染进程和主进程同步通信
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; }); })
Electron介绍与使用
文章图片
image.png
6.2 渲染进程与渲染进程之间的通信
也就是两个窗口直接的通信
dialog属于主进程中的模块
dialog模块提供了api来展示原生的系统对话框，例如打开文件框，alert框， 所以web应用可以给用户带来跟系统应用相同的体验




九、实现一个类似EditPlus的简易记事本代码编辑器
代码https://github.com/poetries/electron-demo/tree/master/notepad
十、系统托盘、托盘右键菜单、托盘图标闪烁
Electron介绍与使用
文章图片
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);
Electron介绍与使用
文章图片
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. 引入
弹出消息通知
mac上的消息通知
Electron介绍与使用
文章图片
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')}});
Electron介绍与使用
文章图片
image.png
十二、注册全局快捷键/剪切板事件/nativeImage 模块
Electron注册全局快捷键 (globalShortcut) 以及clipboard剪 切板事件以及nativeImage模块(实现类似播放器点击机器码自动复制功 能)
12.1 注册全局快捷键
Electron介绍与使用
文章图片
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 模块
Electron介绍与使用
文章图片
image.png
剪切板clipboard文档
nativeImage模块
1. html
双击下面信息复制123456789
粘贴
.复制图片到界面复制图片

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=https://www.it610.com/article/clipboard.readText()}// 复制图片显示到界面letcopyImg=document.querySelector('#copyImg')copyImg.onclick=function(){// 结合nativeImage模块letimage=nativeImage.createFromPath('../static/img/lover.png')// 复制图片clipboard.writeImage(image)// 粘贴图片letimgSrc=https://www.it610.com/article/clipboard.readImage().toDataURL()// base64图片// 显示到页面上letimgDom=newImage()imgDom.src=imgSrcdocument.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 目录结构分析
Electron介绍与使用
文章图片
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
body{/* SCSS */}
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-uijs-md5 -S
在.electron-vue/webpack.renderer.config.js中配置sass-loader就可以编写``sass`了
body{/* SCSS */}
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:''}).$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
Electron介绍与使用
文章图片
image.png
2. 修改src/index.ejs标题信息
3. 修改build/icons图标
【Electron介绍与使用】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介绍与使用
文章图片
项目打包结果
项目截图
舆情监控系统页面
Electron介绍与使用
文章图片
登录页
Electron介绍与使用
文章图片
首页
Electron介绍与使用
文章图片
全部舆情
Electron介绍与使用
文章图片
舆情关键词
Electron介绍与使用
文章图片
增加关键词
Electron介绍与使用
文章图片
舆情报警设置
系统系统托盘、electron消息通知 （类似腾讯新闻）
Electron介绍与使用
文章图片
系统托盘
Electron介绍与使用
文章图片
消息通知
项目源码https://github.com/poetries/yuqing-monitor-electron
十四、更多参考
本文对应DEMO地址
一些比较常用的API，克隆后跑起来你就可以快速查看这些常用API
electron学习资料整理
electron中文文档
19人点赞
前端学习笔记
作者：poetries
链接：https://www.jianshu.com/p/2244653515a7
来源：
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

    推荐阅读


    上一篇：一四四之认知偏差

    下一篇：为什么MySQL设计主键时key不能过长（）