30天精通Nodejs--第二十六天：构建Electron桌面应用

原创已于 2024-01-29 15:52:33 修改 · 385 阅读

0 GEO检测

标签

#electron #javascript #前端 #nodejs #js

#后端 #桌面应用

收录于

于 2024-01-19 13:40:25 首次发布

30天精通Nodejs 专栏收录该内容

31 篇文章 ¥19.90 ¥99.00

订阅专栏

本文介绍了如何使用Electron框架结合Node.js开发桌面应用。内容包括环境准备，如设置Electron镜像源，安装Electron；编写代码，创建main.js和renderer.js；启动项目；项目结构与工作原理，涉及主进程和渲染进程；以及打包与发布的步骤。通过Electron，开发者可以使用Web技术栈构建高性能、跨平台的桌面应用。

前言

在当今的软件开发领域中，Electron框架凭借其强大的功能和便捷性，已经成为了开发桌面应用程序的一种热门选择。它允许开发者使用HTML、CSS和JavaScript这三种Web技术栈来构建原生桌面应用，并且能够无缝地结合Node.js的强大后端能力，实现跨Windows、macOS和Linux等多平台运行。下面，我们将深入探讨如何使用Node.js开发Electron桌面应用。

环境准备

设置Electron镜像源 (可选)

为了加速在国内的Electron包下载，推荐设置淘宝NPM镜像仓库以获取Electron资源：

# 使用cnpm或nrm工具将Electron指向淘宝镜像
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

安装Electron

接下来，在命令行中初始化一个新的Node.js项目并安装Electron作为依赖项：

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

石头老师学编程

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

设置electron镜像

qq_43651168的博客

06-07

8045

设置electron镜像

Electron 安装指令

wshong1990的博客

01-29

968

默认环境均已安装完成【NodeJs、git】

参与评论您还未登录，请先登录后发表或查看评论

graphics-workshop三光源设置实战：打造电影级光影效果

最新发布

gitblog_00217的博客

04-26

889

graphics-workshop是一个通过编写GPU着色器学习计算机图形学的开源项目，本文将带你掌握三光源设置技术，轻松实现专业级光影渲染效果。 ## 为什么三光源系统是光影渲染的黄金法则？在计算机图形学中，单一光源往往导致画面单调扁平，而三光源系统通过主光源、补光和轮廓光的协同作用，能创造出具有深度感和立体感的电影级画面。这种经典布光方案被广泛应用于游戏开发、影视特效和3D可视化领域。

npm 添加 electron 安装镜像变量，提交打包速度。

TangAcrab的博客

06-11

1166

时， electron-builder 默认会从 github 下载 electron 依赖包，导致打包缓慢。可以通过添加 electron 下载镜像地址来解决。结尾：这样，打包时就会从镜像地址下载 electron 打包相关依赖，提升打包速率，加快打包时间。查看 npm 所有配置。

electron设置国内镜像

qq_32660241的博客

04-22

1万+

electron设置国内镜像

electron打包下载资源失败，设置国内镜像

义龙道隐的专栏

11-05

4623

由于electron默认打包会从github上下载相关二进制包，众所周知，国内GitHub访问是相当慢的，所以经常会出现下载失败导致打包不成功，这时我们就需要配置国内的镜像源，以解决从GitHub下载慢甚至无法下载的问题。

nodejs的桌面应用（electron）

机智的皮卡丘的博客

11-22

2万+

最近发现nodejs可以做桌面应用，主要是之前的同事在搞，我也要稍微研究下不能落后啊，基于nodejs的桌面应用，常用的就是nw.js和electron，nw出的比较早，资料比较多，bug也很多，它的前身是node-webkit文档可以参考nw.js，微信web开发工具、钉钉都是基于 nw.js 开发的，nw.js支持xp，还有很多人抱着xp过日子呢。而electron比较全比较新，在github的

使用 electron-vue 构建你的桌面应用

热门推荐

Hello world!

11-06

5万+

什么是 electron官网里这么说：Electron提供了一个Nodejs的运行时，专注于构建桌面应用，同时使用web页面来作为应用的GUI，你可以将其看作是一个由JavaScript控制的迷你版的Chromium浏览器。翻译一下：它是一个运行时，可以像 node 一样这样执行：electron app.js；也是一个使用 html + css + javascript 构建跨平台原生桌面应用的框

