Electron简介、安装、实践

news2024/11/19 16:48:57

本文中的所有代码均存放在https://github.com/MADMAX110/my-electron-app

Electron是什么？
Electron是一个开源的框架，可以使用JavaScript, HTML和CSS来构建跨平台的桌面应用程序。Electron的核心是由Chromium和Node.js组成，它们分别提供了渲染和主进程的功能。Electron的优势在于它可以利用Web技术来开发用户界面，同时也可以访问本地资源和系统API。嵌入Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建跨平台应用 ——不需要本地开发经验。
Electron的工作原理
它会创建一个主进程和一个或多个渲染进程。主进程负责管理应用程序的生命周期，创建和控制浏览器窗口，以及与操作系统交互。渲染进程则负责显示Web页面，并执行其中的JavaScript代码。主进程和渲染进程之间可以通过IPC（Inter-Process Communication）模块进行通信。
要开始使用Electron，首先需要安装Node.js和npm（Node Package Manager）。然后，可以使用npm来安装Electron，并创建一个基本的项目结构。
基本要求
在进行Electron进行开发之前，需要安装Node.js。
Node.js是一个基于Chrome V8 JavaScript引擎的JavaScript运行环境。它允许JavaScript代码在服务器端执行,并且拥有丰富的包生态系统。
Node.js主要功能包括:

  1. 事件驱动:Node.js使用事件驱动模型,当web server有请求的时候就会触发一个事件,然后响应的函数就会被调用,所以不会造成线程阻塞。
  2. 非阻塞I/O:Node.js使用libuv库,它的非阻塞I/O可以处理大量并发请求。
  3. 单线程:Node.js是单线程的,所以没有线程切换的开销,性能很高。不过在CPU密集任务下性能会受限。
  4. 高性能:使用Google V8引擎,性能很高,非常适合I/O密集型web应用。
  5. 丰富生态:有海量的第三方包,包管理工具npm,可以方便地实现各种功能。
  6. 跨平台:可以在Windows、MacOS、Linux等不同平台上运行。

Node.js典型应用场景:

  1. I/O密集型web应用:高并发请求处理,如聊天服务器,推送服务等。
  2. API编程:使用Express等框架可以方便地编写API。
  3. 测试环境:Javascript在前后端通用,方便编写测试用例。
  4. 工具开发:许多JavaScript工具都是用Node.js开发的,如grunt、gulp、webpack等。
  5. 游戏服务器开发:利用Node.js的高性能和低延时,适合开发游戏服务器。
  6. 命令行程序:可以使用Node.js编写各种CLI工具。

总之,Node.js是一个功能强大的JavaScript运行环境。因为其高性能、高并发、事件驱动等特征,目前已经在许多场景下取代了传统的服务器端技术,是一门非常值得学习的技能。
NodeJs下载地址：https://nodejs.org/en/download，进入选择下载适合你操作系统的版本，
请添加图片描述
双击下载后的安装包运行，一直下一步
在这里插入图片描述
点击树形图标来选择你需要的安装模式安装即可
在这里插入图片描述
勾选安装必须组件，以免以后出现不必要的麻烦，继续安装即可。
安装完后，可以在终端输入node -v和npm -v。若能正确输出nodejs和npm的版本信息，则安装成功。

创建你的应用程序
Electron 应用程序遵循与其他 Node.js 项目相同的结构。 首先创建一个文件夹并初始化 npm 包。
打开终端、输入以下指令

mkdir my-electron-app
cd my-electron-app
npm init

其代表创建一个my-electron-app文件夹并进入，然后init初始化命令会提示在项目初始化配置中设置一些值，设置完之后文件夹中会出现一个package.json文件，在init过程中设置的值错误了也没有关系，可以改动json文件中相应的选项即可。更改完成的json文件应该像这样。

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "FYC",
  "license": "MIT"
}

然后再执行

npm install --save-dev electron

将electron包安装到应用的开发依赖中。
再在刚才的package.json配置文件中的scripts字段下增加一条start命令。
{
“scripts”: {
“start”: “electron .”
}
}
start命令能让您在开发模式下打开应用。

