electron是一兩年前挺火的一個(gè)框架

本質(zhì)上是一個(gè)瀏覽器，但是集成了很多windows系統(tǒng)的功能，讓前端開發(fā)也可以直接操作windows的窗體，做成一個(gè)實(shí)打?qū)嵉淖烂孳浖?/p>

（當(dāng)然聽說(shuō)mac上也可以用electron，不過(guò)沒(méi)試過(guò)）

（沒(méi)錯(cuò)我還在用windows，不是mac也不是linux，我是個(gè)lowB）

團(tuán)隊(duì)主要的技術(shù)棧是react，所以考慮用react開發(fā)，方便維護(hù)。

PS.由于項(xiàng)目是大半年前做的，所以一些細(xì)節(jié)可能記憶有誤請(qǐng)見諒

幾個(gè)重點(diǎn)：

1.想要能調(diào)試必須使用webpack打包，不能用react那些常用的打包腳手架，因?yàn)閣ebpack打包有target: "electron-main"

2.對(duì)于不使用electron模塊的項(xiàng)目，electron可以直接跑任何網(wǎng)頁(yè)；對(duì)于用到electron模塊的項(xiàng)目，如果不設(shè)置target: "electron-main"，而直接用webpack打包（或者其他的打包工具），打包工具會(huì)直接默認(rèn)把electron模塊一起打包進(jìn)去。而electron模塊里會(huì)用到node的比如fs模塊，這些模塊都不允許在網(wǎng)頁(yè)上調(diào)用，因?yàn)樾枰苯釉L問(wèn)電腦文件

下面開始

我們知道electron其實(shí)是有兩個(gè)部分的，一個(gè)是窗體部分，一個(gè)是窗體里運(yùn)行的網(wǎng)頁(yè)項(xiàng)目

窗體部分通常放在根目錄下，只使用main.js一個(gè)文件來(lái)控制

網(wǎng)頁(yè)項(xiàng)目部分一般放在src目錄下，打包出來(lái)的文件放到dist目錄下

目錄大致如下

main.js文件里會(huì)對(duì)窗體部分做很多配置

具體可以參見electron的官方文檔：electron官方文檔

mainWnd = new BrowserWindow({
  // 窗體配置參數(shù)
});
mainWnd.loadURL(`file://${__dirname}/dist/index.html`); //這句話是用于配置窗體加載的網(wǎng)頁(yè)項(xiàng)目的，配置為打包后的目錄

網(wǎng)頁(yè)項(xiàng)目部分使用ipc模塊與electron的窗體部分的ipcMain模塊進(jìn)行通信，網(wǎng)頁(yè)項(xiàng)目部分可以發(fā)送以某個(gè)指令給窗體部分

網(wǎng)頁(yè)項(xiàng)目部分發(fā)送指令

// src/MyComponent.js
const ipc = require('electron').ipcRenderer;
ipc.send('logout');

窗體部分接收到指令后做相應(yīng)的行為

//main.js

ipcMain.on('logout', function (event, arg) {
  // do something
  console.log('logint');
});

窗體部分也可以使用webContent模塊與網(wǎng)頁(yè)項(xiàng)目部分通信

比如用戶點(diǎn)擊關(guān)閉窗體，可以使用event.preventDefault();阻塞關(guān)閉，然后通知網(wǎng)頁(yè)項(xiàng)目部分，做退出登錄的行為，退登完成之后再關(guān)閉窗體

// main.js 

mainWnd.webContents.send('mainWnd-close');

網(wǎng)頁(yè)項(xiàng)目部分做對(duì)應(yīng)的行為

比如退出登錄，退出登錄完成后，也使用ipc通知窗體部分，窗體接收到'logout-succ'后，執(zhí)行關(guān)閉窗體的行為。

// src/MyComponent.js

ipc.on('mainWnd-close', () => {
  // do something
  ipc.send('logout-succ');
})

·在開發(fā)項(xiàng)目時(shí)，可以先用網(wǎng)頁(yè)的形式開發(fā)項(xiàng)目，等到網(wǎng)頁(yè)項(xiàng)目部分差不多完成后，再注入electron中，開發(fā)網(wǎng)頁(yè)項(xiàng)目部分和窗體部分的交互

·在webpack中使用target: "electron-main"后，webpack將不會(huì)打包有關(guān)eletron的代碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論