Electron 安装以及搭建一个工程

安装Node.js

在使用Electron进行开发之前，需要安装 Node.js。 官方建议使用最新的LTS版本。
检查 Node.js 是否正确安装：

# 查看node版本
node -v
# 查看npm版本
npm -v

注意
开发者需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 应用程序 不使用系统本地的 Node.js 环境来运行它的代码。
Electron 应用程序 使用它内置的 Node.js 运行时。 这意味着 终端用户 不需要安装 Node.js 环境也可以运行Electron 应用程序。

安装Electron

Electron 应用程序遵循与其他 Node.js 项目相同的结构。

首先创建一个文件夹my-electron-app并在vscode 编译器中打开文件夹。

初始化 npm 包：

npm init

init 初始化命令会提示开发者在项目初始化配置中设置一些值，有几条规则需要遵循：

  • entry point 应为 main.js。
  • author 与 description 可为任意值，但对于应用打包是必填项。

生成的 package.json 文件应该像这样：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "一个测试用的electron项目",
  "main": "main.js",
  "author": "zhangSan", 
  "license": "ISC"
}

在项目中安装electron：

npm install --save-dev electron

# 可以简写
npm i electron -D

注意 ：electron是开发依赖。

electron依赖非常难下载，总是下载到中途就失败了。

查看官方文档：

在运行 npm install electron 时，有些用户会偶尔遇到安装问题。
在大多数情况下，这些错误都是由网络问题导致，而不是因为 electron npm 包的问题。 如 ELIFECYCLE、EAI_AGAIN、ECONNRESET 和 ETIMEDOUT 等错误都是此类网络问题的标志。 最佳的解决方法是尝试切换网络，或是稍后再尝试安装。

fine，意思是网络问题咯，千M网下载不下来也是离谱啊…

解决方案

  1. 如果通过 npm 安装失败，你也可以尝试通过从 electron/electron/release 直接下载 Electron

  2. 如果安装失败并报错EACCESS，可能需要修复npm权限。

  3. 如果上述报错持续出现，unsafe-perm 标志可能需要被设置为 true:

npm install electron --unsafe-perm=true
  1. 在较慢的网络上, 最好使用 --verbose 标志来显示下载进度:
npm install --verbose electron
  1. 如果需要强制重新下载文件, 并且 SHASUM 文件将 force_no_cache 环境变量设置为 true。

我直接使用了第3点和第4点：

npm install electron -D --unsafe-perm=true --verbose

历时半个小时，这个依赖终于下载成功了！ 感天动地！！

在 package.json 配置文件中的scripts字段下增加一条start命令：

{
  "scripts": {
    "start": "electron ."
  }
}

package.json 文件应该像这样：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "一个测试用的electron项目",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "zhangSan",
  "license": "ISC",
  "devDependencies": {
    "electron": "^32.1.2"
  }
}

执行start命令能在开发模式下打开应用：

npm start

执行命令直接就报错了：
没有找到模块main.js，请确认 package.json 中的 main 入口是合法的。
在这里插入图片描述

运行主进程

任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。

执行 npm start 期间，Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件。

在项目的根目录下创建一个名为 main.js 的空文件。

再次执行 npm start ，不再报错，应用成功启动。但是，它不会做任何事，开发者也看不到启动的应用窗口，因为 main.js 是空白文件，没有添加任何代码！

在 main.js 中编写代码，创建⼀个基本窗⼝：

// main.js运⾏在应⽤的主进程上，⽆法访问Web相关API
// main.js主要负责：控制⽣命周期、显示界⾯、控制渲染进程等其他操作。
// 从electron中引入app、BrowserWindow
// app模块: 控制应用程序的事件生命周期。
// BrowserWindow模块: 创建和管理应用程序 窗口
const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 500, // 窗口宽度
    height: 300  // 窗口高度
  })
}
// 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 
app.on('ready', () => {
  // 当app准备好以后，创建窗口
  createWindow()
})

注意
可以通过使用 app.whenReady() API来监听 app 模块的 ready 事件：

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

再次执行 npm start ，应用启动成功，并且能看到应用窗口：

下图是应用自带的菜单：
在这里插入图片描述
如果不要菜单，需要在创建窗口时配置：autoHideMenuBar: true

修改 main.js，在窗口中展示一个远程页面：

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

function createWindow() {
  const win = new BrowserWindow({
    width: 500,
    height: 300,
    autoHideMenuBar: true
  })
  // 展示一个远程页面
  win.loadURL('https://lol.qq.com/main.shtml')
  
  // 可以在这里添加窗口的其他配置和事件处理
}
app.on('ready', () => {
  // 当app准备好的时候，创建窗口
  createWindow()
})

