Electron构建下载文件桌面应用

本文详细记录了使用Electron框架构建一个桌面应用,实现文件下载功能的过程,包括初识 Electron、创建渲染器进程、界面设计、选择保存文件夹及实现下载文件的关键步骤。在实际操作中,作者遇到了ipc通信、文件保存路径等问题,并分享了解决方法和心得。
摘要由CSDN通过智能技术生成

做这个真的要疯掉,但是开始了就要做出来。
下面就说一下整个过程吧,因为真的查阅了不少资料,发现似乎没几个桌面应用会选择做下载文件的,所以需要一直查资料查资料,查到要疯掉。
进入正题


初识electron

electron文档:https://github.com/electron/electron
文档里面有中文的,所以还是蛮容易理解的。
文档主要就是介绍electron项目的结构如下:
这里写图片描述
其中package.json是用来描述一些配置信息以及一些快速启动的指令等信息的
main.js则是用来整个项目的主线程,用于创建窗口和处理系统事件。
index.html就是布局啦。

运行

package.json文件里有这样一句描述:
这里写图片描述
这就是快速启动指令,只需要npm start就可以启动你的electron应用了。


创建渲染器进程

对于渲染器进程,大家给的理解是主线程是无法显示的,需要通过BrowserWindow来创建新的窗口,每一个窗口维护一个渲染器进程。
我的文件目录如下:
这里写图片描述
app目录下的js/index.js就可以看作一个渲染器进程。

主进程和渲染器进程的区别

这里写图片描述


界面

界面可以通过html+css实现
我的界面如下:
这里写图片描述


评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值