Electron使用快速入门

百度首页

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

使用eletron前需要储备哪些知识

1、首先需要熟练掌握前端的基础知识html,css，js

2、有一定的node基础，知道npm怎么用

下面我们从electron的安装开始，了解下electron。

一、electron安装

1、npm命令安装electron库：

npm install electron --save-dev --save-exact

2、查看是否安装成功，输入以下命令：

electron -v

二、electron官方新手入门实例

该实例的使用方法如下：

1、从GitHub上下载实例代码：

git clone https://github.com/electron/electron-quick-start

2、进入到electron-quick-start目录下

cd electron-quick-start

目录结构如下：

3、安装项目依赖

npm install

4、启动项目：

npm start

出现如下界面，说明项目运行成功

官方的这个仓库给我们初始化了一个electron项目，结构非常纯净，接下来你就可以直接改造成自己的项目了。还等什么，赶紧试试吧。

三、electron项目实例说明

electron核心我们可以分成2个部分，主进程和渲染进程。主进程连接着操作系统和渲染进程，可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的node api 。

安装完项目依赖后的完整项目结构如下图所示：

node_modules：模块依赖

package.json：描述包的文件，这里默认已经将主进程入口文件配置为main.js

main.js：主进程

在主进程里创建mainWindow浏览器窗口，使用mainWindow.loadURL("file://${__dirname}/index.html")来加载index.html主页；使用mainWindow.webContents.openDevTools()来打开开发者工具用于调试（这个操作通常在发布app时删除）。

1、ready：当Electron完成初始化后触发，这里初始化后就会去创建浏览器窗口并加载主页面。

2、window-all-closed：当所有浏览器窗口被关闭后触发，一般此时就退出应用了。

3、activate：当app激活时触发，一般针对macOS要需要处理。

index.html：是一个web页面，它需要使用一个浏览器窗口（BrowserWindow）来加载和显示，作为应用的UI，它处在一个独立的渲染进程中。