【Electron】Electron入门实现

Electron 学习笔记

Electron 是一个开源框架,允许开发者使用网页技术(HTML、CSS 和 JavaScript)来构建跨平台的桌面应用程序。它由 GitHub 开发并维护,最初是为了支持开发 Atom 编辑器。Electron 结合了 Chromium(用于呈现网页内容)和 Node.js(用于与操作系统交互),因此开发者可以利用大量现有的网页开发技术和工具来构建桌面应用。

Electron 的主要特点有:

  1. 跨平台支持Electron 应用可以运行在 WindowsmacOSLinux 系统上。
  2. 使用网页技术:开发者可以使用熟悉的 HTMLCSSJavaScript 来创建应用程序的用户界面。
  3. 与操作系统交互:通过 Node.jsElectron 应用可以与底层操作系统进行交互,执行文件系统操作、网络请求等。
  4. 自动更新Electron 提供了自动更新的功能,可以轻松地发布和分发应用的更新版本。
  5. 打包和发布Electron 提供工具将应用程序打包成独立的可执行文件,以便于分发。

0.前提条件

在使用 Electron 进行开发之前,需要安装 node.js,使用如下命令进行检查。

node -v
npm -v

在这里插入图片描述

注意 因为 ElectronNode.js 嵌入到其二进制文件中,因此应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。

1.Electron 应用程序的创建

1.1 使用脚手架

Electron 应用程序遵循与其他 Node.js 项目相同的结构,首先创建一个文件夹并初始化 npm 包。

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

在这里插入图片描述

npm init 初始化命令会设置项目的相关值,生成一个 package.json 的配置文件,但在 electron.js 项目中有以下两点需要注意:

  1. entry point 是项目的入口文件,这个文件必须存在。
  2. authordescription 可以任意设置,但对于 electron 应用的打包来说,是必填项。

因此,实际的 package.json 应该是如下的内容:

{"name": "my-electron-app","version": "1.0.0","description": "this is a electron demo.","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "euansu","license": "ISC"
}

然后,使用如下命令,将 electron 包安装到应用的开发依赖中。

npm install --save-dev electron
# 过程中安装 electron 可能会失败,执行如下两行命令
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install --save-dev electron

1.2 运行主进程

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

这里首先是创建入口文件,内容如下所示:

// 引入electron应用和浏览器窗口
const { app, BrowserWindow } = require('electron');// 创建浏览器窗口
const createWindow = () => {// 浏览器窗口实例const mainWindow = new BrowserWindow({width: 600,height: 400,title: 'EuanSu的第一个Electron应用',autoHideMenuBar: true});// 加载页面// mainWindow.loadURL('http://www.baidu.com')// 加载本地文件mainWindow.loadFile('index.html');
};// 当app准备好的时候,调用创建窗口函数
// 在 Electron 中,只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。
app.on('ready', () => {createWindow();
});// 当窗口关闭的时候,退出electron应用
app.on('window-all-closed', () => app.quit());

简单编写一个 html 文件,内容如下所示:

<h1>Hello electron!</h1>

其次,需要配置 script 操作,如下所示,修改 package.json 文件的 scripts 内容。

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron ."
},

配置完成后,在终端环境,执行 npm start 启动 electron 应用。

npm start

在这里插入图片描述

出现一个应用程序的窗口,内容如下所示:

在这里插入图片描述

1.3 管理窗口的声明周期

应用程序的窗口在不同的操作系统下有不同的行为,Electron 将在 app 中实现这些行为的责任交给开发者来实现,也即开发者可以使用 进程 全局的 platform 属性来专门为某些操作系统运行代码。

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

WindowsLinux 操作系统上,关闭所有窗口通常会完全退出一个应用程序。

使用 app.on 监听当前是否处于 window-all-closed(所有窗口被关闭)场景,如果用户不是在 macOS 上运行程序,则调用 app.quit()

app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
1.3.2 如果没有窗口打开则打开一个窗口(macOS

LinuxWindows 应用在没有窗口打开的场景,认为应用是退出状态。macOS应用通常在没有打开任何窗口的情况下也继续运行,并且在没有窗口可用的情况下激活应用时会打开新的窗口。

为了实现这一特性,监听 app 模块的 activate 事件,如果没有任何应用窗口是打开的,则调用 createWindow() 方法。

// app.whenReady() 等同于 app.on('ready',()=>{})
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})

1.4 通过预加载脚本从渲染器访问 Node.js

实现将 Node.jsElectron 的版本号以及以来信息输出到 Electron 应用上。

这里以 Chromium 多进程架构做示范,当 Electron 应用主进程处于 read 状态,应该做的是页面的展示,而不是获取 Node.js 以及相关的依赖信息,创建一个子进程,获取对应的依赖信息,当主进程处于 ready 状态,只需要考虑页面的加载即可。

创建一个名为 preload.js(预加载)JavaScript 文件,内容如下:


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.jsprocess.version 对象,并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文件中。

