Electron入门介绍

wing324 发布于2019-08-21 18:41 / 973人阅读

摘要：本文主要讲解的入门。可以帮助我们管理包的下载依赖部署发布等。可以认为是中的。后续使用中，全部替换为即可。命令根据它，自动下载所需模块用于创建窗口和处理系统事件安装包的位置。

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；
》截图。

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

GPU云服务器云服务器 Ruby入门介绍 spark入门介绍 electron webrtc electron

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90713.html

Electron入门介绍

摘要：进程主进程在里，运行里脚本的进程被称为主进程。渲染进程由于使用来展示页面，所以的多进程结构也被充分利用。当一个实例被销毁后，相应的渲染进程也会被终止。在，我们提供用于在主进程与渲染进程之间通讯的模块。 Github 系列文章地址笔者前两天心血来潮做了个MACOS下可以进行OCR图文识别的小工具，发现Electron 在1.x之后API发生了挺大的变化，估计也是我好久没碰了，所以打算把这...

yunhao 2019-08-21 10:53 评论0 收藏0
一口气完成electron的入门学习

摘要：目前类似的工具有，等。在渲染进程中，直接调用原生的接口是十分危险的。这里介绍一种，通过和对象，以消息的方式进行通信。主进程获得消息后，通过返回信息。另外，还提供了一种同步的消息传递方式。打包完成功能代码后，我们需要将代码打成可运行的包。介绍目前，使用前端技术开发桌面应用已经越来越成熟，这使得前端同学也可以参与桌面应用的开发。目前类似的工具有electron，NW.js等。这里我们着...

Ethan815 2019-08-22 11:01 评论0 收藏0
Electron 快速入门

摘要：当一个实例被销毁后，相应的渲染进程也会被终止。之所以命名为，主要是为了与主进程这个概念对应。部分在事件触发后才能使用。当全部窗口关闭时退出。主进程接收到消息并处理之后，会返回处理结果。简介 Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron，我们可以使用纯 JavaScript 来调用丰...

Drummor 2019-08-20 17:49 评论0 收藏0
Electron，从玩玩具的心态开始，到打造出一款越来越优秀的桌面客户端产品

摘要：首发于酷家乐前端博客标题是我以第一视角基于开发客户端产品的体验，我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触到去开发客户端产品，最后随着业务和功能的复杂度提升再不断地优化客户端。首发于酷家乐前端博客标题是我以第一视角基于 Electron 开发客户端产品的体验，我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触 Ele...

Markxu 2019-08-21 17:14 评论0 收藏0
Electron指南 - 快速入门

摘要：快速入门提供了丰富的本地操作系统的，使你能够使用纯来创建桌面应用程序。这并不意味着是一个绑定图形用户界面的库。每个页面在里是运行在自己的进程里，这些进程被称为渲染进程。有些只能在该事件发生后才能被使用。快速入门 Electron提供了丰富的本地（操作系统）的API，使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面...

SQC 2019-08-19 18:25 评论0 收藏0