Electron介紹與使用

一是钥、前言

NW.js和Electron都可以用前端的知識來開發(fā)桌面應(yīng)用。NW.js和Electron起初是同一個作者開發(fā)。后來種種原因分為兩個產(chǎn)品胁附。一個命名為NW.js(英特爾公司提供技術(shù)支持)酪耕、另一命名為Electron(Github 公司提供技術(shù)支持)导梆。

NW.js和Electron可以用Nodejs中幾乎所有的模塊。NW.js和Electron不僅可以把html寫的web頁面打包成跨平臺可以安裝到電腦上面的軟件迂烁，也可以通過javascript訪問操作系統(tǒng)原生的UI和Api(控制窗口看尼、添加菜單項(xiàng)目、托盤應(yīng)用菜單盟步、讀寫文件藏斩、訪問剪貼板)。

github的atom編輯器却盘、微軟的vscode編輯器狰域，包括阿里內(nèi)部的一些軟件也是用electron開發(fā)的

1. Electron 是由誰開發(fā)的?

Electron是由Github開發(fā)

2.? Electron 是什么?

Electron是一個用HTML，CSS和JavaScript來構(gòu)建跨平臺桌面應(yīng)用程序的一個開源庫

3. Electron 把 HTML谷炸，CSS 和 JavaScript 組合的程序構(gòu)建為跨平臺桌面應(yīng)用程序的原理是什么?

原理為Electron通過將Chromium和Node.js合并到同一個運(yùn)行時環(huán)境中北专，并將其打包為Mac，Windows和Linux系統(tǒng)下的應(yīng)用來實(shí)現(xiàn)這一目的旬陡。

4. Electron 何時出現(xiàn)的拓颓，為什么會出現(xiàn)?

Electron于2013年作為構(gòu)建Atom的框架而被開發(fā)出來。這兩個項(xiàng)目在2014春季開源描孟。 (Atom:為 Github 上可編程的文本編輯器)

一些歷史:

2013年4月Atom Shell項(xiàng)目啟動驶睦。

2014年5月Atom Shell被開源砰左。

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

2016年5月Electron發(fā)布了v1.0.0版本

5. Electron 當(dāng)前流行程度?

目前Electron已成為開源開發(fā)者、初創(chuàng)企業(yè)和老牌公司常用的開發(fā)工具场航。

6. Electron 當(dāng)前由那些人在維護(hù)支持?

Electron當(dāng)前由Github上的一支團(tuán)隊(duì)和一群活躍的貢獻(xiàn)者維護(hù)缠导。有些貢獻(xiàn)者是獨(dú)立開發(fā)者，有些則在用Electron構(gòu)建應(yīng)用的大型公司里工作溉痢。

7. Electron 新版本多久發(fā)布一次?

Electron的版本發(fā)布相當(dāng)頻繁僻造。每當(dāng)Chromium、Node.js有重要的bug修復(fù)孩饼，新API或是版本更新時Electron會發(fā)布新版本髓削。

一般Chromium發(fā)行新的穩(wěn)定版后的一到兩周之內(nèi)，Electron中Chromium的版本會對其進(jìn)行更新镀娶，具體時間根據(jù)升級所需的工作量而定立膛。

一般Node.js發(fā)行新的穩(wěn)定版一個月后，Electron中Node.js的版本會對其進(jìn)行更新梯码，具體時間根據(jù)升級所需的工作量而定宝泵。

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

Electron的核心理念是:保持Electron的體積小和可持續(xù)性開發(fā)。

如:為了保持Electron的小巧 (文件體積) 和可持續(xù)性開發(fā) (以防依賴庫和API的泛濫) 轩娶，Electron限制了所使用的核心項(xiàng)目的數(shù)量儿奶。

比如Electron只用了Chromium的渲染庫而不是其全部組件。這使得升級Chromium更加容易罢坝，但也意味著Electron缺少了Google Chrome里的一些瀏覽器相關(guān)的特性廓握。添加到Electron的新功能應(yīng)該主要是原生API。如果可以的話嘁酿，一個功能應(yīng)該盡可能的成為一個Node.js模塊隙券。

