- 综合排序
- 最热优先
- 最新优先
- 来自专栏小鑫同学编程历险记
客户端开发（Electron）系统级API使用2
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 图中的代码通过监听onkeydown事件，来判断按键是否同时满足ctrl+s（ascll码），mateKey值Mac系统的花键。 这种监听快捷键的特点是只能在窗口处于激活的时候才能触发，但你会发现我们使用系统的一些快捷键是可以唤醒应用的，那这种非激活状态应用的快捷键监听就只能通过Electron提供的系统级API来实现了。 globalShortcut.unregister('快捷键') 判断是否被注册：globalShortcut.isRegistered('快捷键') 案例1：监听ctrl+k： 案例2： 总结： 本篇学习了在客户端应用中监听按键实现快捷键的两种方式，但也要注意避免快捷键的冲突和滥用，也学习了常见的托盘图标的设置和菜单的设置，知道了我们如何在有新消息送达时和QQ一样来闪烁起来，学习阶段化繁为简
3.3K50编辑于 2022-12-26 - 来自专栏h5
electron38-vite7-vue3os电脑端os管理系统
2025最新跨平台electron38+vue3+vite7+pinia3+arco-design客户端os系统Exe模板。 electron38-vite7-os使用vite7构建工具整合electron38跨平台框架构建项目，vue3 setup语法编码开发。 { uid: 'd137f210-507e-7e8e-1950-9deefac27e48', list: [ {imgico: markRaw(Today), size: '2x2 -vite7-admin电脑端中后台管理系统Electron38+Vite7+Pinia3+ElementPlus客户端聊天程序最新原创uniapp-vue3-osadmin手机版后台管理系统最新研发uniapp +getx仿抖音app短视频商城Electron32桌面端os系统electron31+vue3客户端聊天Exe实例tauri2.0+rust+vue3电脑版Exe聊天软件
58730编辑于 2025-10-12 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）认识窗口2
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 process.env.ELECTRON_NODE_INTEGRATION nodeIntegration: true, contextIsolation: false, , message: '系统可能不会保存您所做的更改。' remote.getCurrentWindow(), modal: true, webPreferences: { nodeIntegration: true } }) 总结： 关于Electron
1.5K20编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）系统级API使用
系统对话框： 1. 调用系统API实现文件保存或读取前的选择功能： 如上图所示的功能，我们在使用电脑时就经常会遇到，在Electron中我们可以通过调用dialog.showOpenDialogSync函数同步打开下面的对话框 browserWindow, ]options showErrorBox title, content showCertificateTrustDialog [browserWindow, ]options 2. 特殊对话框（关于面板）： 如上图就是我们设置过后的特殊对话框关于面板，通常显示当前客户端应用的信息。 }, { label: '编辑' }, { label: '选择' }, { label: '查看' } ]) ) 替换前后的效果对比： 2.
4.1K50编辑于 2022-12-26 - 来自专栏h5
Electron-React19-WinChat聊天系统|react+electron客户端聊天程序Exe
('win-min') } // 最大化/还原 const handleWinMax2Min = () => { window.electron.invoke('win-toggle').then electron38-vite7-vue3os电脑端os管理系统 最新版electron38-vite7-admin电脑端中后台管理系统 Electron38+Vite7+Pinia3+ElementPlus 客户端聊天程序 基于React19+Arco+Zustand5接入DeepSeek-V4网页版仿豆包/Kimi流式AI系统Vite8.0+Vue3.5+Arco深度对接DeepSeek网页版AI智能助手 +arcoDesign网页端webOS桌面框架自研Vite8+NaiveUI+Vue3+Echarts后台管理系统全新研发Flutter3.41桌面版OS系统最新款flutter3.41 & dart3.11 打造流式输出客户端AI助手基于tauri2.8+vite7+vue3+element-plus仿QQ/微信聊天应用 tauri2.9-vite7-vue3admin客户端后台系统管理Exe模板 最新原创
24520编辑于 2026-08-17 - 来自专栏h5
electron41+react19+arco桌面版os系统
迎接中秋国庆，最新原创跨平台新作react19.3+electron41+arco-design搭建桌面端os管理系统解决方案。 electron-react-os桌面管理系统，支持macOS和windows两种桌面风格。 以上就是electron41+react19实战桌面端os系统的一些项目分享，感谢大家的阅读与支持~Electron-React19-WinChat聊天系统|react+electron客户端聊天程序ExeReact19 +Arco+Zustand仿macOS风格webOS桌面系统electron38-vite7-vue3os电脑端os管理系统 最新版electron38-vite7-admin电脑端中后台管理系统 Electron38 + Vite8打造流式输出客户端AI助手基于tauri2.8+vite7+vue3+element-plus仿QQ/微信聊天应用 tauri2.9-vite7-vue3admin客户端后台系统管理Exe
14510编辑于 2026-09-24 - 来自专栏h5
tauri2.0-winos基于vite6+tauri2+vue3客户端os系统
经过半个月的高强度研发，原创自研Tauri2.0-Vue3-MacOS客户端OS桌面系统终于宣告完结。tauri2-vue3os支持macos和windows两种桌面风格。 vue3os支持多窗口管理、自定义拖拽栅格桌面引擎、分屏指示器管理、自定义桌面壁纸等功能。 tauri.conf.json配置{ "$schema": "https://schema.tauri.app/config/2", "productName": "tauri2-viteos", /pinia'createApp(App).use(Router).use(Pinia).use(Plugins).mount("#app")tauri2-vue3os桌面布局框架<script setup 系统的一些分享知识，希望对大家有点帮助~
1.2K20编辑于 2024-12-23 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）主题切换
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 本篇说明： 主题切换在安卓、IOS、PC网站的应用的特别的广泛，在第一次接触flutter的时候第一次做状态切换的案例同样也是主题切换，巧了，学习electron的第一个案例也是，具体用到了哪些知识呢？ 准备本篇的首页： 支持显示当前的主题来源：跟随系统/手动切换； 提供两个按钮来触发切换事件； 通过renderer脚本来进行渲染。 <! strong>
<button id="toggle-dark-mode">开启黑暗主题模式</button> <button id="reset-to-system">重置为系统主题模式1.7K40编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）发送通知
本篇说明： 在windows，macOS，linux操作系统均为开发者提供了向用户发送通知的API，也是客户端开发标配的功能之一，在Electron中主进程和渲染进程显示的方式不太一样，我们用实际的案例来演示一下 <body> <button id="clickme">渲染进程发送通知</button> <button id="clickme<em>2</em>">主进程发送通知</button> <script 并且点击后可以获的反馈 document.getElementById("clickme").addEventListener("click", () => { new Notification("今日更文：客户端开发 console.log("[ 通知被点击了 ]"); }; }); 复制代码 在主进程中发送通知： 主进程发送通知我们还是要在渲染脚本来触发 document.getElementById("clickme2" ).addEventListener("click", () => { window.send.notice( "客户端开发（Electron）URL远程启动", "「这是我参与2022
2.4K40编辑于 2022-12-26 - 来自专栏趣谈前端
Windows系统和Mac OS系统的免费FTP客户端有哪些？
之前在「趣谈前端」和大家分享了很多「可视化低代码」相关的技术分享和「前端工程化」的最佳实践, 今天和大家分享几个在「Windows」和「Mac」 下的最佳免费「FTP客户端」. 「FTP客户端」 可以很轻松的可视化的管理我们服务器上的文件资源, 并且可以简单的将本地电脑的文件上传到服务器. 如果你不太喜欢通过命令行的方式或者没有技术基础, 那么「FTP客户端」 将是个不错的选择. Windows下FTP客户端 1. 2. FileZilla image.png 「FileZilla」仍然是「Windows 10」最受欢迎的免费FTP客户端之一。 Mac下FTP客户端 ForkLift 3 image.png 「Forklift for mac」是「MAC OS」上的一款专业的文件管理程序，弥补了许多文件管理软件管理单一的问题，还具有卸载，同步浏览等许多功能
7.1K10编辑于 2022-09-27 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）加入webpack
本篇说明： 今天我们将在前端开发中最为常见webpack加入到Electron中，因为GUI引用不同于传统的Web前端项目，所以webpack的配置会相对繁琐，这里我们主要用到了electron-webpack 开始前的准备： 初始化项目：mkdir electron-webpack-demo && cd . \electron-webpack-demo && npm init； 安装开发依赖：yarn add electron-webpack electron webpack@4 --dev / 配置"app:dir": "electron-builder --dir"命令，用来构建应用后直接输出而不生成安装文件； 配置"app:dist": "electron-builder"命令，用来构建应用后输出安装文件用于分发 ； 为了达到可分发的标准还需要配置一些其他信息，具体参照https://www.electron.build/来配置。
1.8K40编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）快速入门
初始化项目： 初始化一个空项目，可以使用mkdir my-electron-app && cd my-electron-app并执行npm init，初始化的后要保证package中的字段 /' 'electron_mirror = https://registry.npmmirror.com/electron/' > .npmrc 安装Electron： npm install --save-dev electron 配置scripts： 启动electron命令："start": "electron ." npm run make 打包结束后会在项目根目录下生成out文件及打包内容 总结： 内容主要整理自官方指南，我也是头一回学习客户端开发，打算把官方文档的内容进行精简并实践一次，整体过完后在总结一次客户端开发的一些内容 ，并且我也会完善此次客户端学习的思维导图，后期复习就不再翻文档了。
2.5K50编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）认识窗口
Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 如下图： 在Vue的App.vue中通过html标签来绘制我们的标题栏，绘制后的结果如下图所示： 为标题栏的按钮增加事件： 按钮事件和调用函数的定义均与Vue一致，我们需要考虑的是如何与Electron 联通来调用对应的API： 调整窗口对象中的如下所示属性，切记启用remote： 在App.vue中导入electron对象： const { remote } = window.require('electron 当我们修改主进程的代码并服务自动重启后你会发现窗口会先回到居中的位置再移动到保存的窗口状态的位置，我们需要在主进程关闭展示窗口，并由我们在渲染进程中控制： 总结： 本篇主要介绍了对于Electron
6.2K60编辑于 2022-12-26 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）数据存储
本地文件存储： 存储目录： 因为不通的系统的文件目录不统一，Electron提供了专有的API来方便我们获取目录（app.getPath("userData");） 常见的用户目录： desktop、documents 、downloads、pictures、music、video 特殊的文件目录： temp对应系统临时文件夹路径。 系统默认目录： 当前用户的主目录：require('os').homedir(); / C:\Users\<username> 默认临时文件目录：require('os').homedir(); / C electron-store： https://github.com/sindresorhus/electron-store，专门为Electron设计的存取用户配置，应用状态，缓存的扩展。 build-from-source --runtime=electron --target=13.6.9 --dist-url=https://atom.io/download/electron 安装knexjs
3.8K50编辑于 2022-12-26 - 来自专栏liulun
electron开发客户端注意事项
窗口间通信的问题 electron窗口通信比nwjs要麻烦的多 electron分主进程和渲染进程，渲染进程又分主窗口的渲染进程和子窗口的渲染进程 主窗口的渲染进程给子窗口的渲染进程发消息 subWin.webContents.on 获取app版本号的hack代码 本来electron获取app版本号很简单，只要如下即可（以下代码运行在main进程中） import { app, BrowserWindow,ipcMain } from （就是electron的版本号）。 因为我用的electron-vue，他又两种模式，生产模式和开发模式 在生产模式下没任何问题 在开发模式下，它其实是起了一个webserver，让electron加载一个localhost的地址 这样做主要是为了使用 vue的hotload的优势 但这样的话，electron就找不到 package. json 文件中的版本号了 怎么办呢？
2.6K40发布于 2019-05-25 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）URL远程启动
本篇说明： 我们在使用一些客户端应用的时候，尤其是用的最多的微信，你在微信客户端打开一些页面的时一般都会默认在微信的浏览器打开，并且在右上角提供了按钮支持在你电脑上装的浏览器里打开。 我们一起来走进Electron Url 远程启动。 环境说明： 设备环境Windows； 代码环境：快速入门 提示说明： 客户端开发在不同的平台有不同的特性； 不同的平台有不同的API。 第一步：注册处理协议 关键API：setAsDefaultProtocolClient if (process.defaultApp) { if (process.argv.length >= 2) ); const path = require("path"); // 注册协议处理器 if (process.defaultApp) { if (process.argv.length >= 2) path.join("file://", __dirname, "index.html"); shell.openExternal(pagePath); }); 复制代码 总结： 本篇涉及到了以下2点
2.4K30编辑于 2022-12-26 初识双雄：Electron 与鸿蒙 OS 的跨平台使命
今天，我们要认识两位“跨平台明星”——Electron 与 鸿蒙操作系统（HarmonyOS），并探讨它们各自如何利用 Web 技术实现多端适配，以及为何将二者结合值得深入探索。 它将 Chromium 浏览器引擎与 Node.js 运行时深度集成，使得开发者既能使用现代 Web 技术构建 UI，又能通过 Node.js 调用系统级 API（如文件读写、进程管理等）。
</body> </html> 只需几行代码，你就能拥有一个真正的桌面窗口——这正是 Electron 的魅力所在。 鸿蒙 OS 是什么？ 它的“一次开发，多端部署”理念解析 如果说 Electron 解决了“桌面端跨平台”，那么华为推出的 鸿蒙操作系统（HarmonyOS） 则致力于解决 “全场景跨设备” 的难题。 小结 初步认识了 Electron 与鸿蒙 OS 的定位与能力。它们分别代表了 Web 技术在桌面端和全场景端的成功实践。68310编辑于 2025-12-21- 来自专栏h5
整合vite2+electron12撸后台管理系统
Vite2ElectronAdmin 一款精美UI跨平台前端后台管理系统框架。 前一段时间有给大家分享一个Electron+Vue3.x短视频，今天再分享最新开发的Electron桌面端后台系统。 001360截图20210516222515420.png vite2，electron12、element plus跨端后台框架 vite2-admin vue3-admin electron-vadmin const langModule = {} try { const localeCtx = require.context('@/locale', true, /([a-z]{2} ([A-Z]{2})? 开发前端后台管理系统就先分享到这里。
2.6K10发布于 2021-05-18 - 来自专栏码客
Electron+Vue开发爬虫客户端2-自动下载网页文件
/vue-cli-plugin-electron-builder/ Choose Electron Version选择默认即可 运行报错 INFO Launching Electron… Failed trying 4 more times Failed to fetch extension, trying 3 more times Failed to fetch extension, trying 2 Preload 加载要调用的JS file:///Users/zhangjian/psvmc/app/me/web/91crawler2/public/mypreload.js mypreload.js "]; mwv.src = this.weburl; mwv.preload = "file:///Users/zhangjian/psvmc/app/me/web/91crawler2/ 方式2 使用NodeJS下载 目前我使用的就是这种方式,推荐使用。
3.8K20发布于 2021-01-12 - 来自专栏每天进步一点点
electron仿制百度网盘客户端2(登录界面制作)
尺寸测量 百度网盘客户端的尺寸是: 主界面 w:662px h:442px 顶部header h:75px bg:#EFF2F6 开始制作 下载安装electron-vue ? 里面设置show: false就可以了 之后制作一个登录界面 创建一个login.js 在主进程index.js之中引入 login.js 代码 import {BrowserWindow} from 'electron /assets/img/logo@2x.png") no-repeat 0 20px; background-size: 140px 33px; margin: 0 auto line-height: 22px; } 左侧扫码 模板代码 <main>
<h2> } .scan p.title i:hover { border-bottom: 1px solid #398CFF; } main .scan h22K40发布于 2019-05-26
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号