Electron入门知识

官网

Electron官网

Electron是什么

Electron=Chromium+Node.js

• Electron整合了Chrome的开源内核和Node.js两项技术，提供可以跨macOS、Windows、Linux三个系统的桌面应用运行时。
• 它拥有浏览器能实现的所有功能和Node.js能实现的所有功能，因此，它可以通过Node.js实现系统底层API的调用，这是传统浏览器无法实现的，同时它也可以通过Chromium内核实现浏览器功能，特别是用户界面GUI，这是Node.js的dock界面无法实现的。

Electron的构成

Electron=1个主进程+0到多个渲染器进程

主进程：负责处理与操作系统的交互、管理应用的生命周期、创建渲染器进程（通过BrowserWindow）
渲染器进程：显示UI界面，响应用户操作；渲染器进程间相互隔离，不允许它们直接访问操作系统级别的API
进程间通信：渲染器进程通过与主进程通信，由主进程代替渲染器进程访问操作系统级别的API

初始化一个Electron应用

• 新建一个文件夹
• 用VScode打开这个文件夹
• 终端->新建终端
• cnpm init 或 npm init
• cnpm install --save-dev electron 或 npm install --save-dev electron
• 新建一个app文件夹，在app中新建一个main.js，一个index.html，一个style.css，以及一个renderer.js
  
  Electron并没有固定的文件目录约定，截图中的是一种常见的项目目录方式。
• 修改package.js

{
  "name": "mytest", //你的项目名
  "version": "1.0.0",
  "description": "",
  "main": "./app/main.js",//项目的入口
  "scripts": {
    "start": "electron .",//项目采用electron启动
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Zhou Huang",//项目作者署名
  "license": "ISC",//项目使用的许可证
  "devDependencies": {
    "electron": "^19.0.8"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15