9. Electron 當(dāng)前的最新版本為多少?

Electron當(dāng)前的最新版本為4.0.1(當(dāng)前時間為2019年1月6號)

二、環(huán)境搭建

1. 安裝 electron

npm install -g electron

2. 克隆一個倉庫闹司、快速啟動一個項(xiàng)目

# 克隆示例項(xiàng)目的倉庫git clone https://github.com/electron/electron-quick-start# 進(jìn)入這個倉庫cd electron-quick-start# 安裝依賴并運(yùn)行npm install && npm start

3. 手動搭建一個 electron 項(xiàng)目

新建一個項(xiàng)目目錄例如:electrondemo01

在electrondemo01目錄下面新建三個文件:index.html娱仔、main.js、package.json

index.html里面用css進(jìn)行布局(以前怎么寫現(xiàn)在還是怎么寫)

在main.js中寫如下代碼

varelectron=require('electron');//electron 對象的引用constapp=electron.app;//BrowserWindow 類的引用constBrowserWindow=electron.BrowserWindow;letmainWindow=null;//監(jiān)聽?wèi)?yīng)用準(zhǔn)備完成的事件 app.on('ready',function(){//監(jiān)聽?wèi)?yīng)用準(zhǔn)備完成的事件app.on('ready',function(){//創(chuàng)建窗口mainWindow=newBrowserWindow({width:800,height:600});mainWindow.loadFile('index.html');mainWindow.on('closed',function(){mainWindow=null;})})})//監(jiān)聽所有窗口關(guān)閉的事件 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();}})

運(yùn)行

electron . #注意:命令后面有個點(diǎn)

4. electron-forge 搭建一個 electron 項(xiàng)目

electron-forge相當(dāng)于electron的一個腳手架游桩，可以讓我們更方便的創(chuàng)建牲迫、運(yùn)行、打包electron項(xiàng)目

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

三借卧、Electron 運(yùn)行流程

3.1 Electron 運(yùn)行的流程

image.png

3.2 Electron 主進(jìn)程和渲染進(jìn)程

Electron運(yùn)行package.json的main腳本的進(jìn)程被稱為主進(jìn)程盹憎。

在主進(jìn)程中運(yùn)行的腳本通過創(chuàng)建web頁面來展示用戶界面。一個Electron應(yīng)用總是有且只有一個主進(jìn)程铐刘。

由于Electron使用了Chromium(谷歌瀏覽器)來展示web頁面陪每，所以Chromium的多進(jìn)程架構(gòu)也被使用到。每個Electron中的web頁面運(yùn)行在它自己的渲染進(jìn)程中。

主進(jìn)程使用BrowserWindow實(shí)例創(chuàng)建頁面檩禾。每個BrowserWindow實(shí)例都在自己的渲染進(jìn)程里運(yùn)行頁面挂签。當(dāng)一個BrowserWindow實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會被終止

image.png

進(jìn)程:進(jìn)程是計(jì)算機(jī)中的程序關(guān)于某數(shù)據(jù)集合上的一次運(yùn)行活動盼产，是系統(tǒng)進(jìn)行資源分配和調(diào)度的基本單位饵婆，是操作系統(tǒng)結(jié)構(gòu)的基礎(chǔ)。

線程:在一個程序里的一個執(zhí)行路線就叫做線程(thread)戏售。更準(zhǔn)確的定義是: 線程是“一個進(jìn)程內(nèi)部的控制序列”侨核。

線程和進(jìn)程:一個程序至少有一個進(jìn)程,一個進(jìn)程至少有一個線程

3.3 Electron 渲染進(jìn)程中通過 Nodejs 讀取本地文件

在普通的瀏覽器中，web頁面通常在一個沙盒環(huán)境中運(yùn)行，不被允許去接觸原生的資源。然而Electron的用戶在Node.js的API支持下可以在頁面中和操作系統(tǒng)進(jìn)行一些底層交互撒会。

