Electron使用快速入门

4,498 阅读3分钟
原文链接: baijiahao.baidu.com

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,它处在一个独立的渲染进程中。

renderer.js:渲染进程,它的操作跟web中的js操作大同小异,所以最好有node.js、js以及es6的语法的功底,这样开发起来,才能得心应手。

项目运行流程如下:

app启动时执行main.js中的代码创建窗口,加载页面等。渲染进程renderer.js进行页面的渲染,渲染进程与主进程间相互通信,进行数据的传递等,但主进程与渲染进程之间不能直接互相访问,需要通过ipcMain和ipcRenderer进行IPC通信。

四、将项目打包成可运行的桌面应用程序

1、使用webpack将代码进行混编

2、使用electron-builder对项目进行打包

注:进行electron桌面应用程序开发时,最主要的依据就是参考electron的官方文档进行开发,官方文档里的讲解,很是详细。

这是小编对于electron入门的一些理解,仅供参考。