Electron的安装流程

我心飞翔 分类:javascript

参考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文件:

流程

IMG20210419_105203.jpg

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

负责静态资源缓存。缓存一些网络图片、音频。保证静态资源的稳定加载。

image.png

electron-vue

官方文档中作者提供了很多对开发有用的东西,我推荐学习的同学都通读一遍
传送门: electron-vue文档
electron-vue,作者为我们封装好了一个基于vue框架的脚手架,包括electron所有基本的开发构建工具 和vue配套的请求,路由以及vuex等插件。通过脚手架我们可以直接进入开发阶段,开发的同时,去了解electron的工作机制,之后再开始深入去理解她更深层次的代码逻辑。 先走形,再走心。

juejin.cn/post/691382…

回复

我来回复
  • 暂无回复内容