Fork me on GitHub

electron开发基本概念介绍

学习electron对于个人的好处

  • Electron的基础知识,各个内置模块的熟练应用(能够开发一个小软件)
  • 深入了解浏览器的工作原理
  • 理解进程概念和跨进程通信的原理

Electron开发环境的配置

我之前有写过一篇文章有讲过关于electron开发的相关内容.

直接使用electron官网推荐的脚手架进行一个开发就行了。

进程和线程

这个前面也有谈过,同时在学习操作系统的时候也有讲过这个概念了。

什么是Process-进程

  • An instance of a computer program that is being executed
  • electron最最核心的概念就是主进程和渲染进程

我们听音乐看电影电脑跑两个程序这就是两个不同的进程。

什么是Thread-线程

  • 线程是操作系统实际能够进行运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位。(JS是单线程的,它是事件驱动的。)

进程和线程的区别:

  • 内存使用的区别(两个进程分配的内存没有办法共享,但是线程可以)
  • 通信机制的区别(默认情况下进程很难进行通信,但是可以通过ipc通信,线程方便通信)
  • 量级方面的区别

前端里面多线程的场景并没有那么多。

主进程和渲染进程

Electron的底层基于Chromium构建,Chromium本身就是基于多进程构建的,所以Electron作为一个应用程序在运行的时候并不是由多线程在构建,而是多进程(分为主进程和渲染进程,一个窗口就是一个渲染进程)。

主进程

  • 可以使用和系统对接的 Electron API - 创建菜单,上传文件等等
  • 创建渲染进程 - Renderer Process
  • 全面支持 Node.js
  • 只有一个作为整个程序的入口点

渲染进程

  • 可以有多个,每个对应一个窗口
  • 每个都是一个单独的进程
  • 可以使用一部分 Electron Api
  • 全面支持 Node 和 Dom api

我们可以直接使用官网脚手架来构建一次,先删除掉main.js里面之前的代码,然后重新写我们自己的代码,注意electron因为是基于 Node 构建的,所以里面使用的规范为 common js 规范。

1
2
3
4
5
6
7
8
9
10
11
12
13
const { app, BrowserWindow } = require('electron');
app.on('ready', () => {
let mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 使得可以使用node api
nodeIntegration: true
}
})
mainWindow.loadFile('index.html')
})

这样我们相当于创建了一个mainWindow,他就是我们启动的第一个主窗口。

添加一个附加窗口只需要在里面加代码就可以了:

1
2
3
4
5
6
7
8
9
let secondWindow = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
nodeIntegration: true
},
parent: mainWindow
})
secondWindow.loadFile('second.html')

里面有个renderer.js文件是在index.html里面可以引入的一个脚本文件,在里面既可以使用node的 api,同时也可以使用 dom 相关的 api。

不过要注意的是,使用 node 的 api 时要记得将前面进程中的配置设置为true.

1
2
3
window.addEventListener('DOMContentLoaded', () => {
document.getElementById('node-version').innerHTML = process.version;
})

进程间的通信

自行学习ipc文档即可。记得去官网安装一个叫做devtron的调试工具。

1
2
3
4
5
6
# Install Devtron
$ npm install --save-dev devtron
// Run the following from the Console tab of your app's DevTools
require('devtron').install()
// You should now see a Devtron tab added to the DevTools

同时在主进程里面添加一个自动帮助我们打开开发者调式工具的窗口:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const { app, BrowserWindow } = require('electron');
app.on('ready', () => {
require('devtron').install()
let mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadFile('index.html');
mainWindow.webContents.openDevTools();
})

在开发者工具里面就可以找到 devtron 这个工具了。

总结

以上就是一些electron基本底层概念了。

-------------本文结束感谢您的阅读-------------