Electron 开发应用程序

最新推荐文章于 2025-05-05 18:20:12 发布
最新推荐文章于 2025-05-05 18:20:12 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SpringDou/article/details/99286120
本文介绍了如何利用Electron（结合Chromium和NodeJS）开发桌面应用程序，如Visual Studio Code。在开发过程中，重点讨论了后端开发的挑战，包括加载dll、处理V8引擎接口和编写兼容的NodeJS扩展。提到了使用NAN或N-API来确保AddOn在不同版本间的兼容性，以及在Angular框架下与Electron集成时需要注意的细节，如修正HTML的<base>标签和调整tsconfig.json的配置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Electron结合了Chromium和NodeJS，使得用JS开发应用程序成为可能，比如微软的Visual Studio Code就是用Electron开发的。Electron利用了Chromium的前端显示功能（解析和显示HTML以及 javascript code）同时利用NodeJS 可以访问本地文件的功能来解决浏览器本身的一些限制。

我们在用Electron做一些开发的时候，前端基本没什么问题，比如你用的是Angular框架或者Vue框架等等，但是在进行后端开发的时候，由于有很多的业务逻辑需要利用其它语言写或者利用老的dll，那么就需要特别注意：

1. Electron用的是NodeJS的require功能来加载模块的，它支持的语言是c++，所以需要写单独的Addon(NodeJS 扩展)去加载（LoadLibrary）你要用的dll，简单的将之前的dll代码复制，重新编译，并不一定能用。

2. Electron前后端用来解析JavaScript的V8引擎是一个，通常情况下是用的Chromium带的V8 引擎，所以你在编写AddOn的时候要注意，利用的API不是要对应NodeJS的V8接口，V8接口通常情况下在各个版本是不同的。

3. 在编写AddOn的时候最好用NAN(NAPI)或者N-API，前者可以让你写的AddOn在不同的版本下安装(npm install module)的时候重新编译，不需要重写代码, 后者(N-API)可以让你写的程序编译后，不需要重新编译，只要你写程序时的NodeJS 对应的ABI版本和Electron里用的NodeJS的ABI版本是一个就行。

4. 如果是用NAN编写的AddOn在下载完后重新编译的时候，要用Electron-rebuild模块重新编译，

