Electron详解(二):基本使用与项目打包

文章目录

  • 一、electron的基本使用
    • 创建一个 electron 项目
    • 创建应用窗口和页面
  • 二、打包应用程序(window平台)
    • 使用 Electron Forge 打包
    • 打包报错解决方法
  • 三、打包应用程序(Linux平台)
    • electron builder打包

一、electron的基本使用

创建一个 electron 项目

在使用Electron进行开发之前,您需要安装 Node.js,最低工作版本为 14.x,低于 14 的版本在后面的打包过程中可能会报错。

(注意,因为 Electron 将 Node.js 嵌入到其二进制文件中,所以在 electron 应用运行时的 Node.js 版本与你本地电脑中运行的 Node.js 版本无关。)

(虽然您需要在开发环境安装 Node.js 才能编写 Electron 项目,但是 Electron 不使用您系统的 Node.js 环境来运行它的代码。 相反地,它使用 electron 内置的 Node.js 运行时。 这意味着您的终端用户不需要 Node.js 环境也可以运行您的应用。要查看您应用内置的 Node.js 版本,您可以访问主进程 (main process) 或预加载脚本 (preload script) 中的 process.versions 变量。 您也可以参考 electron/releases 仓库中的版本列表。)

Electron 应用程序遵循与其他 Node.js 项目相同的结构,首先创建一个初始 npm 项目:

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

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

在跑完案例所有步骤后最终完整的 package.json 文件应该类似如下:

{"name": "my-electron-app","version": "1.0.0","description": "Hello World!(my test)","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron-forge start","package": "electron-forge package","make": "electron-forge make"},"author": "wenxuehai","license": "ISC","devDependencies": {"@electron-forge/cli": "^6.0.5","@electron-forge/maker-deb": "^6.0.5","@electron-forge/maker-rpm": "^6.0.5","@electron-forge/maker-squirrel": "^6.0.5","@electron-forge/maker-zip": "^6.0.5","electron": "^23.0.0"},"dependencies": {"electron-squirrel-startup": "^1.0.0"}
}

然后,将 electron 包安装到应用的开发依赖中。

npm install --save-dev electron

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

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

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

执行 npm start命令运行 electron 应用,Electron 将依据应用中 package.json配置下main字段中找到对应的入口文件。

创建应用窗口和页面

在为我们的应用创建窗口前,我们先创建加载进该窗口的内容。 在Electron中,各个窗口显示的内容可以是本地HTML文件,也可以是一个远程url。

demo 示例:创建一个 index.html 文件作为窗口页面,main.js 文件作为入口文件,预加载脚本来编辑页面内容。

文件内容分别如下,详细解释可参考官网:https://www.electronjs.org/zh/docs/latest/tutorial/quick-start#运行主进程

<!--index.html--><!DOCTYPE html>
<html><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>你好!</title>
</head><body><h1>你好!</h1>我们正在使用 Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,和 Electron <span id="electron-version"></span>.<!-- 您也可以此进程中运行其他文件 --><script src="./renderer.js"></script>
</body></html>

main.js 内容:

// main.js// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require("electron");
const path = require("path");
const createWindow = () => {// 创建浏览窗口const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, "preload.js"),},});// 加载 index.htmlmainWindow.loadFile("index.html");// 打开开发工具// mainWindow.webContents.openDevTools()
};
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow();app.on("activate", () => {// 在 macOS 系统内, 如果没有已开启的应用窗口// 点击托盘图标时通常会重新创建一个新窗口if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on("window-all-closed", () => {if (process.platform !== "darwin") app.quit();
});
// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件,然后用 require 导入。

perload.js内容:

// preload.js// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
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]);}
});

最后,执行npm start,将打开一个 electron 应用,如下:

在这里插入图片描述

二、打包应用程序(window平台)

Electron 的核心模块中没有捆绑任何用于打包或分发文件的工具。 如果您在开发模式下完成了一个 Electron 应用,可使用electron社区所支持的打包工具来生成特定于平台的程序包,如生成 macOS 上的 Apple Disk Image (.dmg)、Windows 上的 Windows Installer (.msi) 或 Linux 上的 RPM Package Manager (.rpm)等等。

