資訊專欄INFORMATION COLUMN
摘要：在開發(fā)項(xiàng)目時(shí)，可以先用網(wǎng)頁的形式開發(fā)項(xiàng)目，等到網(wǎng)頁項(xiàng)目部分差不多完成后，再注入中，開發(fā)網(wǎng)頁項(xiàng)目部分和窗體部分的交互在中使用后，將不會(huì)打包有關(guān)的代碼
electron是一兩年前挺火的一個(gè)框架
本質(zhì)上是一個(gè)瀏覽器，但是集成了很多windows系統(tǒng)的功能，讓前端開發(fā)也可以直接操作windows的窗體，做成一個(gè)實(shí)打?qū)嵉淖烂孳浖?/p>
團(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的代碼
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101497.html
摘要：我們專注移動(dòng)體育領(lǐng)域的應(yīng)用開發(fā)，倡導(dǎo)開放共享的精神，不模仿，不跟風(fēng)，只做酷的產(chǎn)品。這就是正在做的事情，我們希望通過科技驅(qū)動(dòng)，讓更多的人熱愛健身，喜歡運(yùn)動(dòng)。 序 因?yàn)樽约翰淮笙矚g喜歡用手機(jī)，所以當(dāng)在手機(jī)上看到有些應(yīng)用只能在手機(jī)上使用時(shí)覺得好別扭，但我本身也不是寫移動(dòng)App的，只是會(huì)寫點(diǎn) js，都說js啥都能干，那我就用它干！ 關(guān)于 Keep Keep 是一個(gè)熱愛運(yùn)動(dòng)的年輕團(tuán)隊(duì)，同時(shí)也是一...
摘要：是一款幫助開發(fā)者實(shí)現(xiàn)跨平臺(tái)桌面開發(fā)的平臺(tái)。開發(fā)者只需要使用即可開發(fā)屬于自己的桌面應(yīng)用。下面我來介紹下自己開發(fā)的一個(gè)小的應(yīng)用，主要用來簡(jiǎn)化進(jìn)入終端的步驟。增加的時(shí)候彈框選擇一個(gè)想要打開的應(yīng)用，可以添加自己的命令，比如甚至啟動(dòng)之類的。 electron 是一款幫助開發(fā)者實(shí)現(xiàn)跨平臺(tái)桌面開發(fā)的平臺(tái)。開發(fā)者只需要使用javascript html css即可開發(fā)屬于自己的桌面應(yīng)用。 所以說假如你...
摘要：入口，可為數(shù)組指明那些文件名是要掃描到的沒什么稀奇的，就是配了的路徑和注意如果你要使用也是，盡量使用來解決的坑，的配置我就不講了配置好了就可以愉快的開始開發(fā)了其實(shí)還是傳統(tǒng)的寫網(wǎng)頁而已，只不過可以加入了，很酷炫是不是 在糾結(jié)了一個(gè)月之后，發(fā)了無數(shù)帖子，我終于舍棄nw.js投入electron的懷抱，事實(shí)證明我是對(duì)的，electron居然有中文文檔，還有官方示例，簡(jiǎn)直不要太爽！ showI...
摘要：是一個(gè)使用和等技術(shù)創(chuàng)建原生程序的框架，它負(fù)責(zé)比較難搞的部分，你只需把精力放在你的應(yīng)用的核心上即可。談?wù)劶夹g(shù)選型使用去做底層的繪制，大項(xiàng)目首選狀態(tài)管理的最佳實(shí)踐肯定不是，目前首選，或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已經(jīng)快要跟React-nativ...
閱讀 986·2021-09-26 10:15
閱讀 2064·2021-09-24 10:37
閱讀 2580·2019-08-30 13:46
閱讀 2631·2019-08-30 11:16
閱讀 2421·2019-08-29 10:56
閱讀 2591·2019-08-26 12:24
閱讀 3472·2019-08-23 18:26
閱讀 2662·2019-08-23 15:43
