使用webpack + electron + reactJs开发windows桌面应用
栏目: JavaScript · 发布时间: 5年前
内容简介:electron是一两年前挺火的一个框架本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件(当然听说mac上也可以用electron,不过没试过)
electron是一两年前挺火的一个框架
本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件
(当然听说mac上也可以用electron,不过没试过)
(没错我还在用windows,不是mac也不是linux,我是个lowB)
团队主要的技术栈是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的代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- [译] 使用 Blazor 构建桌面应用
- Flutter 和桌面应用的最新进展
- Vue+Electron桌面应用程序
- electron vue桌面应用入门实例
- 桌面和应用交付:真的重要不紧急吗?
- PHPSciter 1.0 版本发布,轻松写桌面应用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Design and Analysis of Distributed Algorithms (Wiley Series on P
Nicola Santoro / Wiley-Interscience / 2006-10-27 / USD 140.95
This text is based on a simple and fully reactive computational model that allows for intuitive comprehension and logical designs. The principles and techniques presented can be applied to any distrib......一起来看看 《Design and Analysis of Distributed Algorithms (Wiley Series on P》 这本书的介绍吧!