使用webpack + electron + reactJs开发windows桌面应用

khlbat 发布于2019-08-23 15:05 / 3129人阅读

摘要：在开发项目时，可以先用网页的形式开发项目，等到网页项目部分差不多完成后，再注入中，开发网页项目部分和窗体部分的交互在中使用后，将不会打包有关的代码

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的代码

服务器托管私有云 windows使用虚拟桌面 webrtc结合electron桌面分享 webrtc桌面应用开发 electron使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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