运行主进程
任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。执行期间，Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件。
要初始化这个main文件，需要在您项目的根目录下创建一个名为main.js的空文件。
创建完成之后，就可以运行npm start命令了，然而这时候不会做任何事情，因为还没有在main.js中添加任何代码。

创建页面
在可以为我们的应用创建窗口前，我们需要先创建加载进该窗口的内容。 在Electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程url。这里采用本地HTML的方式。 在项目根目录下创建一个名为index.html的文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
</html>

在窗口中打开页面
现在有了一个页面，要将它加载进应用窗口中，需要两个Electron模块。
app 模块：它控制应用程序的事件生命周期。
BrowserWindow 模块：它创建和管理应用程序 窗口。
在main.js文件头部加入下列代码将两个模块导入作为CommonJS模块：

const { app, BrowserWindow } = require('electron')

然后，在main.js中添加一个createWindow()方法将index.html加载进一个新的BrowserWindow实例。

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  win.loadFile('index.html')
}

如此，便可调用createWindow函数打开窗口，在Electron中，只用在app模块的ready事件被激发后才能创建浏览器窗口。可以使用app.whenReady()来监听该事件，在whenReady成功后调用createWindow。继续在main.js中加入以下代码即可。

app.whenReady().then(() => {
  createWindow()
})

此时再运行npm start便可打开之前创建好的index界面。

管理窗口的生命周期
虽然现在可以打开一个浏览器窗口，还需要额外的模板代码使其看起来像各平台原生的。应用程序再每个操作系统下都有不同的行为，Electron将再app中实现这些约定的责任交给开发者。
一般而言都可以使用process.platform属性获取当前运行的操作系统。
1、关闭所有窗口时退出应用 (Windows & Linux)：
在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。
为了实现这一点，你需要监听 app 模块的 ‘window-all-closed’ 事件。如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。
再main.js中加入以下代码即可实现：

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

2、如果没有窗口打开则打开一个窗口 (macOS)
当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。
为了实现这一特性，监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。
因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。
在main.js中修改whenReady如下即可实现：

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

还可以通过预加载脚本从渲染器访问Node.js
现在要做的使输出Electron版本号和它的依赖项到你的web页面上。
预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。
在文件根目录创建一个名为 preload.js 的新脚本如下：

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

上面的代码访问 Node.js process.versions 对象，并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。
要将此脚本附加到渲染器流程，请在现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。
在main.js中添加修改如下代码

// 需在当前文件内开头引入 Node.js 的 'path' 模块
const path = require('path')

// modify your existing createWindow() function
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}
// ...

这里使用了两个Node.js概念：

__dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)。
path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串。
我们使用一个相对当前正在执行JavaScript文件的路径，这样相对路径将在开发模式和打包模式中都将有效。
此时，整个程序的代码已经完成，可以在终端运行npm start来查看最终效果。

将功能添加到您的网页内容中
对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。 由于渲染器运行在正常的 Web 环境中，因此您可以在 index.html 文件关闭 标签之前添加一个 

<script src="./renderer.js"></script>

renderer.js 中包含的代码可以在接下来使用与前端开发相同的 JavaScript API 和工具。例如使用 webpack 打包并最小化代码，或者使用 React 来管理用户界面。

打包并分发开发好的应用程序
最快捷的打包方式是使用Electron Forge
1、将 Electron Forge 添加到应用的开发依赖中，并使用其"import"命令设置 Forge 的框架：

npm install --save-dev @electron-forge/cli
npx electron-forge import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

2、使用 Forge 的 make 命令来创建可分发的应用程序：

npm run make

> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Electron-forge 会创建 out 文件夹，打包好的软件包将在那里找到。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/541432.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【springboot 开发工具】接口文档我正在使用它生成，舒坦

【springboot 开发工具】接口文档我正在使用它生成，舒坦

前言 先来描述下背景&#xff1a;由于新公司业务属于自研产品开发&#xff0c;但是发现各产品业务线对于接口文档暂时还是通过集成Swagger来维护&#xff0c;准确来说是knife4j&#xff08;Swagger的增强解决方案&#xff09;。但是对于5年的后端开发老说&#xff0c;早就厌倦…
阅读更多...
Java-线程安全的四个经典案例和线程池