Nodejs在主進(jìn)程和渲染進(jìn)程中都可以使用奸腺。渲染進(jìn)程因?yàn)榘踩拗疲荒苤苯硬僮魃鶪UI诗祸。雖然如此跑芳，因?yàn)榧闪?Nodejs，渲染進(jìn)程也有了操作系統(tǒng)底層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 主進(jìn)程和渲染進(jìn)程中的模塊

4.2 Electron remote 模塊

remote模塊提供了一種在渲染進(jìn)程(網(wǎng)頁)和主進(jìn)程之間進(jìn)行進(jìn)程間通訊(IPC)的簡便途徑

Electron中, 與GUI相關(guān)的模塊(如dialog,menu等)只存在于主進(jìn)程，而不在渲染進(jìn)程中颤诀。為了能從渲染進(jìn)程中使用它們字旭，需要用ipc模塊來給主進(jìn)程發(fā)送進(jìn)程間消息。使用remote模塊崖叫，可以調(diào)用主進(jìn)程對象的方法遗淳，而無需顯式地發(fā)送進(jìn)程間消息，這類似于Java的RMI

4.3 通過BrowserWindow 打開新窗口

Electron渲染進(jìn)程中通過remote模塊調(diào)用主進(jìn)程中的BrowserWindow打開新窗口

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

五心傀、進(jìn)程通信

渲染進(jìn)程https://electronjs.org/docs/api/ipc-renderer

主進(jìn)程https://electronjs.org/docs/api/ipc-main

6.1 主進(jìn)程與渲染進(jìn)程之間的通信

有時候我們想在渲染進(jìn)程中通過一個事件去執(zhí)行主進(jìn)程里面的方法屈暗。或者在渲染進(jìn)程中通知主進(jìn)程處理事件，主進(jìn)程處理完成后廣播一個事件讓渲染進(jìn)程去處理一些事情恐锦。這個時候就用到了主進(jìn)程和渲染進(jìn)程之間的相互通信

Electron主進(jìn)程往果，和渲染進(jìn)程的通信主要用到兩個模塊:ipcMain和ipcRenderer

ipcMain:當(dāng)在主進(jìn)程中使用時，它處理從渲染器進(jìn)程(網(wǎng)頁)發(fā)送出來的異步和同步信息,當(dāng)然也有可能從主進(jìn)程向渲染進(jìn)程發(fā)送消息一铅。

ipcRenderer: 使用它提供的一些方法從渲染進(jìn)程 (web頁面) 發(fā)送同步或異步的消息到主進(jìn)程陕贮。也可以接收主進(jìn)程回復(fù)的消息

6.1.1 渲染進(jìn)程給主進(jìn)程發(fā)送異步消息

間接實(shí)現(xiàn)渲染進(jìn)程執(zhí)行主進(jìn)程里面的方法

1. 引入ipcRender

<buttonid="send">在渲染進(jìn)程中執(zhí)行主進(jìn)程里的方法（異步）</button><scriptsrc="render/ipcRender.js"></script>

2. 引入ipcMain

// 在主進(jìn)程src/index.js中引入constcreateWindow=()=>{// 創(chuàng)建菜單? // 引入菜單模塊require('./main/ipcMain.js')};

3. 渲染進(jìn)程發(fā)送消息

// src/render/ipcRender.js//渲染進(jìn)程letsend=document.querySelector('#send');const{ipcRenderer}=require('electron');send.onclick=function(){// 傳遞消息給主進(jìn)程// 異步ipcRenderer.send('sendMsg',{name:'poetries',age:23})}

2. 主進(jìn)程接收消息

// src/main/ipcMain.js//主進(jìn)程const{ipcMain}=require('electron')// 主進(jìn)程處理渲染進(jìn)程廣播數(shù)據(jù)ipcMain.on('sendMsg',(event,data)=>{console.log('data\n ',data)console.log('event\n ',event)})

image.png

6.1.2 渲染進(jìn)程發(fā)送消息，主進(jìn)程接收消息并反饋

渲染進(jìn)程給主進(jìn)程發(fā)送異步消息潘飘，主進(jìn)程接收到異步消息以后通知渲染進(jìn)程

