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