Java-线程安全的四个经典案例和线程池

单例模式 有些对象&#xff0c;在一个程序中应该只有唯一 一个实例&#xff08;光靠人保证不靠谱 借助语法来保证&#xff09; 就可以使用单例模式 在单例模式下 对象的实例化被限制了 只能创建一个 多了的也创建不了 单例模式分为两种&#xff1a;饿汉模式和懒汉模式 饿汉模式…
阅读更多...
[Java基础]—SpringBoot

[Java基础]—SpringBoot

Springboot入门 Helloworld 依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.4.RELEASE</version> </parent><dependencies><depend…
阅读更多...
软件测试基础知识整理（四）- 软件开发模型、测试过程模型

软件测试基础知识整理（四）- 软件开发模型、测试过程模型

目录 一、软件开发模型 1.1 瀑布模型 1.1.1 特点 1.1.2 优缺点 1.2 快速原型模型&#xff08;了解&#xff09; 1.2.1 特点 1.2.2 优缺点 1.3 螺旋模型&#xff08;了解&#xff09; 1.3.1 特点 1.3.2 优缺点 二、测试过程模型 2.1 V模型&#xff08;重点&#xff…
阅读更多...
LeetCode_29. 两数相除

LeetCode_29. 两数相除

目录 题目描述 思路分析 我的题解 题目描述 给你两个整数&#xff0c;被除数 dividend 和除数 divisor。将两数相除&#xff0c;要求 不使用 乘法、除法和取余运算。 整数除法应该向零截断&#xff0c;也就是截去&#xff08;truncate&#xff09;其小数部分。例如&#xff…
阅读更多...
8个免费的高质量UI图标大全网站

8个免费的高质量UI图标大全网站

UI图标素材是设计师必不可少的设计元素。 高质量的UI图标会让设计师的设计效率事半功倍。 本文分享8个免费的高质量UI图标大全网站。 即时设计资源社区 即时设计资源广场中精选了多款专业免费的UI图标设计资源&#xff0c;无需下载即可一键保存源文件&#xff0c;同时还提供…
阅读更多...
深入浅析Linux Perf 性能分析工具及火焰图

深入浅析Linux Perf 性能分析工具及火焰图

Perf Event 子系统 Perf 是内置于 Linux 内核源码树中的性能剖析&#xff08;profiling&#xff09;工具。它基于事件采样的原理&#xff0c;以性能事件为基础&#xff0c;支持针对处理器相关性能指标与操作系统相关性能指标的性能剖析。可用于性能瓶颈的查找与热点代码的定位…
阅读更多...
Maven PKIX path building failed 错误提示

Maven PKIX path building failed 错误提示

最近公司的项目突然出现了下面的提示。 PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target -> [Help 2]问题和解决 出现上面的提示的问题是因为 SSL 签名的问题。 …
阅读更多...
经典面试题：理解Cookie和Session之间的区别

经典面试题：理解Cookie和Session之间的区别

文章目录 一、Cookie概念先知1、Cookie是什么&#xff1f;2、Cookie从哪里来&#xff1f;3、Cookie要存到哪里去&#xff1f;4、Cookie是存在哪里的&#xff1f;5、浏览器是如何通过Cookie来记录的&#xff1f;6、Cookie的过期时间有什么用&#xff1f; 二、见见Cookie三、会话…
阅读更多...
软件设计师考试笔记，已通过

软件设计师考试笔记，已通过

目录 系统可靠度 外部实体 内聚类型 编译过程 逆波兰式 前驱图 scrum框架模型 编译和解释 有限自动机 聚簇索引和非聚簇索引 二叉树的前序,中序,后序遍历 动态规划贪心算法 算法 01背包问题 系统可靠度 1. 串联部件可靠度 串联部件想要这条路走通&#xff0c;只有…
阅读更多...
软件测试行业7年了，薪资从10k到了22k，感觉到头了？

软件测试行业7年了，薪资从10k到了22k，感觉到头了？

蜕变之前 明天的希望&#xff0c;让我们忘了今天的痛苦。 怎样区别一个废柴和一个精英&#xff1f;看外貌&#xff0c;看气质&#xff0c;看谈吐&#xff0c;看消费… 有人忙着把人和人进行分类&#xff0c;有人忙着怎么从这一阶层过渡到上一阶层。当你很累的时候&#xff0c…
阅读更多...
引入外部文件实现步骤

