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