最低0.47元/天 解锁文章
「Electron」Electron 应用程序详解
拥抱AI Design
05-21 671
Electron 作为一个强大的框架，让开发者能够使用熟悉的 Web 技术栈来构建桌面应用程序。下面我将对您提供的要点进行扩展，以便更深入地理解 Electron 开发的各个方面。
Electron跨平台桌面应用程序开发 # 001 介绍和入门
skysys的研究小屋
06-19 457
入门教程内容 electron介绍 hello world electron调试技巧 electron api介绍 与高级框架集成 应用打包发布 1 介绍 02 hello，world 环境配置： 操作系统：>=win7 Nodejs：v10以上 npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/ 错误 throw new Error('Electron failed to install c
Electron桌面程序开发入门
qq_45575393的博客
03-10 456
Electron开发入门
electron开发桌面应用
前端踩坑之路
10-18 789
Electron + Vue3 项目搭建 npm i @vue/cli -g vue create electron-vue-demo cd electron-vue-demo vue add electron-builder 问题：由于网络的原因，Electron 可能会安装失败： 解决：我是 mac 开发，只介绍 mac 的方法 打开链接https://github.com/electron/electron/releases/tag/v$VERSION 这个地址下载文件（这里的 $VERSION 是
Electron 开发桌面应用：从入门到发布跨平台应用
最新发布
数字魔方操控师的博客
05-05 991
一、引言在数字化时代，桌面应用程序依然在企业办公、创意设计、多媒体处理等领域发挥着重要作用。然而，传统桌面应用开发面临着平台差异带来的诸多挑战，如针对 Windows、macOS、Linux 等不同操作系统，需要使用不同的技术栈分别进行开发，这无疑增加了开发成本和周期。Electron 的出现为开发者带来了全新的解决方案，它基于 Web 技术，允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用，极大地降低了开发门槛和成本，提高了开发效率。
采用electron开发桌面应用
未来以来 futureToday
12-26 5292
什么是electron,能做什么？ 1.electron是搭载谷歌v8内核的高性能的node环境 ，所有node能用的东西.这里都能用。 2.前端做桌面应用. 前端做桌面应用（electron, nw） 1. electron link. 官网地址： [link]https://electronjs.org/ 2. nw link. electron开发桌面端应用有哪些优点 1.Web 技术——...
Electron-使用Electron开发第一个应用
热门推荐
二分掌柜的
11-27 1万+
使用Electron开发第一个应用Electron 应用的目录结构如下：app/ ├── package.json ├── main.js └── index.html新建一个app文件夹 将这三个文件都放在里面 package.json的内容{ "name" : "app", "version" : "0.1.0", "main" : "main.js" }注意：如
Electron开发桌面应用（一） Helloworld
sinat_41211717的博客
09-20 1986
简介 Electron是一个使用HTML、CSS和JavaScript构建桌面应用程序的框架。嵌入Chromium和nodejs到二进制Electron中，将允许在Windows上创建运行跨平台应用（Linux、MacOS）。 所需知识点 在使用Electron之前，需要掌握web开发以及nodejs,推荐在下边学习： 来自Mozilla开发社区(Mozilla Developer Network)的web入门教程 NodeJS官方入门指南 笔记内容部分为复制官方文档，官方文档地址：点击打开 快速入
【Electron学习笔记（二）】基于Electron开发应用程序
禾戊之昂的博客
11-25 957
本文旨在帮助初学者快速上手Electron，通过一步步的示例操作，展示如何从头开始创建一个简单的本地应用程序。我们将从项目的基本结构搭建开始，包括创建HTML、CSS和JavaScript文件，到配置Electron主进程以加载这些资源。此外，我们还将探讨如何启用开发者模式以便于调试，如何解决内容安全策略（CSP）可能带来的问题，以及如何完善窗口行为，使其更加符合用户的期望。更进一步，为了提升开发效率，我们将配置项目以实现自动重启和热更新功能。
electron开发桌面程序windows+mac操作系统安装，集成前端react+ant design UI
11-03
在电子（Electron）框架下开发桌面应用程序，可以利用Web技术如HTML、CSS和JavaScript，同时支持Windows和macOS操作系统。本教程将详细介绍如何在这些平台上安装和配置Electron环境，以及如何集成React和Ant Design ...
electron-demo:使用电子框架开发的演示应用程序，用于学校演示
05-25
电子演示 这是我创建的用于展示电子框架的应用程序！ 还有关于此项目的视频： :
electron获取系统字体
01-08
electron框架我用的electron-react-boilerplate 最近有个需求是获取系统字体. 在网上找了一圈找到一个font-list库, 再一看用法, 觉得好简单, so easy. 先install一下: cnpm i font-list -S 上代码: 渲染程序中: import electron from 'electron'; const { ipcRenderer } = electron; ipcRenderer.send('get-sys-fonts'); // 监听函数记得写在componentDidMount中 ipcRenderer.on('font-
探索 Electron：将 Web 技术带入桌面应用
ztK63LrD的博客
06-29 4144
Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
探索 Electron：如何利用Electron和Vite打造高效桌面应用
ztK63LrD的博客
07-21 5745
Electron是一个开源的桌面应用程序开发框架，它允许开发者使用Web技术（如 HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序，它的出现极大地简化了桌面应用程序的开发流程，让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序，这对于提升开发效率和应用程序的快速交付具有重要意义。
Electron编写第一个程序
张晋悦的博客
02-16 695
1.初始化项目(npm init) 2.安装electron框架(npm install --save-dev electron) 3.把package配置文件启动项更改为 &amp;amp;amp;amp;amp;amp;amp;quot;start&amp;amp;amp;amp;amp;amp;amp;quot;: &amp;amp;amp;amp;amp;amp;amp;quot;electron .&amp;amp;amp;amp;amp;amp;amp;quot
如何使用electron开发基础桌面应用程序
weixin_38468473的博客
04-09 1314
进行加载就是直接通过访问网页的方式加载页面，好处是如果页面出现大更新，打包后安装的应用程序不用进行安装包更新，只需要部署的页面进行替换，坏处是加载速度是通过网速控制的，如果网络不好会导致页面都不显示的情况。进行加载前端打包后的文件，页面出现大更新，应用程序就需要进行安装包更新，但是好处是页面加载速度快，网络不好的情况也不会导致页面的崩溃。文件中我们需要创建应用程序窗口，创建加载完之后，我们可以根据需求完成应用程序页面的加载。配置就完结了，只需要当前目录启动一下命令就可以看见开发环境的桌面应用程序情况。
可以运行的electron开源小项目
集电极
11-24 1万+
可以运行的electron开源小项目 文章目录可以运行的electron开源小项目1. vue-electron-notes笔记软件安装依赖本地启动项目构建安装包2 Electron API 演示(中文版)构建3. wallhaven-electron4. 番茄钟????⏰5.electron-egg 模板6.tasky 前阵子为了学习一下electron,找了不少开源小项目来练手，现在汇总一下。 可惜对前端编程不是很熟悉，只是学了一点皮毛，记录一下这些项目，供以后再来学习。 1. vue-electr
一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
weixin_41978174的博客
08-25 1945
1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。2.也有可能与main.js写法有关。3.打包时删除main.js里的win.openDevTools() //自动打开调试窗口否则软件会自动打开调试窗口。4. 代码仓库位置终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。
Electron开发桌面应用程序怎么着手
02-08
### 开始使用 Electron 开发桌面应用程序 #### 准备工作环境 为了开始使用 Electron 进行开发，首先需要准备合适的工作环境。这通常意味着安装 Node.js 和 npm (Node Package Manager)，因为 Electron 是基于这些技术栈构建的工具。 对于具体的项目初始化，在 React 应用程序的根目录下，可以通过命令 `npm install electron --save-dev` 来安装 Electron 作为开发依赖[^2]。此操作会将 Electron 添加到项目的 devDependencies 中，确保它仅用于开发阶段而非生产环境中的一部分。 #### 创建基础结构 一旦设置了必要的依赖项之后，下一步就是搭建应用的基础架构。这意味着要创建一个基本的应用程序框架，包括主进程文件(main process file)——即启动整个应用的地方以及渲染器进程(renderer process files)——负责显示网页内容给用户的HTML/JSX 文件等。 脚手架应用程序的过程涉及设置 package.json 配置文件来定义启动参数和其他元数据信息，并编写 main.js 或类似的入口点代码以加载窗口并指定其行为方式[^1]。 #### 编写第一个 Electron 应用 当一切准备好以后就可以着手于实际编程了。下面是一个简单的例子展示如何利用 JavaScript 实现打开浏览器窗口的功能： ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) ``` 这段代码展示了如何配置一个新的浏览器窗口实例(`BrowserWindow`)及其属性，比如宽度、高度和是否启用 Node.js 集成；同时也指定了该窗口应该加载哪个 HTML 页面 (`win.loadFile('index.html')`). 另外还处理了一些常见的生命周期事件如所有窗口关闭时退出应用程序的行为. #### 扩展功能 随着对核心概念的理解加深，开发者可以根据需求向应用程序中加入更多特性。例如，通过调用 Electron 提供的各种 API 接口实现与本地系统的交互，像创建自定义菜单条目、弹出消息框或是读取保存文件等等[^3].
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值