执行npm start，查看效果：
在这里插入图片描述


关于BrowserWindow的更多配置项，请参考官网：BrowserWindow实例属性

加载本地页面

在Electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程url。

创建 pages/index.html 编写内容：：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
    />
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
  </body>
</html>

修改 mian.js 加载本地⻚⾯:

// 加载⼀个本地⻚⾯
win.loadFile('./pages/index.html')

执行npm start，查看效果：
在这里插入图片描述
可以通过快捷键ctrl+shift+i，打开控制台：
在这里插入图片描述

CSP配置说明

语法：

Content-Security-Policy: <policy-directive>; <policy-directive>

这是一个用于设置网页内容安全策略（Content Security Policy，简称 CSP）的 HTML 标签：

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
/>

上述配置的说明：

  • default-src 'self'
    • default-src ：配置加载策略，适⽤于所有未在其它指令中明确指定的资源类型。
    • self ：仅允许从同源的资源加载，禁⽌从不受信任的外部来源加载，提⾼安全性。
  • style-src 'self' 'unsafe-inline'
    • style-src ：指定样式表（CSS）的加载策略。
    • self ：仅允许从同源的资源加载，禁⽌从不受信任的外部来源加载，提⾼安全性。
    • unsafe-inline ：允许在HTML⽂档内使⽤内联样式。
  • img-src 'self' data:
    • img-src ：指定图像资源的加载策略。
    • self ：表示仅允许从同源加载图像。
    • data: ：允许使⽤ data: URI 来嵌⼊图像。这种URI模式允许将图像数据直接嵌
      ⼊到HTML或CSS中，⽽不是通过外部链接引⽤。

HTTP 响应头 Content-Security-Policy 允许站点管理者控制用户代理能够为指定的页面加载哪些资源。除了少数例外情况，设置的政策主要涉及指定服务器的源和脚本结束点。

关于 CSP 的详细说明请参考：MDN-Content-Security-Policy、Electron Security

如果没有配置CSP，控制台会有⼀个安全警告：
在这里插入图片描述

管理窗口的生命周期

创建窗口

  1. 通常在主进程中创建窗口，可以使用 BrowserWindow 类来创建窗口实例。
const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 500,
    height: 300,
    autoHideMenuBar: true
  })
  // 展示一个远程页面
  win.loadURL('https://lol.qq.com/main.shtml')
  
  // 可以在这里添加窗口的其他配置和事件处理
}
app.on('ready', () => {
  // 当app准备好的时候，创建窗口
  createWindow()
})

窗口的显示与隐藏

  1. win.show()：显示窗口。通常在应用启动后或在特定事件触发时调用。
  2. win.hide()：隐藏窗口。可以在需要隐藏窗口的情况下调用，比如最小化到系统托盘时。

窗口最小化、最大化、恢复

  1. win.minimize()：将窗口最小化到任务栏或 Dock。
  2. win.maximize()：最大化窗口。
  3. win.unmaximize()：如果窗口处于最大化状态，可以使用 win.unmaximize()恢复到原始大小。

窗口事件监听

  1. closed 事件：

    • 当窗口关闭时触发。在这个事件处理函数中，可以进行一些清理工作，比如释放资源。
    • win.on('closed', () => { mainWindow = null; });

  2. resize 事件：
    当窗口大小改变时触发。可以在这个事件处理函数中根据新的窗口大小调整应用的布局或进行其他相应的处理。

  3. move 事件：
    当窗口位置改变时触发。可以用于记录窗口位置或进行与窗口位置相关的操作。

关闭所有窗口时退出应用 (Windows & Linux)

在Windows 和 Linux 系统：关闭所有窗口会完全退出应用程序。

为了实现这一点，需要监听 app 模块的 'window-all-closed' 事件。如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。

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

如果没有窗口打开则打开一个窗口 (macOS)

在 Linux 和 Windows 上，应用根本不存在是否被激活的说法，应用要么是有进程，要么是没进程。

但是，在 macOS 上，应用已经不运行了，但是应用处于未激活状态：应用在没有打开任何窗口的情况下也继续运行。
如果激活应用，则检查应用是否 有窗口，没有窗口就在激活应用时会打开新的窗口。

监听 app 模块的 activate 事件来实现：如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。