main.js 文件中使用 BrowserWindow 构造器加载 preload.js 文件。

const { app, BrowserWindow } = require('electron')
// 在你文件顶部导入 Node.js 的 path 模块
const path = require('node:path')// 修改已有的 createWindow() 方法
const createWindow = () => {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})mainWindow.loadFile('index.html')
}
// ...

以上代码有两个 Node.js 的相关内容:

  • __dirname 字符串指向当前正在执行脚本的路径,也即当前目录。
  • path.join 将多个路径连接在一起,创建一个符合不同操作系统的路径字符串。

创建 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'; script-src 'self'"><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.</body>
</html>

启动 Electron 应用。

npm start

出现一个如下所示的窗口内容:

在这里插入图片描述

2.打包并分发 Electron 应用程序

  1. electron-builder 添加到应用的开发依赖中,

    cnpm install --save-dev electron-builder
    
  2. 修改 package.json 项目配置文件,主要修改的内容如下所示:

      
    // 增加build配置
    "build": {"appId": "com.euansu.electron_example", // 应用程序的唯一标识符"productName": "electron_example", // 应用名称"directories": {"output": "release" //打包输出的目录},"win": {"target": [{"target": "nsis", // 指定使用nsis作为安装程序格式"arch": ["x64" // 生成 64 位按转包]}]},"nsis":{"oneClick": false, // 安装程序显示安装向导界面"allowToChangeInstallationDirectory": true // 允许用户选择安装目录}}
    
  3. 执行如下脚本,打包 Electron 应用。

    npm run build
    

    在这里插入图片描述

    打包完成后,在 release 目录下能找到输出的程序。

    在这里插入图片描述

  4. 安装测试。

    在这里插入图片描述

    安装完成后能够正常运行。

    在这里插入图片描述

3.参考链接

[1] Electron 快速入门 https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

[2] BrowserWindow官方文档 https://www.electronjs.org/zh/docs/latest/api/browser-window

[3] Electron 流程模型 https://www.electronjs.org/zh/docs/latest/tutorial/process-model

[4] electron-build 官方文档 https://www.electron.build/

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

密码学及其应用 —— 对称加密技术

1. 对称加密、流加密和块加密 1.1 对称加密 对称加密&#xff08;也称为密钥加密&#xff09;是一种加密方式&#xff0c;其中加密和解密使用相同的密钥。这种加密方法基于二进制层面的操作&#xff0c;如XOR&#xff08;异或&#xff09;、SHIFT&#xff08;位移&#xff09;…

Redis Stream Redisson Stream

目录 一、Redis Stream1.1 场景1&#xff1a;多个客户端可以同时接收到消息1.1.1 XADD - 向stream添加Entry&#xff08;发消息 &#xff09;1.1.2 XREAD - 从stream中读取Entry&#xff08;收消息&#xff09;1.1.3 XRANGE - 从stream指定区间读取Entry&#xff08;收消息&…

【DevExpress】WPF DevExpressMVVM 24.1版本开发指南

DevExpressMVVM WPF 环境安装 前言重要Bug&#xff08;必看&#xff09;环境安装控件目录Theme 主题LoginWindow 登陆窗口INavigationService 导航服务DockLayout Dock类型的画面布局TreeView 树状列表注意引用类型的时候ImageSource是PresentationCore程序集的博主找了好久&am…

[笔记] keytool 导入服务器证书和证书私钥

背景 我当前手头已有一个服务器证书和对应的私钥&#xff0c;现在需要转换为 Java KeyStore 格式使用&#xff0c;找了一大圈才发现 keytool 无法直接导入服务器证书和私钥&#xff0c;当然证书可以直接导入&#xff0c;但是私钥是无法直接导入。找了一大圈发现可以先将服务器…

LeetCode题解:1669. 合并两个链表,JavaScript,详细注释

原题链接&#xff1a; https://leetcode.cn/problems/merge-in-between-linked-lists/ 解题思路&#xff1a; 注意该题传入的a和b是链表的索引&#xff0c;而不是节点的值先遍历list1&#xff0c;找到a-1和b1节点将a-1的next指向list2的头节点在将list2的尾节点的next指向b1节…

Navicat 外网连接 mysql (1、通过SSH方式内网访问 2、对外开放3306端口)

1、通过SSH方式内网访问 直接常规方式使用IP、账号密码连接&#xff0c;失败 SSH方式&#xff1a; 常规 选项卡中&#xff1a;localhost录入数据库账号密码 SSH 选项卡中&#xff1a;勾选使用SSH&#xff0c;输入服务器IP、账号、密码 如果出现该错误&#xff0c;可能是服务器…

计算机网络重点名词解释整理

名词解释 GPTVersion 一、网络协议 网络协议 数据交换的规则 组成&#xff1a;语义、语法、定时 二、DHCP DHCP 动态规划主机配置协议 作用&#xff1a;让计算机自动获取IP地址 特点&#xff1a;即插即用&#xff0c;不需要手动设置 三、信号的基本调制方法以及定义 …

Windows下activemq开启jmx

1.activemq版本信息 activemq&#xff1a;apache-activemq-5.18.4 2.Windows下activemq开启jmx 1.进入activemq conf目录&#xff0c;备份activemq.xml文件 2.编辑activemq.xml文件&#xff0c;在broker节点增加useJmx"true" <broker xmlns"http://active…

C++循环队列 自定义queue

原理解析 看main部分的注释&#xff0c;对照着函数&#xff0c;应该能看懂。 #include <iostream> class Queue {public:static constexpr int MAX_SIZE 5;int items[MAX_SIZE];int front, rear;Queue() : front(-1), rear(-1) {}void enqueue(int value) {if ((rear …

理解 Vue.js 中的 immediate: true

理解 Vue.js 中的 immediate: true 在使用 Vue.js 时&#xff0c;监听器 (watchers) 是一种非常重要的工具&#xff0c;它允许我们观察和响应数据的变化。在定义监听器时&#xff0c;我们通常会在组件的 watch 选项中添加相关配置。immediate: true 是其中的一个配置选项。本文…

无线通讯几种常规天线类别简介

天线对于无线模块来说至关重要&#xff0c;合适的天线可以优化通信网络&#xff0c;增加其通信的范围和可靠性。天线的选型对最后的模块通信影响很大&#xff0c;不合适的天线会导致通信质量下降。针对不同的市场应用&#xff0c;天线的材质、安置方式、性能也大不一样。下面简…

近期计算机领域的热点技术

随着科技的飞速发展&#xff0c;计算机领域的新技术、新趋势层出不穷。本文将探讨近期计算机领域的几个热点技术趋势&#xff0c;并对它们进行简要的分析和展望。 一、人工智能与机器学习 人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;是近年来计算…

基于Vue 3.x与TypeScript的PPTIST本地部署与无公网IP远程演示文稿

文章目录 前言1. 本地安装PPTist2. PPTist 使用介绍3. 安装Cpolar内网穿透4. 配置公网地址5. 配置固定公网地址 前言 本文主要介绍如何在Windows系统环境本地部署开源在线演示文稿应用PPTist&#xff0c;并结合cpolar内网穿透工具实现随时随地远程访问与使用该项目。 PPTist …

[gpt胡说八道篇] 使用Docker快速启动Doris

Docker 是一种轻量级的虚拟化技术&#xff0c;我们可以利用 Docker 快速的在本地启动一个 Doris 的实例&#xff0c;方便进行开发和测试。下面我们来看一下如何操作。 1. 拉取 Docker 镜像 首先&#xff0c;我们需要从 Docker Hub 上拉取 Doris 的镜像。打开终端&#xff0c;输…

Qt Qvariant

QVariant 是 Qt 框架中的一个非常强大的类&#xff0c;它用于存储各种不同类型的数据&#xff0c;并提供了一种统一的方式来处理这些数据。QVariant 可以存储大多数基本数据类型&#xff0c;如整数、浮点数、字符串、日期时间等&#xff0c;以及更复杂的数据类型&#xff0c;如…

ChatGPT的原理可以通俗易懂地介绍

ChatGPT的原理可以通俗易懂地介绍如下&#xff1a; 基础架构&#xff1a; ChatGPT基于OpenAI的GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型&#xff0c;尤其是GPT-3的架构进行构建。GPT模型是一种基于Transformer架构的预训练语言模型&#xff0c;特别…

基于STM32的智能水质监测系统

目录 引言环境准备智能水质监测系统基础代码实现&#xff1a;实现智能水质监测系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统实现4.4 用户界面与数据可视化应用场景&#xff1a;水质管理与优化问题解决方案与优化收尾与总结 1. 引言 智能水质监测系统通过使用STM32嵌…

RISC-V知识总结 —— 向量(扩展)指令集

资源1:晏明 - RISC-V向量扩展指令架构及LLVM自动向量化支持 - 202112118 - 第13届开源开发工具大会&#xff08;OSDTConf2021&#xff09;_哔哩哔哩_bilibili资源2:张先轶 - 基于RISC-V向量指令集优化基础计算软件生态【第12届开源开发工具大会&#xff08;OSDT2020&#xff09…

设计模式(实际项目)-状态机模式

需求背景&#xff1a;存在状态流转的预约单 一.数据库设计 CREATE TABLE appointment (id bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT 主键id,appoint_type int(11) NOT NULL COMMENT 预约类型(0:线下查房...),appoint_user_id bigint(20) NOT NULL COMMENT 预约人…

研导智能科技——AI辅助科研产品开发

人工智能&#xff08;AI&#xff09;技术的飞速发展为科研领域带来了革命性的变化。本公司致力于开发基于人工智能的科研辅助产品&#xff0c;旨在通过智能化手段提高科研人员的工作效率和研究质量。目前&#xff0c;我们成功开发了研导学术平台&#xff08;www.zhiyanxueshu.c…