【桌面程序】Electron实现跨平台桌面应用程序

Hi-Jimmy

01-16

1731

Electron 是一个开源框架，用于构建跨平台的桌面应用程序，允许开发者使用网页技术（HTML、CSS 和 JavaScript）来开发桌面应用程序。它结合了 Chromium（用于渲染网页的浏览器引擎）和 Node.js（用于处理后台逻辑的 JavaScript 运行时环境），因此开发者可以使用前端技术来构建用户界面，并且利用 Node.js 来访问操作系统功能。

electron 构建桌面应用

2401_84092727的博客

04-06

942

);});很明显 electron 为开发者提供了方便好用的 API 可供调用。app 控制整个程序的生命周期，BrowserWindow 可以打开一个浏览器窗口。Electron 引入了两个新的概念 Main Process 和 Renderer Process。以目前浅显的理解，Main Process 指的就是浏览器窗口，Renderer Process 指的就是网页。在 main.js 中添加好上面的代码后保存，在命令行运行npm start。

vue项目包装成electron桌面应用（超简单！！只需四步）

HRM2454的博客

08-18

1624

准备工作 1、安装nodejs 2、配置淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 3、安装git 以上都是前端工程师基本的操作了这里不赘述，不清楚的百度即可 1、全局安装electron及electron-packager 全局安装electron ; 全局安装electron-packager，用于打exe包 cnpm install electron -g cnpm install .

NodeJs Electron 搭建基础桌面应用

zhouzhiwengang的专栏

03-29

1286

Electron 概述 Electron为用纯JavaScript创建桌面应用提供了运行时。原理是，Electron调用你在package.json中定义的main文件并执行它。main文件（通常被命名为main.js）会创建一个内含渲染完的web页面的应用窗口，并添加与你操作系统的原生GUI（图形界面）交互的功能。第一步：基于NodeJs 环境，创建NodeJs...

uniapp打包PC桌面应用exe

qq_29516211的博客

11-11

1868

uniapp项目打包为桌面应用exe的方法步骤。

Electron + VUE 快速构建桌面应用

baidu_25948741的博客

07-28

644

Electron + VUE 快速构建桌面应用第一步安装Nodejs第二步搭建VUE开发环境第三步安装Electron第四步使用vue-cli脚手架工具来创建项目第五步使用yarn安装依赖第六步启动项目第七步打包注：如遇到一下问题，解决方案第一步安装Nodejs 安装成功之后在cmd 输入node -v 可以查看到版本号即代表安装成功第二步搭建VUE开发环境安装脚手架工具vue-cli （可自行百度安装） npm install -g vue-cli 或者 cnpm instal

Electron Vue 构建桌面应用

chuangyeifang163的博客

08-19

310

Electron Vue 桌面应用开发，易学、开发成本低，只需要将web应用嵌入Electron内，即可享受桌面应用的使用体验。

electron之Windows下使用 html js css 开发桌面应用程序

赤龙绕月的专栏

03-01

4065

https://github.com/atom/electron electron之Windows下使用 html js css 开发桌面应用程序步骤详细完整

终极指南：如何用 opencv4nodejs 构建跨平台 Electron 桌面应用

gitblog_00965的博客

12-28

916

opencv4nodejs 是一个强大的 Node.js 库，它为 JavaScript 开发者提供了完整的 OpenCV 4.x 绑定，让您能够在桌面应用中轻松实现计算机视觉功能。当与 Electron 框架结合时，您可以创建功能丰富的跨平台桌面应用，具备人脸识别、对象检测、文本识别等高级视觉能力。🚀 ## 为什么选择 opencv4nodejs + Electron 组合？ **跨平台兼

centos下打包electron_NodeJS的桌面应用开发 Electron

weixin_35838394的博客

12-30

253

##开发环境及版本号##NodeJS ： 7.2.0Electron ： 1.4.10##开始教程##安装各个应用：安装electron的包npm install -g electron安装 aser 打包工具npm install -g asar安装 packager 发布工具npm install -g electron-packager建立空的 nodejs 项目：npm init建立js程...