electron编译环境搭建和第一个桌面应用例子

news2024/9/20 16:38:25

前言

Electron是基于Chromium和Node.js实现的，所以开发人员所需要使用到的前端技术主要包括以下方面：

1、Html、CSS、JavaScript、ES6

2、前端开发工具Vue、Angular、React等的一种

3、其他网络、缓存、通讯、系统、跟踪等前端技术

4、对Vscode编辑器的熟悉

Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

下面介绍环境搭建。

1 安装node js

在使用Electron进行开发之前，需要安装 Node.js。 建议使用最新的LTS版本。下载后直接安装，如果要更换路径，在安装时改下即可。

要检查 Node.js 是否正确安装，请在您的终端输入以下2个命令：

node -v
v18.16.0

npm -v
9.5.1

这两个命令应输出了 Node.js 和 npm 的版本信息。

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

2 npm换源

node js通过npm下载不同的模块，但是可能会因为网络原因下载缓慢或失败，建议换成国内源：

npm config set registry https://registry.npm.taobao.org

# 检查是否成功切换
npm config get registry
https://registry.npm.taobao.org/

3 安装electron

建议先装cnpm，再通过它安装electron，不然直接装electron常常遇到各种失败，cnpm 是 npm 的定制版本，淘宝团队创建，其使用的是淘宝镜像，适用于中国大陆的开发者。

请使用管理员权限打开终端，再输入安装命令，否则可能出现各类权限问题。

可以全局安装，也可以实际进行项目时再在对应的工程下装，这边只用一个版本，采用的是全局安装，后续开发会方便点。

npm i cnpm -g
# -g全局安装
cnpm install electron -g

查看版本信息，完成安装

electron -v

v24.1.2

4 第一个桌面应用

4.1 基础知识

一个基本的 Electron 程序主要由以下几部分组成:

  1. 主进程（Main Process）： Electron 应用程序的主进程，负责控制整个应用程序的生命周期、处理系统级别的操作以及其他一些基础功能，主进程通常通过 Node.js API 实现，例如创建和启动渲染进程，处理菜单和快捷键事件等。

  2. 渲染进程（Renderer Process）： Electron 应用程序的渲染进程，负责显示应用程序的用户界面和处理用户交互，渲染进程通常通过 Web 技术实现，例如 HTML，CSS 和 JavaScript，渲染进程可以通过与主进程通信来执行任务。

  3. 页面（Page）： 渲染进程所显示的页面，通常由 HTML、CSS 和 JavaScript 构成，可以通过 HTML 中的 DOM（Document Object Model） 来访问和操作。

  4. 资源文件（Assets）： 包括应用程序所需的各种文件（例如图像、样式表、JavaScript 库等）以及 Electron 应用程序的配置文件（例如 package.json，main.js 等）。

基本规则

GUI模块或者系统底层的模块只可以在主进程中使用。要使用这些模块，你应当很熟悉主进程vs渲染进程脚本的概念。

  • 主进程脚本看起来像个普通的nodejs脚本。
  • 渲染进程和传统的web界面一样，除了它具有使用node模块的能力。

主进程

在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。

渲染进程

由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。

在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。

主进程与渲染进程的区别

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

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

由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。

Electron 应用的目录结构

your-app/
|-- package.json
|-- main.js
|-- index.js
  • package.json的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。
  • main.js 应该用于创建窗口和处理系统时间。
  • 如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js。

来源：Electron基础学习之Hello world！ - 知乎 (zhihu.com)

4.2 具体例子

参考了官方教程： https://www.electronjs.org/zh/docs/latest/tutorial/quick-start 和 https://zhuanlan.zhihu.com/p/145219052?from_voters_page=true

（1）初始化

在终端命令行输入：

// 手动输入信息，如果嫌弃麻烦直接npm init -y 可以采用默认模板
npm init

init初始化命令会提示您在项目初始化配置中设置一些值 为本教程的目的，有几条规则需要遵循：

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

初始化后，会生成package.json文件，具体长这样：

