electron桌面端
文章平均质量分 88
vue3+electron+vite+electron-builder搭建前端开发桌面端程序的基座,后端以nodejs为主,前端以vue3+router+pinia+axios为框架主体
中二少年学编程
个人公众号:前端系列教程!!!个人小程序:中二少年工具箱!!!
记录学习,乐于分享。如果文章对您有帮助,请收藏加关注。
对博主感兴趣的同学,欢迎私信我加好友加群。
展开
-
electron-updater实现electron全量更新和增量更新——渲染进程交互部分
前面已经讲解过electron更新功能的主进程实现、渲染进程UI样式实现、调试更新功能技巧。这篇文章讲解渲染进程的交互逻辑。前端很多交互逻辑都和主进程、UI渲染有关,阅读本文前,建议先行查阅前面的文章。我们在讲解更新模块的主进程时,提出过更新的完整设计:第一步:页面渲染完毕,并询问主进程,是否有更新?第二步:主进程检查更新,并反馈给页面,有更新/无更新。第三步:如果无更新,页面直接显示提示信息。如果有更新,页面产生交互逻辑,将决定权交给用户,用户决定是否更新。原创 2024-08-01 20:11:47 · 1246 阅读 · 0 评论 -
electron-updater实现electron全量更新和增量更新——渲染进程UI部分
更新功能的实现分为三篇文章来讲解:1.主进程更新2.开发调试技巧3.渲染进程部分。我在开发过程中,是先开发的主进程主要功能,再完善渲染进程部分的显示。因为当没有前端时,可以写几个简单的标签显示结果,保证主要功能基本完成,再完善前端交互。效果图如下:打开软件时,页面向主进程通信,查询是否更新发现需要更新,弹出一个更新交互页面,页面显示更新信息和更新操作更新时,点击关闭按钮,会进入后台更新模式,登录进去后,点击左上角的更新标志,会弹出更新页面。原创 2024-08-01 20:11:30 · 1383 阅读 · 0 评论 -
electron-updater实现electron全量更新和增量更新——注意事项/技巧汇总
最近好久不更文,一是公司的事确实很忙,二是把时间都用在开发工具上了,写文总是提不起兴趣。好消息是工具总算是憋出来几个,坏消息功能怎么实现的,代码快忘差不多了。我经常看着我写过的代码一脸茫然:这真的是我写的???软件目前功能汇总:svga预览、node版本管理、前端部署-nginx管理、webstorm破解、浏览器插件等。围绕这些功能,可能会重新开一个文章系列——pc工具源码系列,详细讲解它们都是怎么实现的。原创 2024-08-01 20:11:04 · 1269 阅读 · 0 评论 -
electron-updater实现electron全量更新和增量更新——主进程部分
最近好久不更文,一是公司的事确实很忙,二是把时间都用在开发工具上了,写文总是提不起兴趣。好消息是工具总算是憋出来几个,坏消息功能怎么实现的,代码快忘差不多了。我经常看着我写过的代码一脸茫然:这真的是我写的???软件目前功能汇总:svga预览、node版本管理、前端部署-nginx管理、webstorm破解、浏览器插件等。围绕这些功能,可能会重新开一个文章系列——pc工具源码系列,详细讲解它们都是怎么实现的。原创 2024-08-01 20:10:43 · 1365 阅读 · 0 评论 -
electron打包时资源下载失败cannot resolve xxx/30.0.9/electron-v30.0.9-win32-ia32.zip
同学们可以私信我加入学习群!最近electron更新频繁,而我在用electron做个人项目,对稳定性没有太高要求,希望保持着electron的最新版本,所以就没有固定版本。单位网络不太好,打包时遇到无法下载资源包的问题:如图所示:第一反应,当然是希望修改镜像源,让打包工具可以自行下载资源包。但是如果镜像源设置后,都无法下载,就需要我们手动下载资源包了。截止到2024年5月31日,淘宝镜像源资源地址为:https://registry.npmmirror.com/binary.html打开后,是所有的原创 2024-05-31 11:37:31 · 625 阅读 · 0 评论 -
nodejs中使用ffmpeg零基础教程(electron+vue3)
最近想要把自己写的一些知识点,在写完demo后,除了形成博客记录笔记,还可以便捷地录屏形成视频教程。所以研究了好久如何在nodejs中完成录屏功能。本功能模块基于electron+vue3完成,原生nodejs也可以作为参考,原理是一致的。踩了很多坑,否了很多方案后,终于形成了目前的方案。ffmpeg插件:这是真正的录屏插件,windows系统中以exe可执行文件形式存在,其它所有插件都是围绕它开发。原创 2024-05-28 21:10:12 · 2449 阅读 · 2 评论 -
使用yarn/npm安装插件(涉及electron),总是报错证书错误或者ssl解析错误
最近electron更新到了30大版本,里面更新的一个重大变化是主进程增加了 WebContentsView 和 BaseWindow,对窗口的控制会更加丝滑。正好最近在做把文章或者视频一键发布到各自媒体平台的工具,所以决定把BrowserWindow的实现改为BaseWindow,当然如果查看源码会发现,其实两者是继承关系,BrowserWindow作为封装后的API,还是更简便的。原创 2024-05-14 20:18:54 · 1694 阅读 · 0 评论 -
前端ocr技术:electron+vue3中使用tesseract插件识别图片中字符
项目需要ocr技术识别图片中的中文字符,本来这部分是后端的工作,但是因为各种原因,决定前端也做一个版本。在ai时代之前,ocr技术有一个扛鼎插件——tesseract。现在如果搭建本地ai服务,如果不是通过调用接口的方式做一个api搬运工,就需要在本地部署站点,在一些场景中,仍稍显臃肿。所以本文开一点历史倒车,介绍下这个相比ai,更轻量化的插件。现在的问题是,官网的中文语言包下载链接失效,默认的语言包是英文,中文识别率感人。等我解决中文识别问题,再把electron打包后的软件和各种资源公布。原创 2024-04-09 21:01:40 · 1821 阅读 · 0 评论 -
【中二少年工具箱】——svga预览工具
前面有篇文章讲过基于echarts的大屏可视化一些基础概念,其中提到和动画相关的插件有:lottie、gsap、svga等,本篇文章的主题是svga,但不是技术硬文,只是向大家介绍我最近写的一款工具——svga预览工具。正版软件会一直免费,所以请大家放心使用博主开发的正版软件。如果软件被破解,绕过通行码直接登录,后续对宿主机造成一切后果,请使用者自行承担。大家多多支持博主的公众号,新开小号,需要多多关注,拜谢大家:或者。原创 2024-03-27 21:45:08 · 4269 阅读 · 0 评论 -
electron使用rollup打包后,运行报错Could not dynamically require……
以后在electron的主进程中引入插件可能还会遇到这个问题,到时候统一使用这种方式排除模块即可。node版本管理可视化工具马上就要完成了,有兴趣的小伙伴可以提前关注一波。原创 2024-01-20 11:13:46 · 1179 阅读 · 0 评论 -
electron自定义窗口和右键菜单样式
通过前面系列文章我们可以了解到,窗口是通过实例化BrowserWindow对象创建的,实例化时会传入一些窗口的参数。要实现窗口自定义,就必须把窗口默认样式都屏蔽。参数含义很好理解,窗体透明无边框,参数详解请查询官网。把系统自带的窗体样式去掉后,我们会得到一个只有主体的窗口,这个主体就是前端(vue)渲染的窗口,我们可以通过控制它,来实现任何样式的窗口。原创 2024-01-09 20:39:06 · 2472 阅读 · 0 评论 -
如何使用rollup打包编译electron主进程代码
如果跟着本系列文章一路学习,到现在应该已经可以使用electron+vue开发项目。但是这样开发的项目,打包后electron主进程部分是以源码的形式存在的,这样有利于前期的技术研究,梳理清楚打包后各文件的关系等等。但是,真正的项目中,这样的代码太容易被人拿去抄袭。所以需要借助rollup+terser,对源码进行压缩混淆等操作。不过这些开源工具压缩后的代码,也只是增加了逆向的复杂度,如果需要更安全的代码保护,请借助专业付费的安全软件。码云地址。原创 2023-12-11 14:27:13 · 1049 阅读 · 0 评论 -
我在electron中集成了自己的ai大模型
在自己的项目中集成ai大模型,更便利地利用人工智能提效原创 2023-11-24 15:59:41 · 1783 阅读 · 0 评论 -
electron软件安装时,默认选择为全部用户安装
因为我的软件在安装时,有很多操作注册表的需求,所以就需要获取最高的权限,网上这方面资料太少了,找了半天都没找到有参考价值的资料。今天解决了这个问题,记录一下。低阶api程序员,早晚被AI干掉。原创 2023-08-24 09:49:52 · 1184 阅读 · 0 评论 -
electron实现子窗口中创建右键菜单
有位同学问到一个问题,大致意思就是他创建了子窗口,但是子窗口的右键菜单没有生效,如图:他的代码大致看了下,虽然没找到})但是代码里有contextMenu.popup(),应该是在某个地方做了监听吧。因为没有完整代码,我没办法明确告诉同学具体哪里做错了,但我可以把正确写法发布出来,免得一直在评论区长篇对话。大家有什么问题也可以私信博主,没人问都懒得写文章了。原创 2023-06-27 17:30:37 · 1205 阅读 · 0 评论 -
2023新星导师活动【electron+vue3】方向,开营知识点提纲(2)
上篇文章主要讲解了electron、nodejs的相关概念。本篇文章将主要介绍vue3,以及vue3如何与electron协作完成桌面端功能。同上篇文章一样,这是一篇务虚的文章,读完本文,你可能学不到任何手写vue3代码的经验,你也不会记住vue3与electron通信的api,你更不需要去了解vue解析文章常聊的虚拟node、diff算法,proxy代理监听……等等让人听起来曲高和寡的东西。但是读完本文,你大概率会发出一句这样的感慨:哦,原来这就是vue啊,用起来这么方便!原创 2023-05-23 18:48:42 · 743 阅读 · 0 评论 -
2023新星导师活动【electron+vue3】方向,开营知识点提纲(1)
electron、nodejs的一些概念理解原创 2023-05-16 19:46:33 · 692 阅读 · 2 评论 -
vue3+electron开发桌面软件(8)—— electron操作注册表,实现windows二级级联菜单
上一篇文章我们已经介绍过如何通过手动操作注册表的方式,自定义我们的二级级联菜单。下面我们要做的就是,怎么在electron中操作注册表,复现上篇文章实现的功能。按照惯例,我应该把上面第二节的内容放到这里,但是没办法,如果放过来,显得文章太单薄。不过文章体量不大,其实知识点很有价值,直接参考文章的同学,是不会理解我把注册表一项一项地翻一遍,查找二级菜单失效原因时的苦恼的。网络上相关资源甚少,契合electron的就更少了。原创 2023-04-13 11:04:28 · 896 阅读 · 0 评论 -
vue3+electron开发桌面软件(9)——选中多个文件,右键上传
从本系列第六篇文章开始,我们一共用三篇文章讲解了系统级右键实现文件上传、手动修改注册表实现级联菜单、electron操作修改注册表实现级联菜单。网络上大部分文章也止步于此,但是在很多业务场景下,我们都需要右键选中多个文件,实现一键上传功能。如图:网上部分文章也提到了多选文件(图片)并上传,但是基本都未进行任何代码操作,而是使用鼠标拖动多个文件放到electron应用的图标,利用electron默认的能力实现多文件上传,针对我们具体的需求,这种方式只能算是一种无法解决问题时的妥协方案。原创 2023-05-10 15:05:41 · 1243 阅读 · 1 评论 -
vue3构建后台管理系统(4)——基于Vue Router实现首页快捷导航
上篇文章介绍了基于router插件,view ui的路由实现。本篇文章在上文的基础上,借助router.js中配置的参数,实现首页快捷导航。通过对router的改造,进一步理解路由的用法。如果理解了上篇文章中基于router实现导航栏,那么本文只能算是个小demo,旨在打开思路——只要设计合理,router.js中的对象属性是可以随心所欲操作的。其实不论是导航栏的渲染,还是首页快捷导航的渲染,都蕴藏了一个前端很重要的思路——渲染逻辑和业务逻辑解耦。渲染逻辑,就是我拿到数据后,如何把数据渲染成页面。原创 2023-04-28 11:47:04 · 1332 阅读 · 0 评论 -
nodemon报错Uncaught ReferenceError: process is not defined
nodemon报错Uncaught ReferenceError: process is not defined原创 2023-04-19 10:50:30 · 847 阅读 · 0 评论 -
vue3+electron开发桌面软件(7)——修改注册表,创建级联菜单
修改注册表,在windows系统创建二级级联菜单原创 2023-04-12 21:13:47 · 1063 阅读 · 0 评论 -
webstorm开发electron,调试主进程方案
webstorm开发electron,调试主进程方案原创 2023-02-16 10:25:02 · 1417 阅读 · 0 评论 -
vue3构建view admin后台管理系统(3)——基于Vue Router实现导航栏
上篇文章我们讲解了Vue Router路由管理工具基本的使用,但是如果同学们没有项目经验,即时看明白官方文档,也很难真正将所学应用到项目中,造成一看就懂,一用就废的尴尬局面。如何把Vue Router真正应用到项目中,才是我们的重中之重。其实写这篇文章之前,我是很犹豫的,因为很多东西,原理很简单,应用就略麻烦,写出来就更麻烦,最主要的是,我也不知道写完了,会不会有帮助。在这里抛砖引玉,有不当的地方,欢迎大佬指正。这部分代码略多,没办法都粘贴上来,如果有兴趣详细了解的同学,可私聊或评论我获取源码。原创 2023-01-04 18:19:51 · 2707 阅读 · 1 评论 -
第二章 vue3构建view admin后台管理系统——Vue Router使用详解
上篇文章我们已经完成了Vue3项目选型,路由管理工具使用官方推荐的Vue Router。第一次构建完整的路由管理,我建议采用iview推荐项目提供的模板,虽然模板项目很鸡贼地删减了一些优化设计,但是也足以搭建一个简易的路由管理。本文简单讲解了vue router工具的使用步骤,但只是这样,还远远不足以支撑企业级平台的搭建,一个真正能够应用于实战项目的路由设计,最起码要包含图标、路由嵌套等设计,如何搭建企业级的导航栏,留待下篇文章讲解。原创 2022-12-19 18:34:19 · 693 阅读 · 3 评论 -
vue3构建view admin后台管理系统——技术选型
深入了解vue3文件结构,彻底学会如何在vue中使用插件与工具,基于vue3+view ui,构建一套企业级管理平台原创 2022-12-12 17:31:47 · 1320 阅读 · 0 评论 -
vue3+electron开发桌面软件(6)——系统级右键实现文件上传
vue3+electron开发桌面软件,系统级右键实现文件上传功能。非软件内右键菜单原创 2022-11-21 17:20:07 · 1196 阅读 · 0 评论 -
vue3+electron开发桌面软件(5)—— electron托盘、软件内右键菜单
electron托盘、软件内右键菜单实现。原创 2022-11-21 11:20:58 · 1420 阅读 · 0 评论 -
vue3+electron开发桌面软件(4)—— 吃透electron进程通信
用最简单的描述,帮你理解electron的进程通信。具体源码,请私信作者获取。原创 2022-10-28 19:29:21 · 1931 阅读 · 12 评论 -
vue3+electron开发桌面软件入门与实战(3)—— electron模块化改造+窗口位置工具+合并命令行工具
vue3+electron的模块化改造,窗口位置记录工具,命令行合并工具,让你的应用更趋近于企业级原创 2022-10-21 17:37:03 · 1447 阅读 · 5 评论 -
vue3+electron开发桌面软件入门与实战(2)——创建electron+vue3框架打包集成
electron+vue3+vite+electron-builder项目级打包方案,vite配置讲解,vue打包编译讲解,package.json配置讲解原创 2022-10-13 23:08:05 · 5962 阅读 · 22 评论 -
vue3+electron开发桌面软件入门与实战(1)——创建electron+vue3主体项目
因为vue项目的默认入口文件是index.html,eletron项目的默认入口文件是main.js,所以这里我们就要解决两个框架搭配时,以哪个文件为入口。这个问题的答案可能很简单,但是其实体现的是vue和electron的关系。如果你仔细阅读electron官网并思考过,应该已经理解electron项目运行时,相当于是一个壳,壳里面集成了nodejs、v8引擎等必须的环境。原创 2022-10-09 21:23:20 · 8035 阅读 · 0 评论 -
vue3+electron开发桌面软件入门与实战(0)——创建electron应用
基于vue3+electron+vite,前端开发electron桌面端入门与实战,把一个最基础的electron项目运行起来,只需要简单的两步,十分钟必会。原创 2022-09-29 12:06:10 · 4027 阅读 · 0 评论