引入外部文件实现步骤

1.引入数据库相关依赖 2.创建外部属性文件&#xff0c;properties格式&#xff0c;定义数据信息&#xff1a;用户名 密码 地址等 3.创建spring配置文件&#xff0c;引入context命名空间&#xff0c;引入属性文件&#xff0c;使用表达式完成注入 <beans xmlns"http://w…
阅读更多...
交友项目【集成环信Api】

交友项目【集成环信Api】

目录 1&#xff1a;自动装配 2&#xff1a;查询用户环信账户 3&#xff1a;环信ID查询用户信息 1&#xff1a;自动装配 在项目中集成环信API&#xff0c;完成即时通信等 环信官方文档地址&#xff1a;Java Server SDK [IM 开发文档] 自动装配模块&#xff1a; pom文件相关…
阅读更多...
2.数据结构期末复习之顺序表和链表

2.数据结构期末复习之顺序表和链表

1.表是可以是线性结构 学号姓名19(数据项)jams(数据项)20(数据项)ming(数据项) 19 jams或 20 ming是数据元表单个的是数据项‘’线性结构可以表示为 19 jams->20 ming2.什么是逻辑结构?:具有相同类型的有限序列(元素排序的位置,排兵布阵操作的方法) a1 a2 a3 .... an (空…
阅读更多...
jenkins流水线使用入门示例

jenkins流水线使用入门示例

之前采用Jenkins的自由风格构建的项目&#xff0c;每个步骤流程都要通过不同的方式设置&#xff0c;并且构建过程中整体流程是不可见的&#xff0c;无法确认每个流程花费的时间&#xff0c;并且问题不方便定位问题。 Jenkins的Pipeline可以让项目的发布整体流程可视化&#xf…
阅读更多...
低代码开发大势所趋，这款无代码开发平台你值得拥有

低代码开发大势所趋，这款无代码开发平台你值得拥有

文章目录 什么是低代码iVX和其它低代码的平台的区别没有创新的“拼凑”&#xff0c;没有好东西iVX在线编辑器体验 什么是低代码 低代码&#xff08;Low Code&#xff09;是一种可视化的应用开发方法&#xff0c;用较少的代码、以较快的速度来交付应用程序&#xff0c;将程序员…
阅读更多...
ElasticSearch漫游 (1.安装ELK)

ElasticSearch漫游 (1.安装ELK)

前期准备&#xff1a; 请搭建好linux环境 推荐使用centos7系统请关闭linux防火墙请安装好docker 安装ES 创建网络 我们需要部署kibana容器&#xff0c;因此需要让es和kibana互联&#xff0c;这里先创建一个网络。 docker network create es-net加载es镜像 运行docker命令 部…
阅读更多...
智能无线温振传感器：提高锂电设备故障诊断精度的利器

智能无线温振传感器：提高锂电设备故障诊断精度的利器

当今锂电工厂对于设备可靠性和生产效率的要求越来越高&#xff0c;而设备故障诊断是其中非常重要的一环。针对锂电设备的振动和温度等健康状态的监测&#xff0c;智能无线温振传感器是一款非常有用的工具。 图.太阳能面板生产&#xff08;iStock&#xff09; 智能无线温振传感器…
阅读更多...
和数组处理有关的一些OJ题（JAVA)(ArrayList）

和数组处理有关的一些OJ题（JAVA)(ArrayList）

1、给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须确保时间复杂度为O(N)&#xff0c;空间复杂度为O&#xff0c;并原地修改输入数组。元素的顺序可以改…
阅读更多...
Android系统原理性问题分析 - Android Java框架层的结构

Android系统原理性问题分析 - Android Java框架层的结构

声明 在Android系统中经常会遇到一些系统原理性的问题&#xff0c;在此专栏中集中来讨论下。Android系统&#xff0c;为了能够更好的理解Android的Java世界的运行规律&#xff0c;此篇分析Android Java框架的结构。此篇参考一些博客和书籍&#xff0c;代码基于Android 7.1.1&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023