Electron的安装流程
参考electron文档： www.electronjs.org/docs
简介
electron是由Github开发，是一个用Html、css、JavaScript来构建桌面应用程序的开源库，可以打包为Mac、Windows、Linux系统下的应用。
electron项目和web项目的区别
electron核心我们可以分成2个部分，主进程和渲染进程。主进程连接着操作系统和渲染进程，可以把它看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的node api 。
简单理解：给web项目套上一个node环境的壳。
有哪些著名应用是用Electron开发的
- VSCode ： 程序员最常用的开发者工具。
- Atom : 是Github开发的文本编辑器。
- slack ： 聊天群组 + 大规模工具集成 + 文件整合 + 搜索的一个工具。就是把很多你常用的工具整合到了一起。
- wordPress ： 基于PHP开发的Blog搭建工具，新版本使用了Electron.
安装
cnpm install -g electron //全局安装 electron
大体上，一个 Electron 应用的目录结构如下：
my-electron-app/
├── index.html
├── main.js
└── package.json
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
const { app, BrowserWindow } = require('electron')
let mainWindow = null
app.on('ready', () => { // 监听准备事件
mainWindow = new BrowserWindow({
height: 500,
width: 500,
webPreferences: { //允许使用node的API
nodeIntegration: true
}
})
mainWindow.loadFile('index.html')
mainWindow.on('closed', () => { // 监听关闭时间
mainWindow = null // 监听窗口关闭时销毁，否则的话内存会一直被占用
})
})
{
"name": "electron-demo",
"version": "0.0.1",
"description": "electron-demo",
"main": "main.js",
"author": "sakurako",
"scripts": {
"start": "electron ."
}
}
Electron 应用程序使用package.json文件作为主入口(像任何其它的 Node.js 应用程序)。 应用程序的主脚本是main.js，所以相应修改package.json文件：
流程
Electron 包含三个核心：
- Chromium用于显示网页内容。
- Node.js用于本地文件系统和操作系统。
- 自定义 APIs用于使用经常需要的 OS 本机函数。
用 Electron 开发应用程序就像构建一个带有网页界面的 Node.js 应用程序或构建无缝集成的网页。
Electron的运行流程
首先是Package.json读取入口文件。main.js——入口文件
然后是main.js主进程中创建渲染进程
其次是读取应用页面的布局和样式
最后是使用IPC在主进程执行任务并获取信息
Electron的渲染过程
package.json中定义的入口文件就是主进程，一个程序只有一个主进程，而我们可以利用一个主进程，打开多个子窗口。
由于Electron使用了Chromium来展示web页面，所以chromium的多进程架构也被使用了。每个Electron中的web页面运行在它自己的渲染进程中，也就是我们说的渲染过程。
也就是说主进程控制渲染进程，一个主进程可以控制多个渲染进程。
主进程
进程间通信、窗口管理
全局通用服务。
一些只能或适合在主进程做的事情。例如浏览器下载、全局快捷键处理、托盘、session。
维护一些必要的全局状态
上面说的通用混合层也跑在这个进程。通过 Node C++ 插件暴露接口。
渲染进程
负责 Web 页面的渲染, 具体页面的业务处理。
Service Worker
负责静态资源缓存。缓存一些网络图片、音频。保证静态资源的稳定加载。
electron-vue
官方文档中作者提供了很多对开发有用的东西，我推荐学习的同学都通读一遍
传送门： electron-vue文档
electron-vue，作者为我们封装好了一个基于vue框架的脚手架，包括electron所有基本的开发构建工具 和vue配套的请求，路由以及vuex等插件。通过脚手架我们可以直接进入开发阶段，开发的同时，去了解electron的工作机制，之后再开始深入去理解她更深层次的代码逻辑。 先走形，再走心。
juejin.cn/post/691382…