1. 引入ipcRender

<buttonid="sendFeedback">在渲染進(jìn)程中執(zhí)行主進(jìn)程里的方法肮之，并反饋給主進(jìn)程（異步）</button><scriptsrc="render/ipcRender.js"></script>

2. 引入ipcMain

// 在主進(jìn)程src/index.js中引入constcreateWindow=()=>{// 創(chuàng)建菜單? // 引入菜單模塊require('./main/ipcMain.js')};

3. 渲染進(jìn)程發(fā)送消息

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

4. 主進(jìn)程收到消息處理并廣播反饋通知渲染進(jìn)程

// src/main/ipcMain.js//主進(jìn)程const{ipcMain}=require('electron')// 主進(jìn)程處理渲染進(jìn)程廣播數(shù)據(jù)，并反饋給渲染進(jìn)程ipcMain.on('sendFeedback',(event,data)=>{// console.log('data\n ', data)// console.log('event\n ', event)// 主進(jìn)程給渲染進(jìn)程廣播數(shù)據(jù)event.sender.send('sendFeedbackToRender','來自主進(jìn)程的反饋')})

6.1.3 渲染進(jìn)程給主進(jìn)程發(fā)送同步消息

1. 引入ipcRender

<buttonid="sendSync">渲染進(jìn)程和主進(jìn)程同步通信</button><scriptsrc="render/ipcRender.js"></script>

2. 引入ipcMain

// 在主進(jìn)程src/index.js中引入constcreateWindow=()=>{// 創(chuàng)建菜單? // 引入菜單模塊require('./main/ipcMain.js')};

3. 渲染進(jìn)程給主進(jìn)程同步通信

// src/render/ipcMain.jsletsendSync=document.querySelector('#sendSync');// 渲染進(jìn)程和主進(jìn)程同步通信sendSync.onclick=function(){// 同步廣播數(shù)據(jù)letmsg=ipcRenderer.sendSync('sendsync',{name:'poetries',age:23})// 同步返回主進(jìn)程反饋的數(shù)據(jù)console.log('msg\n ',msg)}

4. 主進(jìn)程接收數(shù)據(jù)處理

// src/main/ipcMain.js// 渲染進(jìn)程和主進(jìn)程同步通信接收同步廣播ipcMain.on('sendsync',(event,data)=>{// console.log('data\n ', data)// console.log('event\n ', event)// 主進(jìn)程給渲染進(jìn)程廣播數(shù)據(jù)event.returnValue='渲染進(jìn)程和主進(jìn)程同步通信接收同步廣播卜录，來自主進(jìn)程的反饋.';})

6.1.4 渲染進(jìn)程廣播通知主進(jìn)程打開窗口

一般都是在渲染進(jìn)程中執(zhí)行廣播操作戈擒，去通知主進(jìn)程完成任務(wù)

1. 引入openWindow

<buttonid="sendSync">渲染進(jìn)程和主進(jìn)程同步通信</button><scriptsrc="render/openWindow.js"></script>

2. 引入ipcMain2

// 在主進(jìn)程src/index.js中引入constcreateWindow=()=>{// 創(chuàng)建菜單? // 引入菜單模塊require('./main/ipcMain2.js')};

3. 渲染進(jìn)程通知主進(jìn)程打開窗口

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

4. 主進(jìn)程收到通知執(zhí)行操作

// src/main/ipcMain2.js/* eslint-disable */let{ipcMain,BrowserWindow}=require('electron')constpath=require('path')letwin;// 接收到廣播ipcMain.on('openwindow',(e,data)=>{// 調(diào)用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 渲染進(jìn)程與渲染進(jìn)程之間的通信

也就是兩個窗口直接的通信

dialog屬于主進(jìn)程中的模塊

dialog模塊提供了api來展示原生的系統(tǒng)對話框，例如打開文件框艰毒，alert框筐高，所以web應(yīng)用可以給用戶帶來跟系統(tǒng)應(yīng)用相同的體驗(yàn)

九、實(shí)現(xiàn)一個類似EditPlus的簡易記事本代碼編輯器

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

