Electron入门介绍

最新推荐文章于 2025-05-15 09:59:20 发布

转载最新推荐文章于 2025-05-15 09:59:20 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000012735956

文章标签：

#json #git #javascript #ViewUI

本文介绍如何使用Electron框架开发跨平台桌面应用。Electron允许开发者使用HTML、CSS和JavaScript进行开发，提供了部署方便、跨平台支持等优势。文章详细讲解了开发环境搭建过程，包括Node.js和Electron的安装，并通过示例演示了基本应用的创建。

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

Electron是什么

可以认为Electron是一种运行环境库，我们可以基于此，用HTML、JS和CSS写桌面应用。
PC端的UI交互，主要有web应用和桌面应用。具体采用哪种方式，主要看系统的应用场景，哪个更合适用哪个。
对于Web应用：

优点：

部署、升级方便。用户通过浏览器就可以访问；
HTML/JS/CSS编写，方便且高效；
windows、linux都支持；

缺点：

对于开发者：浏览器适配比较繁琐；
对于开发者：有些应用，必须指定浏览器或版本。比如OCX必须是IE内核，H5要求浏览器必须是较高版本；
对于用户：传统行业中，部分用户对web应用不习惯，尤其在专业工具软件方面，觉得web应用没有桌面应用用起来踏实。
对于开发者：必须打开浏览器，输入一长串URL地址（虽然可以建立浏览器收藏夹或者创建URL的快捷方式到桌面，但大部分用户不会这么做）；

因为之前开发的一款应用是专业工具软件，给科研院所的设计人员使用。而且用户的大部分系统是XP，且不允许安装非IE浏览器。我们发现，采用web方式，效果很不好。因此决定用桌面应用。
考虑到开发效率、人员配备情况以及后续的升级，于是调研了一下nw.js和Electron技术。本文主要讲解Electron的入门。（注：Electron的一个遗憾，不支持XP系统。nw.js 0.14.7以后版本不支持XP系统。）

Electron网址：

https://electronjs.org/
https://github.com/electron/e...

环境安装（Windows）

Node.js安装

Electron中使用了Node.js，因此首先安装Node.js。安装十分简单，直接从官网下载安装包，点击安装即可。当前最新版本8.9.4。
新版本的Node.js中自动集成了npm，npm是JS的包管理器。可以帮助我们管理包的下载、依赖、部署、发布等。可以认为是js中的maven。

安装完后，在命令行窗口中分别输入node -v和npm -v来查看node和npm的版本。

cnpm安装（非必须）

考虑到npm下载包时是从国外的服务器上下载，不仅速度慢，而且不稳定。因此，建议使用淘宝npm镜像（官网：https://npm.taobao.org/）。
安装cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm的使用方法和npm一样。后续使用中，npm全部替换为cnpm即可。

例子

从github上下载第一个示例，运行看效果

# 克隆这仓库
> git clone https://github.com/electron/electron-quick-start
# 进入仓库
> cd electron-quick-start
# 安装依赖库
> cnpm install
# 运行应用，也可以用： cnpm run start
> cnpm start

注意：需要安装git，具体安装步骤这里不描述。另外，注意这里使用的cnpm。
如果没有安装git，直接下载压缩包也可以。

命令行中执行上述操作，最后的效果：
图片描述

（注：我把命令行窗户和弹出的Hello World窗口截在一张图了）

主要文件结构

进入到electron-quick-start文件夹，可以看到主要目录结构

electron-quick-start/
 ├── package.json
 ├── main.js
 ├── index.html
 ├── node_modules/

index.html：窗口中显示的内容，在index.html中
package.json：项目的配置信息和所需的各种模块，在这里配置。npm install命令根据它，自动下载所需模块
main.js：用于创建窗口和处理系统事件
node_modules：npm install安装包的位置。如果是全局安装，则不在这个目录。

可以打开各个文件和目录，看看具体的内容，先大致了解，有个整体概念。

例子中package.json简要解释

"name": "electron-quick-start"

通过name字段，指定窗口标题。

"main": "main.js"

通过main字段，指定应用的启动脚本。如果未指定，Electron会优先加载index.js。

"scripts": {    "start": "electron ."  }

配置npm的命令，这里是start命令。npm start命令调用的就是这里的“electron .”
注意：这里直接使用的是"electron ."，而不是"node_modules.binelectron ."。虽然前面electron模块是局部安装，但是运行npm命令时，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。因此，即使非全局安装，electron也可以不带路径。这里的electron其实就是一个shell脚本。

"devDependencies": {    "electron": "~1.6.2"  }

配置依赖的模块，这里只有Electron模块。

自己手动编写一个例子，并运行

如果上诉的简单例子还不够直观，可以自己建立一个。
》创建一个文件夹ETest；
》该文件夹下建立三个文件：index.html, main.js, package.json。文件的内容参考上诉例子；
》打开命令窗口，cd到ETest目录下；
》启动程序：e:githubelectron-quick-startnode_modules.binelectron .
》完成。
注意这里直接使用的是上一步electron-quick-start例子中的electron命令。

还有一个重要例子

github上有一个electron-api-demos的例子，里面介绍了主要的一些功能及实现代码。可以下载下来参考：

> git clone https://github.com/electron/electron-api-demos
> cd electron-api-demos
> cnpm install
> cnpm start

结果界面：
图片描述

这里例子中，展示了：
》创建新窗口；
》管理窗口状态；
》窗口失去焦点和获取焦点的事件；
》创建无边框窗口；
》自定义菜单和右键菜单；
》注册键盘快捷键
》打开外部链接；
》通知消息（带图片）；
》使用系统窗口（文件选择窗口、错误提示窗口、信息提示窗口、保存窗口）
》添加系统状态栏图标；
》多进程间通信；
》获取系统信息；
》拷贝和粘贴；
》打印PDF；
》截图。

要更深入的了解，可以参网上相应的文档。