使用webpack + electron + reactJs開發windows桌面應用

khlbat 發布于2019-08-23 15:05 / 3312人閱讀

摘要：在開發項目時，可以先用網頁的形式開發項目，等到網頁項目部分差不多完成后，再注入中，開發網頁項目部分和窗體部分的交互在中使用后，將不會打包有關的代碼

electron是一兩年前挺火的一個框架
本質上是一個瀏覽器，但是集成了很多windows系統的功能，讓前端開發也可以直接操作windows的窗體，做成一個實打實的桌面軟件

團隊主要的技術棧是react，所以考慮用react開發，方便維護。

PS.由于項目是大半年前做的，所以一些細節可能記憶有誤請見諒

幾個重點：
1.想要能調試必須使用webpack打包，不能用react那些常用的打包腳手架，因為webpack打包有target: "electron-main"
2.對于不使用electron模塊的項目，electron可以直接跑任何網頁；對于用到electron模塊的項目，如果不設置target: "electron-main"，而直接用webpack打包（或者其他的打包工具），打包工具會直接默認把electron模塊一起打包進去。而electron模塊里會用到node的比如fs模塊，這些模塊都不允許在網頁上調用，因為需要直接訪問電腦文件

下面開始

我們知道electron其實是有兩個部分的，一個是窗體部分，一個是窗體里運行的網頁項目
窗體部分通常放在根目錄下，只使用main.js一個文件來控制
網頁項目部分一般放在src目錄下，打包出來的文件放到dist目錄下
目錄大致如下

main.js文件里會對窗體部分做很多配置
具體可以參見electron的官方文檔：electron官方文檔

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

網頁項目部分使用ipc模塊與electron的窗體部分的ipcMain模塊進行通信，網頁項目部分可以發送以某個指令給窗體部分

網頁項目部分發送指令

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

窗體部分接收到指令后做相應的行為

//main.js

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

窗體部分也可以使用webContent模塊與網頁項目部分通信
比如用戶點擊關閉窗體，可以使用event.preventDefault();阻塞關閉，然后通知網頁項目部分，做退出登錄的行為，退登完成之后再關閉窗體

// main.js 

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

網頁項目部分做對應的行為
比如退出登錄，退出登錄完成后，也使用ipc通知窗體部分，窗體接收到"logout-succ"后，執行關閉窗體的行為。

// src/MyComponent.js

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

·在開發項目時，可以先用網頁的形式開發項目，等到網頁項目部分差不多完成后，再注入electron中，開發網頁項目部分和窗體部分的交互
·在webpack中使用target: "electron-main"后，webpack將不會打包有關eletron的代碼

GPU云服務器云服務器 windows使用虛擬桌面 webrtc結合electron桌面分享 webrtc桌面應用開發 electron使用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101497.html

用 ReactJs 創建Mac版的 keep

摘要：我們專注移動體育領域的應用開發，倡導開放共享的精神，不模仿，不跟風，只做酷的產品。這就是正在做的事情，我們希望通過科技驅動，讓更多的人熱愛健身，喜歡運動。序因為自己不大喜歡喜歡用手機，所以當在手機上看到有些應用只能在手機上使用時覺得好別扭，但我本身也不是寫移動App的，只是會寫點 js，都說js啥都能干，那我就用它干！關于 Keep Keep 是一個熱愛運動的年輕團隊，同時也是一...

Tychio 2019-08-20 14:27 評論0 收藏0
使用Electron 構建是自己的桌面快捷應用

摘要：是一款幫助開發者實現跨平臺桌面開發的平臺。開發者只需要使用即可開發屬于自己的桌面應用。下面我來介紹下自己開發的一個小的應用，主要用來簡化進入終端的步驟。增加的時候彈框選擇一個想要打開的應用，可以添加自己的命令，比如甚至啟動之類的。 electron 是一款幫助開發者實現跨平臺桌面開發的平臺。開發者只需要使用javascript html css即可開發屬于自己的桌面應用。所以說假如你...

Gilbertat 2019-08-20 11:08 評論0 收藏0
使用Electron+avalon+jquery+codemirror開發自己的IDE

摘要：入口，可為數組指明那些文件名是要掃描到的沒什么稀奇的，就是配了的路徑和注意如果你要使用也是，盡量使用來解決的坑，的配置我就不講了配置好了就可以愉快的開始開發了其實還是傳統的寫網頁而已，只不過可以加入了，很酷炫是不是在糾結了一個月之后，發了無數帖子，我終于舍棄nw.js投入electron的懷抱，事實證明我是對的，electron居然有中文文檔，還有官方示例，簡直不要太爽！ showI...

jzzlee 2019-08-22 10:46 評論0 收藏0
使用React、Electron、Dva、Webpack、Node.js、Websocket快速構建

摘要：是一個使用和等技術創建原生程序的框架，它負責比較難搞的部分，你只需把精力放在你的應用的核心上即可。談談技術選型使用去做底層的繪制，大項目首選狀態管理的最佳實踐肯定不是，目前首選，或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已經快要跟React-nativ...

Caicloud 2019-08-30 11:01 評論0 收藏0