小试牛刀,用electron+vue3做了一个文件归纳程序~

记得很多年以前,学过C#的winform,其实一开始入行的时候从来没想过B/S架构的占有率会这么大,当时只是觉得能做一个窗体程序出来很装*。今天是我做Java程序员的第好几个年头,不知为何,就特别想写一个能供自己使用的窗体程序。考虑到我电脑的文件比较乱,文档、视频、图片基本都是乱放的,很难找到,于是决定写一个用来归纳这些文件的程序。

在技术的选择上,我原本是打算使用曾经学习过的winform,但是准备开始写的时候才发现,有关于C#的记忆早已被时间冲刷,甚至无法打印出那句"hello world!"。不过我是写过前端代码的,也从同事那里了解过一些跨平台框架,其中印象最深的是Electron,随后也简单看了一些教程,发现这东西真是极易上手。最后决定使用Electron+Vue3实现我自己的需求。

Electron介绍

Electron项目分为三部分:主进程、预渲染进程、渲染进程,主进程是Electron程序的入口,负责与操作系统做交互;预渲染进程可以理解为主进程与渲染进程链接的桥梁;渲染进程就是窗体程序中的具体页面显示。

如果在页面上想要实现上传文件或读取文件,由于渲染进程和操作系统是隔离开的,所以就需要通过预渲染进程链接到主进程,再由主进程完成具体的操作并返回处理结果给渲染视图(双向链接)。

1、 在主进程中,可以定义方法处理由预渲染进程发送过来的请求:

在上图中,单引号中的内容就是渲染进程向预渲染进程中请求的方法,主进程再通过hanle来处理这些方法。

2、 在预渲染进程中,可以定义方法让渲染进程调用:

在预渲染进程中,单引号中的内容与主进程handle中的内容对应,通过invoke调用主进程指定的方法。

3、 在渲染进程中,调用预渲染进程定义的方法:

window.api.init()就对应预渲染中定义的init方法,成功调用后,预渲染进程会将主进程返回的处理结果返回给渲染进程。

开发Electron基本就是这么一套流程,剩下的就是一些配置和渲染进程的代码开发,上手还是很快的。

程序界面

界面比较简单,整体的样式是AI生成的,只有一些比较基础的功能,比如文件分类管理、文件拖拽上传、上传进度条 等,使用Vue3实现。

不同的文件类型右击会有不同的功能菜单,如果是视频文件,也实现了本地视频的播放功能

总结:Electron提供了一种桌面软件开发的实现方案,本质上是内置了一个浏览器,通过预渲染进程与主进程通信实现调用操作系统API。对于有前端开发经验的同学来说,容易上手,降低学习成本。但是Electron打包的程序体积相对较大。

相关推荐
子兮曰6 小时前
Bun v1.3.14 深度解析:Image API、HTTP/3、全局虚拟存储与五十项变革
前端·后端·bun
kyriewen7 小时前
今天,百年巨头一次砍了9200人,而一个离职科学家的实话让全网睡不着觉
前端·openai·ai编程
问心无愧05137 小时前
ctf show web 入门42
android·前端·android studio
kyriewen8 小时前
老板逼我上AI,我偷偷在浏览器里跑LLaMA,省下20万API费
前端·react.js·llm
Beginner x_u8 小时前
前端八股整理(手写 02)|数组转树、数组扁平化、随机打乱一个数组
前端·数组·数组转树·数组扁平化
KaMeidebaby8 小时前
卡梅德生物技术快报|禽类成纤维细胞 FISH 实验:鸟类性别染色体基因定位技术实现与数据验证
前端·数据库·其他·百度·新浪微博
天若有情6738 小时前
前端高阶性能优化:跳出传统懒加载与预加载,基于用户行为做轻量预判加载
前端·性能优化
小小小小宇8 小时前
前端转后端:SQL 是什么
前端
张元清9 小时前
React Observer Hooks:7 种监听 DOM 而不写样板代码的方式
前端·javascript·面试
广州华水科技9 小时前
单北斗GNSS变形监测是什么?主要有怎样的应用与优势?
前端