詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用
electron是一兩年前挺火的一個(gè)框架
本質(zhì)上是一個(gè)瀏覽器，但是集成了很多windows系統(tǒng)的功能，讓前端開發(fā)也可以直接操作windows的窗體，做成一個(gè)實(shí)打?qū)嵉淖烂孳浖?/p>
（當(dāng)然聽說mac上也可以用electron，不過沒試過）
（沒錯(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)頁；對(duì)于用到electron模塊的項(xiàng)目，如果不設(shè)置target: "electron-main"，而直接用webpack打包（或者其他的打包工具），打包工具會(huì)直接默認(rèn)把electron模塊一起打包進(jìn)去。而electron模塊里會(huì)用到node的比如fs模塊，這些模塊都不允許在網(wǎng)頁上調(diào)用，因?yàn)樾枰苯釉L問電腦文件
下面開始
我們知道electron其實(shí)是有兩個(gè)部分的，一個(gè)是窗體部分，一個(gè)是窗體里運(yùn)行的網(wǎng)頁項(xiàng)目
窗體部分通常放在根目錄下，只使用main.js一個(gè)文件來控制
網(wǎng)頁項(xiàng)目部分一般放在src目錄下，打包出來的文件放到dist目錄下
目錄大致如下
main.js文件里會(huì)對(duì)窗體部分做很多配置
具體可以參見electron的官方文檔：electron官方文檔
mainWnd = new BrowserWindow({
// 窗體配置參數(shù)
});
mainWnd.loadURL(`file://${__dirname}/dist/index.html`); //這句話是用于配置窗體加載的網(wǎng)頁項(xiàng)目的，配置為打包后的目錄
網(wǎng)頁項(xiàng)目部分使用ipc模塊與electron的窗體部分的ipcMain模塊進(jìn)行通信，網(wǎng)頁項(xiàng)目部分可以發(fā)送以某個(gè)指令給窗體部分
網(wǎng)頁項(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)頁項(xiàng)目部分通信
比如用戶點(diǎn)擊關(guān)閉窗體，可以使用event.preventDefault();阻塞關(guān)閉，然后通知網(wǎng)頁項(xiàng)目部分，做退出登錄的行為，退登完成之后再關(guān)閉窗體
// main.js
mainWnd.webContents.send('mainWnd-close');
網(wǎng)頁項(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)頁的形式開發(fā)項(xiàng)目，等到網(wǎng)頁項(xiàng)目部分差不多完成后，再注入electron中，開發(fā)網(wǎng)頁項(xiàng)目部分和窗體部分的交互
·在webpack中使用target: "electron-main"后，webpack將不會(huì)打包有關(guān)eletron的代碼
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案
這篇文章主要介紹了基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
Yarn安裝項(xiàng)目依賴報(bào)error?An?unexpected?error?occurred:?“XXXXX：E
這篇文章主要為大家介紹了Yarn安裝項(xiàng)目依賴報(bào)error?An?unexpected?error?occurred:?“XXXXX：ESOCKETTIMEOUT”問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React?中如何將CSS?visibility?屬性設(shè)置為?hidden
這篇文章主要介紹了React中如何將CSS?visibility屬性設(shè)置為?hidden,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
在react類組件（class）寫法中，有setState和生命周期對(duì)狀態(tài)進(jìn)行管理，但是在函數(shù)組件中不存在這些，故引入hooks（版本：>=16.8），使開發(fā)者在非class的情況下使用更多react特性2023-03-03
在vue項(xiàng)目中使用vue-router做頁面跳轉(zhuǎn)時(shí)，路由的方式有兩種，一種是靜態(tài)路由，另一種是動(dòng)態(tài)路由。而要實(shí)現(xiàn)對(duì)路由的控制需要使用vuex和router全局守衛(wèi)進(jìn)行判斷攔截2023-03-03
前端應(yīng)用大多數(shù)是SPA（單頁應(yīng)用程序），也就是只有一個(gè)HTML頁面的應(yīng)用程序。因?yàn)樗挠脩趔w驗(yàn)更好、對(duì)服務(wù)器壓力更小，所以更受歡迎。為了有效的使用單個(gè)頁面來管理多頁面的功能，前端路由應(yīng)運(yùn)而生2022-09-09
前端進(jìn)行大文件分片上傳的方案幾乎都是利用Blob.prototype.slice方法對(duì)文件進(jìn)行分片，用數(shù)組將每一個(gè)分片存起來，最后將分片發(fā)給后端，本文給大家介紹React大文件分片上傳方案，感興趣的朋友跟隨小編一起看看吧2023-08-08
在react類組件（class）寫法中，有setState和生命周期對(duì)狀態(tài)進(jìn)行管理，但是在函數(shù)組件中不存在這些，故引入hooks（版本：>=16.8），使開發(fā)者在非class的情況下使用更多react特性2022-08-08
useCallback是react中比較重要的一個(gè)hook，useCallback 用來返回一個(gè)函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2022-11-11
D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本)
散點(diǎn)圖(Scatter Chart),通常是一橫一豎兩個(gè)坐標(biāo)軸，數(shù)據(jù)是一組二維坐標(biāo)，分別對(duì)應(yīng)兩個(gè)坐標(biāo)軸，與坐標(biāo)軸對(duì)應(yīng)的地方打上點(diǎn)。由此可以猜到，需要的元素包括circle(圓)和axis(坐標(biāo)軸),接下來通過本文大家分享D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本) ，一起看看2019-05-05