使用 Electron Forge 打包

Electron Forge 是一个处理 Electron 应用程序打包与分发的一体化工具。 在工具底层,它将许多现有的 Electron 工具 (例如 electron-packager、 @electron/osx-sign、electron-winstaller 等) 组合到一起,因此您不必费心处理不同系统的打包工作。

将 Electron Forge 添加到您应用的开发依赖中,并使用其"import"命令设置 Forge 的脚手架,将项目导入至 Electron Forge。命令如下:

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

执行以上命令后,Forge 会将一些脚本添加到您的 package.json 文件中。并且会生成一个配置文件 orge.config.js。

  //..."scripts": {"start": "electron-forge start","package": "electron-forge package","make": "electron-forge make"},//...

要创建可分发文件,请使用项目中的 make 脚本,该脚本最终运行了 electron-forge make 命令。执行命令如下:

npm run make

该 make 命令包含两步:

它将首先运行 electron-forge package ,把您的应用程序 代码与 Electron 二进制包结合起来。 完成打包的代码将会被生成到一个特定的文件夹中。
然后它将使用这个文件夹为每个 maker 配置生成一个可分发文件。
Electron-forge 会创建 out 文件夹,其中包括可分发文件与一个包含其源码的文件夹。在该文件夹下可以找到安装包 setup.exe 和运行程序 exe。

在这里插入图片描述

在这里插入图片描述

打包报错解决方法

运行以下命令可以会报错:

npx electron-forge import

报错信息如下:

在这里插入图片描述

这是因为 node 版本过低导致的,使用 electron 时 node 最低需要 14.x 版本。

三、打包应用程序(Linux平台)

本来 electron-builder是支持在windows下开发,然后一条命令打包到不同平台的,但此命令需要使用远程服务器来完成打包,然后此服务器已经停止很长时间了,而且从官方文档可感知后续不会开启。所以要打linux包必须到linux平台下打包。

Windows下无法打linux版本的包,如果你要打linux系统的amd64架构需要找一台linux amd64的系统打包,也可以在amd64下打arm架构的包,但是不能运行,需要放到arm架构的系统里才能运行。

electron builder打包

参考:https://blog.51cto.com/u_12303347/5424258、https://www.cnblogs.com/tuyile006/p/16399745.html

照上述步骤打包可能会报错,如下:

在这里插入图片描述

这是因为 ico 图标不支持 Linux系统,此时应该找到代码中所有用到 favicon.ico 的地方,将其改为 xxx.png ,即改成png图片,并将该 png 图片放在跟之前 favicon.ico 相同位置上。(实际上应该只需要改electron-builder.json5文件即可。)

打包成功后,在 release 目录下将会生成一个 AppImage 文件,该文件就是 Linux 系统上的可执行文件。

在这里插入图片描述

先赋予该文件可执行权限,然后再直接执行即可:

// 赋予AppImage文件可执行权限:
chmod a+x AppImage文件的路径
//运行AppImage程序(下面如果是通过root用户运行,则可能需要加上 --no-sandbox参数)
./AppImage文件   

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

Baltamatica 北太天元 —— 基于模拟退火算法的旅行商问题

文章目录 北太天元&#xff08;Baltamatica&#xff09;简介Baltamatica 复现基于Matlab的旅行商问题问题描述模拟退火算法Metropolis准则算法流程图&#xff1a; Demo1&#xff1a;只考虑累计距离&#xff0c;通过模拟退火算法求解最短路径matlab代码&#xff1a;Baltam代码&a…

win如何使用OpenSSL生成自签名证书,使 http 升级为 https

win如何使用OpenSSL生成自签名证书&#xff0c;使 http 升级为 https 前言 HTTPS其实就是HTTP over SSL&#xff0c;也就是让HTTP连接建立在SSL安全连接之上。 创建自签名证书需要安装openssl。参考本文安装OpenSSL部分。 使用OpenSSL生成自签名证书的步骤&#xff1a;参考…

给LLM装上知识:从LangChain+LLM的本地知识库问答到LLM与知识图谱的结合