{
  "name": "hello-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

之后要通过npm启动，需要在"scripts"中添加一行启动命令，记得里面的逗号不能少：

,
    "start": "electron ./index.html"

具体如下：

{
  "name": "hello-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ./index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

如果不通过npm启动，直接用electron程序执行index.js脚本效果也是一样：electron index.html

（2）安装electron依赖

然后，将 electron 包安装到应用的开发依赖中，注意，如果之前‘‘第三步 安装electron‘’已经全局安装了electron，这一步可以省略。

npm install --save-dev electron
（3）新建main.js主进程文件

1）先新建一个main.js文件，输入代码如下：

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var win = null;

app.on('ready',function(){ 
	win = new BrowserWindow({ webPreferences:{nodeIntegration: true} }); 
	win.loadFile('index.html'); 
	// 这边loadFile如果换成win.loadURL('http://www.baidu.com');，就变成一个精简版的浏览器了
	win.on('closed',function(){win=null}); 
});
app.on('window-all-closed', function(){
	app.quit();
});

这个代码也够简单的。不过对于不习惯JavaScript语法的同学，其实也没那么简单，没关系，先把代码运行起来，一定要注意这里的括号问题，可不要少了括号。

（4）新建index.html文件

代码如下：

<html>
	<head>
		<title> 窗口标题</title>
	</head>
	<body>
		<div>hello world!</div>
	</body>
</html>
（5）运行

在终端命令行输入：

npm start

运行成功。

4.3 打包程序

有很多种打包方式，这边用electron-builder。

（1）安装electron-builder
cnpm install electron-builder -g

# 查看版本，看是否安装成功
electron-builder --version
23.6.0
（2）修改配置文件package.json

修改配置文件package.json，增加构建选项和依赖版本，具体如下，实际使用时请务必删除里面注释的内容，json中不支持注释方法，有特定的方法如增加 “comment” 属性，但是不建议。

// scripts增加这个构建工具字段，这边没有把全部内容打出来
"scripts": {
    "dist": "electron-builder"
},
// 增加以下构建字段
"build": {
    "productName": "electron-hello",   // 安装包文件名
	"directories": {
	  "output": "dist"  // 安装包生成目录
	},
	"nsis": {
	  "oneClick": false,  // 是否一键安装
	  "allowToChangeInstallationDirectory": true    // 允许用户选择安装目录
	}
},
"devDependencies": {
	// 可以用^符号表示您安装的是 electron 包的 24.x.x 版本中的最新版本，如^24.1.2
	// 但是这边我试了会报错"  ⨯ Cannot compute electron version from installed node modules - none of the possible electron modules are installed."
	"electron": "24.1.2",
	"electron-builder": "23.6.0"
}

devDependencies需要增加版本号，避免出现下面的问题：

  ⨯ Cannot compute electron version from installed node modules - none of the possible electron modules are installed.
（3）构建应用程序

在命令行中运行

npm run dist

命令，electron-builder 会自动构建和打包您的应用程序。

构建结果：

> hello-electron@1.0.0 dist
> electron-builder

  • electron-builder  version=23.6.0 os=10.0.19045
  • loaded configuration  file=package.json ("build" field)
  • writing effective config  file=dist\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=24.1.2 appOutDir=dist\win-unpacked
  • default Electron icon is used  reason=application icon is not set
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=5m44.666s
  • building        target=nsis file=dist\electron-hello Setup 1.0.0.exe archs=x64 oneClick=false perMachine=false
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z size=1.3 MB parts=1
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z duration=2m1.633s
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z size=731 kB parts=1
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z duration=42.355s
  • building block map  blockMapFile=dist\electron-hello Setup 1.0.0.exe.blockmap

为了避免构建过程中下载依赖包缓慢，建议从 https://github.com/electron/electron/releases 下载最新发布所需的稳定版electron-vxxx-win32-x64.zip（根据平台选择），放入以下目录，不用解压

C:\Users\用户\AppData\Local\electron\Cache

从 https://github.com/electron-userland/electron-builder-binaries/releases/ 下载所需要的包。

根据需要把对应的压缩包复制到以下目录，比如这次需要的是winCodeSign，整个复制到Cache目录下，并解压到当前目录

C:\Users\用户名\AppData\Local\electron-builder\Cache
（4）安装并运行

dist目录下就是打包好的安装包，直接双击安装到所有用户，然后运行即可。

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

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

相关文章

SpringCloud --- 认识微服务、服务拆分和远程调用

SpringCloud --- 认识微服务、服务拆分和远程调用

一、认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢&#xff1f; 1.1、单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;…
阅读更多...
C++学习（day5）

C++学习（day5）

文章目录 一. 静态成员变量和函数(static)1. 静态成员变量2. 静态成员函数 二. 类的继承&#xff08;inhert&#xff09;1. 继承2. 继承的作用3. 一个类B继承类A4. 继承格式5. 子类会继承父类的所有成员6. 当父子类中出现同名的成员时7. **继承中构造函数和析构函数调用顺序**8…
阅读更多...
反垃圾邮件产品测试评价方法示意图

反垃圾邮件产品测试评价方法示意图

声明 本文是学习信息安全技术 反垃圾邮件产品技术要求和测试评价方法. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 反垃圾邮件产品测试评价方法 测试环境 反垃圾邮件产品的典型测试环境如图1所示。 图1 反垃圾邮件产品典型测试环境示意图 测试设…
阅读更多...
快速识别 SLI 指标的方法：VALET

快速识别 SLI 指标的方法：VALET

SLI&#xff0c;Service Level Indicator&#xff0c;服务等级指标&#xff0c;其实就是我们选择哪些指标来衡量我们的稳定性。而 SLO&#xff0c;Service Level Objective&#xff0c;服务等级目标&#xff0c;指的就是我们设定的稳定性目标&#xff0c;比如“几个 9”这样的目…
阅读更多...
Android音视频开发-OpenGL ES正交投影实现方法

Android音视频开发-OpenGL ES正交投影实现方法

本文实例为大家分享了OpenGL ES正交投影展示的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下 绘制正方形 在最开始绘制的六边形里面好像看起来挺容易的&#xff0c;也没有出现什么问题&#xff0c;接下来不妨忘记前面绘制六边形的代码&#xff0c;让我们按照自己的…
阅读更多...
设计模式——组件协作模式之模板方法模式

设计模式——组件协作模式之模板方法模式

文章目录 前言一、“组件协作” 模式二、模板方法模式1、动机2、源码分析讲解①、结构化软件设计②、面向对象软件设计 三、模板方法模式定义四、结构要点总结 前言 一、“组件协作” 模式 现代软件专业分工之后的第一个结果是 “框架与应用程序的划分”&#xff0c;“组件协作…
阅读更多...
部署LVS-NAT群集实验

部署LVS-NAT群集实验

一、 实验准备 负载调度器&#xff1a;内网关 ens33&#xff1a;192.168.109.12&#xff0c;外网关 ens37&#xff1a;12.0.0.1外网 Web节点服务器1&#xff1a;192.168.109.13 Web节点服务器2&#xff1a;192.168.109.14 NFS服务器&#xff1a;192.168.109.11 客户端&#xf…
阅读更多...
C#基础学习--其他主题

C#基础学习--其他主题

目录 概述 字符串 使用StringBuilder类 把字符串解析为数据值 关于可空类型的更多内容 为可空类型赋值 使用空接合运算符 Main方法 文档注释 嵌套类型 析构函数和dispose模式 概述 再本章中会讲解一些重要的杂项知识 字符串 字符串是Unicode字符串数组 字符串是不可…
阅读更多...
ISO-27145故障诊断说明

ISO-27145故障诊断说明

ISO-27145故障诊断说明 2.1 27145目录说明 ISO27145-1: 这里边介绍的是一般信息和用例定义&#xff1b; ISO27145-2: 这里边介绍的是与排放相关的通用数据规则&#xff0c;用于查询&#xff1b; ISO27145-3: 这里边主要介绍了支持的服务 12服务 14服务 19服务 22服务 31服务&…
阅读更多...
【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )

【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )

文章目录 一、移动端页面布局方案1、单独制作的移动端页面2、响应式页面兼容移动端 一、移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问的是不同的页面 , 目前的 京东 / 淘宝 等电商网站移动端页面采取的该方案 ;响应式页面…
阅读更多...
高效编程----VSCode+ChatGPT插件

高效编程----VSCode+ChatGPT插件

VSCode中使用ChatGPT插件 首先在VSCode中打开扩展面板&#xff0c;搜索ChatGPT&#xff0c;安装蓝色圈出插件&#xff0c;如图所示&#xff1a; 安装完成后&#xff0c;需要重启VSCode 注册账号&#xff0c;如图所示&#xff1a; 然后在ChatGPT对话框中输入信息即可使用&#…
阅读更多...
[oeasy]python0137_相加运算_python之禅_import_this_显式转化

[oeasy]python0137_相加运算_python之禅_import_this_显式转化

变量类型 相加运算 回忆上次内容 上次讲了是从键盘输入变量input 函数 可以有提示字符串需要有具体的变量接收输入的字符串 输入单个变量没有问题 但是输入两个变量之后一相加就非常离谱 怎么办呢&#xff1f;&#x1f914; 基本实验 回到 游乐场 做个 实验 两个整数 相加…
阅读更多...
C++STL——map与set的模拟实现

