【Electron】Electron入门实现

Electron 学习笔记

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

Electron 的主要特点有：

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

0.前提条件

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

node -v
npm -v

在这里插入图片描述

注意 因为 Electron 将 Node.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. author 与 description 可以任意设置，但对于 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）

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

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

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

Linux 和 Windows 应用在没有窗口打开的场景，认为应用是退出状态。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.js 和 Electron 的版本号以及以来信息输出到 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.js 的 process.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/

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

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

相关文章

海外仓一件代发业务优化指南：成本构成分析及优化策略

海外仓一件代发业务优化指南：成本构成分析及优化策略

一件代发是大部分海外仓的核心业务&#xff0c;不过随着海外仓市场竞争的加剧&#xff0c;仓库经营成本上涨成了普遍现象。 今天我们会结合众多海外仓的实际情况&#xff0c;综合分析海外仓一件代发业务成本的构成&#xff0c;成本激增的原因以及对应的优化策略&#xff0c;希…
阅读更多...
仓库选址问题【数学规划的应用(含代码)】阿里达院MindOpt

仓库选址问题【数学规划的应用(含代码)】阿里达院MindOpt

本文主要讲述使用MindOpt工具优化仓库选址的数学规划问题。 视频讲解&#x1f448;&#x1f448;&#x1f448;&#x1f448;&#x1f448;&#x1f448;&#x1f448;&#x1f448;&#x1f448; 一、案例场景 仓库选址问题在现代物流和供应链管理中具有重要的应用。因为仓库…
阅读更多...
findfont: Generic family ‘sans-serif‘ not found because none of the ...: SimHei

findfont: Generic family ‘sans-serif‘ not found because none of the ...: SimHei

警告过程 python代码在使用matplotlib画图时&#xff0c;如果在title&#xff0c;xlabel&#xff0c;ylabel中出现了中文&#xff0c;则会出现字体警告&#xff0c;中文字符显示为方框 例如代码&#xff1a; # matplotlib画图# 设置色带plt.imshow(data, cmapplt.cm.YlGn) #…
阅读更多...
【AI大模型】应用开发基础，学到就是赚到！

【AI大模型】应用开发基础，学到就是赚到！

前言 1、了解大模型能做什么 2、整体了解大模型应用开发技术栈 3、浅尝OpenAI API的调用 AI全栈工程师&#xff1a;懂AI、懂编程、懂业务的超级个体&#xff0c;会是AGI&#xff08;Artificial General Intelligence 通用人工智能&#xff09;时代最重要的人。 知识体系 AI学习…
阅读更多...
【Mybatis 与 Spring】事务相关汇总

【Mybatis 与 Spring】事务相关汇总

之前分享的几篇文章可以一起看&#xff0c;形成一个体系 【Mybatis】一级缓存与二级缓存源码分析与自定义二级缓存 【Spring】Spring事务相关源码分析 【Mybatis】Mybatis数据源与事务源码分析 Spring与Mybaitis融合 SpringManagedTransaction&#xff1a; org.mybatis.spri…
阅读更多...
Ubuntu/Linux调试安装南京来可CAN卡

Ubuntu/Linux调试安装南京来可CAN卡

准备好USB rules文件和can driver文件备用! 必做&#xff1a;放置USB rules文件到对应位置处理权限问题 而后&#xff1a;安装内核driver并编译。需求众多依赖编译环境&#xff0c;视情况安装填补。如GCC,G,make等等 进入对应64bit文件夹中&#xff0c;添加权限&#xff0c;执…
阅读更多...
爬虫：爬取知乎热榜一级评论及回答2024不包含翻页

爬虫：爬取知乎热榜一级评论及回答2024不包含翻页

一、先上结果&#xff08;注:本文仅为兴趣爱好探究&#xff0c;请勿进行商业利用或非法研究&#xff0c;负责后果自负&#xff0c;与作者无关&#xff09; 1、爬标题及其具体内容 2、抓标题下的对应回答 3、爬取对应一级评论 二、上流程 1、获取cookies&#xff08;相信哥哥姐姐…
阅读更多...
Qt Creator创建一个用户登录界面

Qt Creator创建一个用户登录界面

目录 1 界面设计 2 代码 2.1 登录界面 2.2 注册界面 2.3 登陆后的界面 3 完整资源 这里主要记录了如何使用Qt Creator创建一个用户登录界面&#xff0c;能够实现用户的注册和登录功能&#xff0c;注册的用户信息存储在了一个文件之中&#xff0c;在登录时可以比对登录信息…
阅读更多...
大厂程序员上班猝死成常态？

大厂程序员上班猝死成常态？

大家好&#xff0c;我是瑶琴呀&#xff0c;拥有一头黑长直秀发的女程序员。 近日&#xff0c;连续看到大厂程序员猝死、低血糖晕倒的新闻&#xff0c;同为程序员感到很难受。互联网加班成常态这是既定事实&#xff0c;尤其在这个内卷严重、经济不景气的环境中&#xff0c;加班…
阅读更多...
actual combat 31 —— 多级表头excel导出

actual combat 31 —— 多级表头excel导出