十丑瞧、系統(tǒng)托盤柑土、托盤右鍵菜單、托盤圖標(biāo)閃爍

image.png

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

系統(tǒng)托盤绊汹，托盤右鍵菜單稽屏、托盤圖標(biāo)閃爍點(diǎn)擊右上角關(guān)閉按鈕隱藏到托盤(仿殺毒軟件)

1. 引入文件

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

2. Electron 創(chuàng)建任務(wù)欄圖標(biāo)以及任務(wù)欄圖標(biāo)右鍵菜單

// 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:'設(shè)置',click:function(){}//打開相應(yīng)頁面 },{label:'幫助',click:function(){}},{label:'關(guān)于',click:function(){}},{label:'退出',click:function(){// BrowserWindow.getFocusedWindow().webContents().send('close-main-window');app.quit();}}])// 鼠標(biāo)放上去提示信息appIcon.setToolTip('hello poetries');appIcon.setContextMenu(menu);

mac系統(tǒng)托盤

3. 監(jiān)聽任務(wù)欄圖標(biāo)的單擊、雙擊事件

// 實(shí)現(xiàn)點(diǎn)擊關(guān)閉按鈕西乖，讓應(yīng)用保存在托盤里面狐榔，雙擊托盤打開letwin=BrowserWindow.getFocusedWindow()win.on('close',(e)=>{e.preventDefault()win.hide()})iconTray.on('double-click',(e)=>{win.show()})

4. Electron 點(diǎn)擊右上角關(guān)閉按鈕隱藏任務(wù)欄圖標(biāo)

constwin=BrowserWindow.getFocusedWindow();win.on('close',(e)=>{console.log(win.isFocused());if(!win.isFocused()){win=null;}else{e.preventDefault();/*阻止應(yīng)用退出*/win.hide();/*隱藏當(dāng)前窗口*/}})

5. Electron 實(shí)現(xiàn)任務(wù)欄閃爍圖標(biāo)

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

十一、消息通知获雕、監(jiān)聽網(wǎng)絡(luò)變化薄腻、網(wǎng)絡(luò)變化彈出通知框

11.1 消息通知

1. Electron 實(shí)現(xiàn)消息通知

Electron里面的消息通知是基于h5的通知api實(shí)現(xiàn)的

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

1. 新建notification.js

// h5api實(shí)現(xiàn)通知constpath=require('path')letoptions={title:'electron 通知API',body:'hello poetries',icon:path.join('../static/img/favicon2.ico')// 通知圖標(biāo)}document.querySelector('#showNotification').onclick=function(){letmyNotification=newwindow.Notification(options.title,options)// 消息可點(diǎn)擊myNotification.onclick=function(){console.log('click notification')}}

2. 引入

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

mac上的消息通知

11.2 監(jiān)聽網(wǎng)絡(luò)變化

1. 基本使用

// 監(jiān)聽網(wǎng)絡(luò)變化// 端開網(wǎng)絡(luò) 再次連接測試window.addEventListener('online',function(){console.log('online')});window.addEventListener('offline',function(){console.log('offline')});

2. 監(jiān)聽網(wǎng)絡(luò)變化實(shí)現(xiàn)消息通知

// 端開網(wǎng)絡(luò) 再次連接測試// 監(jiān)聽網(wǎng)絡(luò)變化實(shí)現(xiàn)消息通知window.addEventListener('online',function(){console.log('online')});window.addEventListener('offline',function(){// 斷開網(wǎng)絡(luò)觸發(fā)事件varoptions={title:'QQ郵箱',body:'網(wǎng)絡(luò)異常，請檢查你的網(wǎng)絡(luò)',icon:path.join('../static/img/favicon2.ico')// 通知圖標(biāo)}varmyNotification=newwindow.Notification(options.title,options)myNotification.onclick=function(){console.log('click notification')}});

image.png

十二典鸡、注冊全局快捷鍵/剪切板事件/nativeImage 模塊

