前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >浅谈electron

浅谈electron

作者头像
小吕
发布2022-06-15 21:51:05
2.1K0
发布2022-06-15 21:51:05
举报
文章被收录于专栏:小吕小吕

官网: https://www.electronjs.org/

使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序

Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象,可以构建跨平台桌面程序, 本身支持node.js,可以使用node.js的一些模块

主进程

Electron 中,运行 package.json 主脚本的过程称为主进程 (main process)。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI (图形用户界面(Graphical User Interface)。

一个 Electron 应用有且只有一个主进程。并且创建窗口等所有系统事件都要在主进程中进行。 由于 main 进程本质上是一个完整的 node 环境,所以除了以下两个文件之外,并没有什么初始的项目结构。

src/main/index.js

这个文件是你应用程序的主文件,electron 也从这里启动。它也被用作 webpack 产品构建的入口文件。所有的 main 进程工作都应该从这里开始。

app/src/main/index.dev.js

这个文件专门用于开发阶段,因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以用于扩展你开发的需求。

渲染进程

由于 Electron 使用 Chromium 显示网页,那么,Chromium 的多进程架构也被使用。Electron 中的每个网页都在自己的进程中运行,称为渲染器进程 (renderer process)

在正常的浏览器中,网页通常运行在沙盒封装化的环境中,并且不允许访问本机资源。然而,Electron 用户有权在网页中使用 Node.js 的 API,从而允许较低级别的操作系统交互。

Chromium是由Google主导开发的网页浏览器 Chromium

也就是说每创建一个 web 页面都会创建一个渲染进程。每个 web 页面都运行在它自己的渲染进程中。每个渲染进程是独立的,它只关心它所运行的页面。

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程中运行。当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的,并且只关心他们自己的网页。

使用Electron的API

Electron 在主进程和渲染进程中提供了大量 API 去帮助开发桌面应用程序, 在主进程和渲染进程中,可以通过require() 方法将其包含在模块中,以此获取 ElectronAPI

引入 electron:

代码语言:javascript
复制
const electron = require('electron');

所有 Electron 的 API 都被指派给一种进程类型。许多 API 只能被用于主进程或渲染进程中,但其中一些 API 可以同时在上述两种进程中使用。 每一个 API 的文档都将声明我们可以在哪种进程中使用该 API 。

Electron 中的窗口是使用 BrowserWindow 类型创建的一个实例, 它只能在主进程中使用,如下所示:

代码语言:javascript
复制
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

主进程和渲染进程之间通信

Electron 的主进程是在后台运行,对应 main.js 文件。而渲染进程是前端看到的,对应 index.html 文件。这个两个进程之间的通信首选 ipc 方式,因为它会在完成时返回,而不会阻止同一进程中的其他操作。

IPC(Inter-Process Communication,进程间通信 IPC

异步通信

异步通信,在发送消息之后,不会阻止同一进程中程序的继续运行。下列示例渲染进程发送异步消息 ping 到主进程,然后主进程回答 pong。

示例: 渲染器进程:

代码语言:javascript
复制
const ipc = require('electron').ipcRenderer

const asyncMsgBtn = document.getElementById('async-msg')

asyncMsgBtn.addEventListener('click', function () {
  ipc.send('asynchronous-message', 'ping')
})

ipc.on('asynchronous-reply', function (event, arg) {
  const message = `异步消息回复: ${arg}`
  document.getElementById('async-reply').innerHTML = message
})
主进程:
代码语言:javascript
复制
const ipc = require('electron').ipcMain

ipc.on('asynchronous-message', function (event, arg) {
  event.sender.send('asynchronous-reply', 'pong')
})
同步消息

除了以异步方式在进程之间发送消息,我们还可以使用 ipc 模块在进程之间发送同步消息,但是此方法的同步特性意味着它在完成任务时会阻止其他操作。

示例: 渲染器进程:

代码语言:javascript
复制
const ipc = require('electron').ipcRenderer

const syncMsgBtn = document.getElementById('sync-msg')

syncMsgBtn.addEventListener('click', function () {
  const reply = ipc.sendSync('synchronous-message', 'ping')
  const message = `同步消息回复: ${reply}`
  document.getElementById('sync-reply').innerHTML = message
})

主进程:

代码语言:javascript
复制
const ipc = require('electron').ipcMain

ipc.on('synchronous-message', function (event, arg) {
  event.returnValue = 'pong'
})

读写本地文件

使用 electron 的一大好处是 可以访问用户的文件系统。这使你可以读取和写入本地系统上的文件。为了避免 Chromium 的限制以及对应用程序内部文件的改写,请确保使用 electron 的 API,特别是 app.getPath(name) 函数。这个帮助函数可以使你获得指向系统目录的文件路径,如用户的桌面、系统临时文件 等等

electron - vue

https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序
    • 主进程
      • 渲染进程
        • 主进程与渲染进程的区别
        • 使用Electron的API
          • 引入 electron:
            • 异步通信
            • 主进程:
            • 同步消息
        • 主进程和渲染进程之间通信
        • 读写本地文件
        • electron - vue
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档