设置模板占位符 &#xff08;模板占位符表头不带点&#xff0c;非表头数据行带点&#xff0c;举例{.ago}&#xff0c;{ago}&#xff09;引入easyExcel依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><v…
阅读更多...
【深度学习】图形模型基础(1):使用潜在变量模型进行数据分析的box循环

【深度学习】图形模型基础(1):使用潜在变量模型进行数据分析的box循环

1.绪论 探索数据背后的隐藏规律&#xff0c;这不仅是数据分析的艺术&#xff0c;更是概率模型展现其威力的舞台。在这一过程中&#xff0c;潜在变量模型尤为关键&#xff0c;它成为了数据驱动问题解决的核心引擎。潜在变量模型的基本理念在于&#xff0c;那些看似复杂、杂乱无…
阅读更多...
uniapp加载打点点效果

uniapp加载打点点效果

uniapp加载打点点效果 背景实现思路代码实现尾巴 背景 为了增加系统的交互性&#xff0c;我们在加载数据时通常会增加一些loading动效&#xff0c;但是在某些场景下只需要一些简单文字提醒。比如说使用【加载中】或者【loading】等字段&#xff0c;但是写静态的字符又显得交互…
阅读更多...
新手必备！短视频剪辑常用的18个技巧——剪映篇

新手必备！短视频剪辑常用的18个技巧——剪映篇

导入素材&#xff1a;这里我们可以选择自己拍摄好的素材&#xff08;图片、视频或录制好的音频&#xff09;&#xff0c;按照顺序导入剪辑区剪辑。这一步是剪辑的基础&#xff0c;确定剪辑的大体思路与成片框架&#xff01;别忽略了&#xff0c;剪映官方素材库提供的素材&#…
阅读更多...
Windows宝塔面板部署ThinkPHP8.0创建Vue项目案例

Windows宝塔面板部署ThinkPHP8.0创建Vue项目案例

安装ThinkPHP8.0 登录宝塔面板&#xff0c;创建一个站点。 输入composer代码&#xff0c;执行完成后自动创建TP目录 composer create-project topthink/think tp 网站目录设置为tp&#xff0c;运行目录设置为public 设置PHP版本为8.0以上&#xff0c;不然会出现下面的报错代…
阅读更多...
中科驭数第三代DPU芯片K2-Pro，专为数据中心打造的“六边形战士”

中科驭数第三代DPU芯片K2-Pro，专为数据中心打造的“六边形战士”

近日&#xff0c;中科驭数重磅发布第三代DPU芯片K2-Pro&#xff0c;是国内首颗面向量产的全功能芯片&#xff01; K2-Pro采用自主研发的Kernel Processing Unit架构&#xff0c;集网络、存储、安全及计算等多业务卸载功能于一体&#xff0c;包处理速率翻倍至80Mpps&#xff0c…
阅读更多...
vue3+ts+vite项目报错：找不到名称“GC”。ts-plugin(2304)

vue3+ts+vite项目报错：找不到名称“GC”。ts-plugin(2304)

GC变量通过script标签引入的第三方引入&#xff0c;但是ts-plugin并不知道&#xff0c;需要明确声明这个变量的类型 /// <reference types"vite/client" />declare module "*.vue" {import type { DefineComponent } from "vue";// eslint…
阅读更多...
代表与民众的联系如何通过数字人大平台加强？正宇软件有方法

代表与民众的联系如何通过数字人大平台加强？正宇软件有方法

在数字时代的大潮中&#xff0c;数字中国建设已成为国家战略&#xff0c;数字人大平台作为战略中的组成部分&#xff0c;正逐步展现出其独特价值和重要作用。随着国家政策的引导与推动&#xff0c;数字人大平台不仅为人大代表履职提供了新工具&#xff0c;更为加强人大代表与民…
阅读更多...
ctfshow web入门 sqli-labs web517--web524

ctfshow web入门 sqli-labs web517--web524

web517 注入点id ?id-1’union select 1,2,3– 确认是否能够注入 ?id-1union select 1,database(),3-- 爆出库名 security爆出表名 ?id-1union select 1,(select group_concat(table_name) from information_schema.tables where table_schemasecurity),3-- emails,refer…
阅读更多...
墨刀原型-单选按钮场景交互

墨刀原型-单选按钮场景交互

画原型过程中&#xff0c;会遇到单选或多选的交互场景 这时就可以直接在基础组件部分&#xff0c;拉取单选按钮直接使用&#xff0c;只需要完成对应的交互事件就可实现交互 首先先说单选按钮实现交互 拉取一个单选组件&#xff0c;右侧可调整样式尺寸&#xff0c;在选项部分&…
阅读更多...
生命在于学习——Python人工智能原理（2.5.1）

生命在于学习——Python人工智能原理（2.5.1）

五、Python的类与继承 5.1 Python面向对象编程 在现实世界中存在各种不同形态的事物&#xff0c;这些事物之间存在各种各样的联系。在程序中使用对象来映射现实中的事物&#xff0c;使用对象之间的关系描述事物之间的联系&#xff0c;这种思想用在编程中就是面向对象编程。 …
阅读更多...
最新文章

Copyright @ 2022~2023