「Electron使用快速入门」百家号

「Electron使用快速入门」百家号_作者自评：

如何看待百家号Lite小程序热议话题「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库：
npminstallelectron--save-dev--save-exact
2、查看是否安装成功，输入以下命令：
electron-v
二、electron官方新手入门实例该实例的使用方法如下：
1、从GitHub上下载实例代码：
gitclonehttps://github.com/electron/electron-quick-start
2、进入到electron-quick-start目录下
cdelectron-quick-start
目录结构如下：
3、安装项目依赖
npminstall
4、启动项目：
npmstart
出现如下界面，说明项目运行成功
官方的这个仓库给我们初始化了一个electron项目，结构非常纯净，接下来你就可以直接改造成自己的项目了。还等什么，赶紧试试吧。
三、electron项目实例说明electron核心我们可以分成2个部分，主进程和渲染进程。主进程连接着操作系统和渲染进程，可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的nodeapi。
安装完项目依赖后的完整项目结构如下图所示：
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入门的一些理解，仅供参考。
该话题由百家号作者技术那点事「简介:专注于解决互联网技术难题，大家共同学习」整理发布
更多有关Electron使用快速入门的话题讨论请关注百家号Lite小程序