第一部分 基于LangChain ChatGLM-6B的本地知识库问答的应用实现 1.1 什么是LangChain&#xff1a;连接本地知识库与LLM的桥梁 作为一个 LLM 应用框架&#xff0c;LangChain 支持调用多种不同模型&#xff0c;提供相对统一、便捷的操作接口&#xff0c;让模型即插即用&#x…

从零实现深度学习框架——Seq2Seq机器翻译实战

引言 本着“凡我不能创造的&#xff0c;我就不能理解”的思想&#xff0c;本系列文章会基于纯Python以及NumPy从零创建自己的深度学习框架&#xff0c;该框架类似PyTorch能实现自动求导。 &#x1f4a1;系列文章完整目录&#xff1a; &#x1f449;点此&#x1f448; 要深入理解…

Android Studio实现内容丰富的安卓自行车租赁平台

如需源码可以添加q-------3290510686&#xff0c;也有演示视频演示具体功能&#xff0c;源码不免费&#xff0c;尊重创作&#xff0c;尊重劳动。 项目编号105 1.开发环境 android stuido jdk1.8 eclipse mysql tomcat 2.功能介绍 安卓端&#xff1a; 1.注册登录 2.查看公告 3.查…

使用itextpdf填充表单域并生成pdf

文章目录 前言一、准备工作1.1 安装软件1.2 准备pdf1.3 设置表单域 二、创建项目三、编写代码3.1 编写工具类3.2 测试 四、测试结果 前言 最近手上有个任务&#xff0c;就是需要做一个pdf导出的功能。 可选择的技术点比较多&#xff0c;我这边综合考虑之后&#xff0c;使用的…

【单例模式】—— 每天一点小知识

&#x1f4a7; 单例模式 \color{#FF1493}{单例模式} 单例模式&#x1f4a7; &#x1f337; 仰望天空&#xff0c;妳我亦是行人.✨ &#x1f984; 个人主页——微风撞见云的博客&#x1f390; &#x1f433; 《数据结构与算法》专栏的文章图文并茂&#x1f995;生动形…

基于卷积变分自动编码器的3D数据处理与重建【CVAE】

在这个项目中&#xff0c;我们将学习如何使用卷积变分自动编码器 (CVAE) 来处理和重建 3D 湍流数据。 我们使用计算流体动力学 (CFD) 方法生成 3D 湍流立方体&#xff0c;每个 3D 立方体沿着三个速度分量携带物理信息&#xff08;与图像数据类似&#xff0c;被视为单独的通道&…

Http host 标头攻击

一、什么是http host 标头攻击 HTTP Host 标头攻击是一种网络安全攻击技术&#xff0c;利用了 HTTP 协议中的 Host 标头字段的漏洞。Host 标头字段用于指定客户端请求的目标主机名或域名。 攻击者可以通过构造恶意的 HTTP 请求&#xff0c;伪造或篡改 Host 标头字段的值&#x…

Linux系统安全:安全技术和防火墙

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、Linux系统安全&#xff1a;安全技术和防火墙1.安全技术&#xff1a;2.入侵防御系统 (Intrusion Prevention System) :3.防火墙 ( Erewall ) :4.防水墙&#xff…

GPT模型训练实践(3)-参数训练和代码实践

一、参数训练 GPT模型参数的训练过程宏观上有两个大环节&#xff0c;先从上往下进行推理&#xff0c;再从下往上进行训练&#xff0c;具体过程为&#xff1a; 1、模型初始化参数随机取得&#xff1b; 2、计算模型输出与真实数据的差距&#xff08;损失值和梯度&#xff09; …

Linux 6.5增加对高通开源GPU Adreno 690的支持

导读即将推出的Linux 6.5内核将把对高通Adreno 690 GPU的支持添加到开源的MSM内核图形/显示驱动程序中。A690主要用于骁龙8cx第三代&#xff08;SC8280XP&#xff09;平台&#xff0c;而联想ThinkPad X13s笔记本电脑和其他硬件也采用了该平台。 新的支持将包含近200行代码&…