Electron注冊全局快捷鍵 (globalShortcut) 以及clipboard剪切板事件以及nativeImage模塊(實(shí)現(xiàn)類似播放器點(diǎn)擊機(jī)器碼自動復(fù)制功能)

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>雙擊下面信息復(fù)制</h2><pid='msg'>123456789</p><buttonid="plat">粘貼</button><br/><inputid="text"type="text"/></div>.<div><h2>復(fù)制圖片到界面</h2><buttonid="copyImg">復(fù)制圖片</button><br/></div><scriptsrc="render/clipboard.js"></script>

2. 新建src/render/clipboard.js

// clipboard可以在主進(jìn)程或渲染進(jìn)程使用const{clipboard,nativeImage}=require('electron')//復(fù)制// 運(yùn)行ctrl+v可看到復(fù)制的內(nèi)容// clipboard.writeText('poetries')// clipboard.readText() //獲取復(fù)制的內(nèi)容粘貼// 雙擊復(fù)制消息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()}// 復(fù)制圖片顯示到界面letcopyImg=document.querySelector('#copyImg')copyImg.onclick=function(){// 結(jié)合nativeImage模塊letimage=nativeImage.createFromPath('../static/img/lover.png')// 復(fù)制圖片clipboard.writeImage(image)// 粘貼圖片letimgSrc=clipboard.readImage().toDataURL()// base64圖片// 顯示到頁面上letimgDom=newImage()imgDom.src=imgSrc? ? document.body.appendChild(imgDom)}

十三、結(jié)合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 環(huán)境搭建萝玷、創(chuàng)建項(xiàng)目

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 目錄結(jié)構(gòu)分析

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 中隱藏頂部菜單隱藏頂部最大化嫁乘、最小化、關(guān)閉按鈕自定最大化球碉、最小化蜓斧、關(guān)閉按鈕

1. electron-vue 中隱藏頂部菜單

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

2. electron-vue 中隱藏關(guān)閉最大化最小化按鈕

// src/main/index.jsmainWindow=newBrowserWindow({height:620,useContentSize:true,width:1280,frame:false/*去掉頂部導(dǎo)航去掉關(guān)閉按鈕最大化最小化按鈕*/})

3 .electron-vue 自定義關(guān)閉/最大化最小化按鈕

// 注意在mac下不需要監(jiān)聽窗口最大最小化、以為系統(tǒng)默認(rèn)支持睁冬，這個只是針對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 自定義導(dǎo)航可拖拽

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

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

13.4 使用electron-vue開發(fā)輿情監(jiān)控系統(tǒng)

13.4.1 配置開發(fā)環(huán)境

1. 項(xiàng)目搭建

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 主進(jìn)程配置

1.src/main/index.js

functioncreateWindow(){// 去掉頂部菜單mainWindow.setMenu(null)// 菜單項(xiàng)require('./model/menu.js');// 系統(tǒng)托盤相關(guān)require('./model/tray.js');

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

const{Menu,ipcMain,BrowserWindow}=require('electron');//右鍵菜單constcontextMenuTemplate=[{label:'復(fù)制',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系統(tǒng)托盤配置

托盤點(diǎn)擊監(jiān)聽事件只有在windows下才生效看疙，mac系統(tǒng)默認(rèn)支持

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

在src/main/index.js中引入（require('src/main/shortCut.js')）即可直奋，不需要放到app監(jiān)控中

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 渲染進(jìn)程配置

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. 在渲染進(jìn)程中使用主進(jìn)程方式

// electron掛載到了vue實(shí)例上 $electronthis.$electron.shell

13.4.4 多平臺打包

需要注意的是打包mac版本在mac系統(tǒng)上打包能庆，打包window則在windows上打包，可以避免很多問題

# 在不同平臺上執(zhí)行即可打包應(yīng)用npm run build

13.4.4.1 打包介紹

electron-vue打包文檔

1. electron 中構(gòu)建應(yīng)用最常用的模塊

electron-packager

electron-builder

electron-packager和electron-builder在自己單獨(dú)創(chuàng)建的應(yīng)用用也可以完成打包功能脚线。但是由于配置太復(fù)雜所以我們不建議單獨(dú)配置