// 当app准备好后，执⾏createWindow创建窗⼝
app.on('ready', () => {
  createWindow();
  // 当应⽤被激活时
  app.on('activate', () => {
    // 如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

完整的 main.js 如下：

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

function createWindow() {
  const win = new BrowserWindow({
    width: 500, // 窗口宽度
    height: 300, // 窗口高度
    autoHideMenuBar: true // 隐藏菜单栏
  });

  // 在窗口中加载一个远程页面
  win.loadFile('./pages/index.html');
}
app.on('ready', () => {
  // 当app准备好的时候，创建窗口
  createWindow();

  // 在Windows & Linux，应用的所有窗口关闭时，退出应用程序
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })

  // 在macOS，当应⽤被激活时
  app.on('activate', () => {
    // 如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C++中stack和queue的模拟实现

C++中stack和queue的模拟实现

目录 1.容器适配器 1.1什么是适配器 1.2STL标准库中stack和queue的底层结构 1.3deque的简单介绍 1.3.1deque的原理介绍 1.3.2deque的优点和缺陷 1.3.3deque和vector进行排序的性能对比 1.4为什么选择deque作为stack和queue的底层默认容器 2.stack的介绍和模拟…
阅读更多...
MybatisPlus代码生成器的使用

MybatisPlus代码生成器的使用

在使用MybatisPlus以后&#xff0c;基础的Mapper、Service、PO代码相对固定&#xff0c;重复编写也比较麻烦。因此MybatisPlus官方提供了代码生成器根据数据库表结构生成PO、Mapper、Service等相关代码。只不过代码生成器同样要编码使用&#xff0c;也很麻烦。 这里推荐大家使…
阅读更多...
【ios】---swift开发从入门到放弃

【ios】---swift开发从入门到放弃

swift开发从入门到放弃 环境swift入门变量与常量类型安全和类型推断print函数字符串整数双精度布尔运算符数组集合set字典区间元祖可选类型循环语句条件语句switch语句函数枚举类型闭包数组方法结构体 环境 1.在App Store下载Xcode 2.新建项目&#xff08;可以先使用这个&…
阅读更多...
JSR303微服务校验

JSR303微服务校验

一.创建idea 二.向pom.xml添加依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.7.RELEASE</version></parent><properties><java.vers…
阅读更多...
SpringCloud-基于Docker和Docker-Compose的项目部署

SpringCloud-基于Docker和Docker-Compose的项目部署

一、初始化环境 1. 卸载旧版本 首先&#xff0c;卸载可能已存在的旧版本 Docker。如果您不确定是否安装过&#xff0c;可以直接执行以下命令&#xff1a; sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logro…
阅读更多...
数字化那点事：一文读懂数字孪生

数字化那点事：一文读懂数字孪生

一、数字孪生的定义 数字孪生&#xff08;Digital Twin&#xff09;是指通过数字技术构建的物理实体的虚拟模型&#xff0c;能够对该实体进行全方位、动态跟踪和仿真预测。简单来说&#xff0c;数字孪生就是在一个设备或系统的基础上创造一个数字版的“克隆体”&#xff0c;这…
阅读更多...
【RADARSAT Constellation Mission（RCM）卫星星座简介】

【RADARSAT Constellation Mission（RCM）卫星星座简介】

RADARSAT Constellation Mission&#xff08;RCM&#xff09;卫星星座是加拿大太空局&#xff08;CSA&#xff09;的下一代C波段合成孔径雷达&#xff08;SAR&#xff09;卫星星座&#xff0c;以下是对其的详细介绍&#xff1a; 一、基本信息 发射时间&#xff1a;2019年6月…
阅读更多...
在Linux系统安装Nginx

在Linux系统安装Nginx

注意&#xff1a;Nginx端口号是80(云服务器要放行) 我的是基于yum源安装 安装yum源(下面这4步就好了) YUM源 1、将源文件备份 cd /etc/yum.repos.d/ && mkdir backup && mv *repo backup/ 2、下载阿里源文件 curl -o /etc/yum.repos.d/CentOS-Base.repo ht…
阅读更多...
Adobe PR与AE的区别与联系（附网盘地址）

Adobe PR与AE的区别与联系（附网盘地址）

从事视频后期制作的小伙伴&#xff0c;对于PR&#xff08;Premiere&#xff09;和AE&#xff08;After Effects&#xff09;应该不会陌生。随着短视频的兴起&#xff0c;就连我们普通用户&#xff0c;拍摄完视频&#xff0c;都会去糟取精的剪辑一下&#xff0c;而PR正是一款功能…
阅读更多...
【分布式微服务云原生】windows+docker+mysql5.7.44一主一从主从复制

【分布式微服务云原生】windows+docker+mysql5.7.44一主一从主从复制

目录 1. 主库设置2. 从库设置3. 验证主从复制内容汇总表格 摘要&#xff1a; 在Windows系统上通过Docker部署MySQL主从复制&#xff0c;以下是详细的步骤和命令&#xff0c;帮助你设置一主一从的MySQL复制环境。 1. 主库设置 步骤1&#xff1a;运行MySQL主库容器 docker run …
阅读更多...
探索Python网络世界的利器：Requests-HTML库

探索Python网络世界的利器：Requests-HTML库

文章目录 探索Python网络世界的利器&#xff1a;Requests-HTML库背景&#xff1a;为何选择Requests-HTML&#xff1f;什么是Requests-HTML&#xff1f;如何安装Requests-HTML&#xff1f;5个简单库函数的使用方法3个场景下库的使用示例常见Bug及解决方案总结 探索Python网络世界…
阅读更多...
微服务nginx解析部署使用全流程

微服务nginx解析部署使用全流程

目录 1、nginx介绍 1、简介 2、反向代理 3、负载均衡 2、安装nginx 1、下载nginx 2、解压nginx安装包 3、安装nginx​编辑 1、执行configure命令 2、执行make命令 4、启动nginx 1、查找nginx位置并启动 2、常用命令 3、反向代理 1、介绍反向代理配置 1、基础配置…
阅读更多...
【iOS】计算器的仿写

【iOS】计算器的仿写

计算器 文章目录 计算器前言简单的四则运算UI界面事件的逻辑小结 前言 笔者应组内要求&#xff0c;简单实现了一个可以完成简单四则运算的计算器程序。UI界面则是通过最近学习的Masonry库来实现的&#xff0c;而简单的四则运算内容则是通过栈来实现一个简单的四则运算。 简单…
阅读更多...
Halcon实用系列1-识别二维条码

Halcon实用系列1-识别二维条码

在做项目时&#xff0c;之前使用的是某康的智能读码器&#xff0c;综合考虑成本&#xff0c;可通过相机拍照来读取图片的二维码&#xff0c;我这边用Halcon来实现。 Halcon代码如下&#xff1a; *创建模型 create_data_code_2d_model(Data Matrix ECC 200, [], [], DataCodeH…
阅读更多...
5G NR物理信道简介

5G NR物理信道简介

文章目录 NR 上行物理信道PRACHPUCCHPUSCH NR 下行物理信道PBCHPDCCHPDSCH NR 上行物理信道 PRACH PRACH&#xff08;Physical Random Access Channel)物理随机接入信道&#xff0c;用于传导preamble 序列。PRACH 由循环前缀CP、前导序列和保护间隔三部分组成。 PUCCH PUCCH…
阅读更多...
【AI大模型】深入Transformer架构：编码器部分的实现与解析（上）

【AI大模型】深入Transformer架构：编码器部分的实现与解析（上）

目录 &#x1f354; 编码器介绍 &#x1f354; 掩码张量 2.1 掩码张量介绍 2.2 掩码张量的作用 2.3 生成掩码张量的代码分析 2.4 掩码张量的可视化 2.5 掩码张量总结 &#x1f354; 注意力机制 3.1 注意力计算规则的代码分析 3.2 带有mask的输入参数&#xff1a; 3.…
阅读更多...
FOCShield v2.0.4原理图

FOCShield v2.0.4原理图

1.FOCShield v2.0.4原理图,开源原文件用AD制作。用 AD09可以打开。 主要部分为 1.电机驱动芯片部分 2.电流采样部分
阅读更多...
Windows 环境下安装 Anaconda 并适配到 PowerShell 的保姆级教程

Windows 环境下安装 Anaconda 并适配到 PowerShell 的保姆级教程

Anaconda Anaconda 是一个流行的 Python 数据科学和机器学习平台&#xff0c;它包括了 Conda 包管理器、Python 以及数百个用于科学计算的库和工具。Anaconda 旨在简化包和环境管理&#xff0c;使得安装、更新和管理软件包变得容易&#xff0c;同时也能够轻松创建和切换不同的P…
阅读更多...
大数据毕业设计选题推荐-民族服饰数据分析系统-Python数据可视化-Hive-Hadoop-Spark

大数据毕业设计选题推荐-民族服饰数据分析系统-Python数据可视化-Hive-Hadoop-Spark

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…
阅读更多...
【Linux】命令管道

【Linux】命令管道

一、命名管道的介绍 之前的管道博客中介绍的是匿名管道&#xff0c;这个管道的应用的一个限制就是只能在具有公共祖先&#xff08;具有亲缘关系&#xff09;的进程间通信。 如果我们不想在不相关的进程之间交换数据&#xff0c;可以使用FIFO文件来做这项工作&#xff0c;他经常…
阅读更多...
最新文章

Copyright @ 2022~2023