C++STL——map与set的模拟实现

map与set的模拟实现 map与set的部分源码参考改造红黑树红黑树的迭代器补全set与map的实现完整代码 map与set的部分源码参考 map和set的底层都是由红黑树实现的。 所以这里将上次实现的红黑树插入拿来用。 首先想一想&#xff0c;搜索二叉树不能修改值&#xff0c;因为会破坏整…
阅读更多...
第十章 装饰者模式

第十章 装饰者模式

文章目录 前言一、装饰者模式定义装饰者模式 UML图 二、装饰者模式解决星巴克咖啡订单完整代码Drink 抽象 饮料类Coffee 咖啡类继承 Drink 做一个缓冲层Espresso 意大利咖啡 继承 CoffeeLongBlack 咖啡ShortBlack 咖啡装饰者&#xff0c;调料牛奶巧克力豆浆咖啡店测试程序添加 …
阅读更多...
01-yolo算法

01-yolo算法

要点&#xff1a; 归纳 YOLOv5 github 1 YOLO v1 1) 将一幅图像分成SxS个网格(grid cell)&#xff0c;如果某个object的中心 落在这个网格中&#xff0c;则这个网格就负责预测这个object。 2)每个网格要预测B个bounding box&#xff0c;每个bounding box 除了要预测位置之…
阅读更多...
TortoiseSVN使用-合并分支代码

TortoiseSVN使用-合并分支代码

文章目录 3.4.12 合并分支代码TortoiseSVN有2种合并方式演示场景1&#xff1a;&#xff08;合并一个版本范围 Merge a range of revisions&#xff09;演示场景2&#xff1a;&#xff08;合并两个不同的树 Merge two different trees&#xff09;&#xff0c;不设置主分支版本演…
阅读更多...
初窥Edubuntu 23.04：装有教育软件的Ubuntu桌面

初窥Edubuntu 23.04：装有教育软件的Ubuntu桌面

导读4月20日&#xff0c;Edubuntu将作为Ubuntu官方口味卷土重来&#xff0c;作为即将发布的Ubuntu 23.04&#xff08;Lunar Lobster&#xff09;的一部分&#xff0c;所以我认为让你们先看看这个重制版中包含的内容是个好主意。 Edubuntu以前被称为Ubuntu教育版&#xff0c;最…
阅读更多...
Anaconda安装及tensorflow安装

Anaconda安装及tensorflow安装

1.下载Anaconda安装包&#xff0c;并安装好 官网下载网址&#xff1a;https://www.anaconda.com/download/ 清华映像站&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 注意&#xff1a;注意安装anaconda时一定要把环境变量加入windows环境中。若没有…
阅读更多...
C语言---函数介绍详解

C语言---函数介绍详解

生活的全部意义在于无穷地探索尚未知道的东西,在于不断地增加更多的知识——左拉 文章目录 前言函数模块化程序设计方法函数的定义函数的分类函数定义角度库函数自定义函数 函数形式角度无参函数有参函数 函数兼有其他语言中的函数和过程两种功能的角度有返回值函数无返回值函…
阅读更多...
ENVI 国产高分2号（GF-2)卫星数据辐射定标 大气校正 影像融合

ENVI 国产高分2号（GF-2)卫星数据辐射定标 大气校正 影像融合

1.数据 高分2号卫星数据&#xff0c;包含&#xff1a; MSS-1\2多光谱数据&#xff0c;4m分辨率&#xff1b; Pan-1\2全色波段数据&#xff0c;0.8m分辨率。 2.处理软件 ENVI5.3 国产插件下载地址&#xff1a;ENVI App Store (geoscene.cn) 首先下载插件文件&#xff1b; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023