当前位置： 首页 > news >正文

electron安装及快速创建

news 2026/2/8 16:08:37

electron安装及快速创建

electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。
详细内容见官网：https://www.electronjs.org/zh/docs/latest/。
今天来记录下练习中的安装过程和hello world的创建。

hello world

  1. 创建项目文件夹，并执行npm 初始化命令。
    初始化过程中，会填写一些信息：entry point 应为 main.js，author 与 description 是打包是必填项。
	npm init
  1. 将electron 依赖到项目中，由于官方地址出现网络问题，需要修改镜像地址。
    创建文件.npmrc，并添加如下内容：
	ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
  1. 执行命令：
 	npm install electron --save-dev
  1. 确保package.json文件中有如下内容，用于后续启动项目：
{"scripts": {"start": "electron ."}
}
  1. 创建main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation:false}})// 加载 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 导入。
  1. 创建index.html
<!--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>.<!--您也可以此进程中运行其他文件 --><script src="./renderer.js"></script></body>
</html>
  1. 创建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])}
})
  1. 执行启动命令看效果
	npm start
  1. 打包，以下命令逐行执行后，会产生out文件夹，里面是打包文件。
	npm install --save-dev @electron-forge/clinpx electron-forge importnpm run make
  1. 再记录下关于报错【Uncaught ReferenceError: require is not defined】的解决方法：（1）先确定main.js里new BrowserWindow的webPreferences里是否包含nodeIntegration: true和contextIsolation:false，如下代码。（2）如果没有效果，再加上执行命令npm install -g browserify。
const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true,contextIsolation:false}})

相关文章：

electron安装及快速创建

electron安装及快速创建 electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 详细内容见官网&#xff1a;https://www.electronjs.org/zh/docs/latest/。 今天来记录下练习中的安装过程和hello world的创建。 创建项目文件夹&#xff0c;并执行npm 初始化命…...

编程日记 2024/7/29 11:18:46

需要消化的知识点

需要消化 消灭清单 如何自定义一个Interceptor拦截器&#xff1f; 后端开发可以用上的前端技巧 10个堪称神器的 Java 学习网站. 【前端胖头鱼】11 chrome高级调试技巧&#xff0c;学会效率直接提升666% 【前端胖头鱼】10个我经常逛的“小网站” 【前端劝退师lv-6】Chrome D…...

编程日记 2024/7/29 11:17:44

2024年7月25日（Git gitlab以及分支管理 ）

分布式版本控制系统 一、Git概述 Git 是一种分布式版本控制系统,用于跟踪和管理代码的变更。它是由Linus Torvalds创建的,最 初被设计用于Linux内核的开发。Git允许开发人员跟踪和管理代码的版本,并且可以在不同的开 发人员之间进行协作。 Github 用的就是Git系统来管理它们的…...

编程日记 2024/7/29 11:15:42

pdf格式过大怎么样变小 pdf文件过大如何缩小上传 超实用的简单方法

面对体积庞大的 PDF 文件&#xff0c;我们常常需要寻找有效的方法来缩减其大小。这不仅能够优化存储空间&#xff0c;还能提升文件的传输和打开速度。PDF文件以其稳定性和跨平台兼容性成为工作和学习中的重要文件格式。然而&#xff0c;当我们需要通过邮件发送或上传大文件时&a…...

编程日记 2024/7/29 11:14:40

前端文件下载word乱码问题

记录一次word下载乱码问题&#xff1a; 用的请求是axios库&#xff0c;然后用Blob去接收二进制文件 思路&#xff1a;现在的解决办法有以下几种&#xff0c;看看是对应哪种&#xff0c;可以尝试解决 1.将响应类型设为blob&#xff0c;这也是最重要的&#xff0c;如果没有解决…...

编程日记 2024/7/29 11:13:39

repo中的default.xml文件project name为什么一样？

文章目录 default.xml文件介绍为什么 name 是一样的&#xff0c;path 不一样&#xff1f;总结 default.xml文件介绍 在 repo 工具的 default.xml 文件中&#xff0c;定义了多个 project 元素&#xff0c;每个元素都代表一个 Git 仓库。 XML 定义了多个不同的 project 元素&…...

编程日记 2024/7/29 11:11:36

＜section id=“nice“ data-tool=“mdnice编辑器“ data-webs

大模型日报 2024-07-24 大模型资讯 Meta发布最大Llama 3 AI模型&#xff0c;语言和数学能力提升 摘要: Meta公司发布了其迄今为止最大的Llama 3人工智能模型。该模型主要免费提供&#xff0c;具备多语言处理能力&#xff0c;并在语言和数学方面表现出显著提升。 Meta发布最强AI…...

编程日记 2024/7/29 11:07:32

作业7.26~28

全双工&#xff1a; 通信双方 既可以发送&#xff0c;也可以接收数据 1. 利用多线程 或者 多进程&#xff0c; 实现TCP服务器 和 客户端的全双工通信 思路&#xff1a; 服务器和客户端&#xff0c; 在建立通信以后&#xff0c;可以创建线程&#xff0c;在线程编写另一个功能代…...

编程日记 2024/7/29 11:06:31

自定义webIpad证件相机(webRTC)

该技术方案可用于各浏览器自定义相机开发 相机UI&#xff08;index.html&#xff09; <!DOCTYPE html> <html lang"zh" prew"-1"><head><meta charset"UTF-8"><meta name"viewport"content"user-sc…...

编程日记 2024/7/29 11:02:26

GO发票真伪批量查验方法、数电票查验接口

“教”给机器标注数据的正确率就决定了人工智能判断的正确率。翔云人工智能开放平台的OCR产品经过我们的开发人员精心调“教”&#xff0c;识别率高、识别速度快。 发票&#xff0c;是发生的成本、费用或收入的原始凭证。于公司来说&#xff0c;发票主要是公司做账的依据&…...

编程日记 2024/7/29 10:59:20

【Go系列】Go的UI框架Fyne

前言 总有人说Go语言是一门后端编程语言。 Go虽然能够很好地处理后端开发&#xff0c;但是者不代表它没有UI库&#xff0c;不能做GUI&#xff0c;我们一起来看看Go怎么来画UI吧。 正文 Go语言由于其简洁的语法、高效的性能和跨平台的编译能力&#xff0c;非常适合用于开发GUI…...

编程日记 2024/7/29 10:58:19

.NET MAUI：跨平台开发的未来

常用资源 &#xff08;1&#xff09;.NET MAUI8构建应用文档。 Build your first .NET MAUI app - .NET MAUI | Microsoft Learn 一、什么是 .NET MAUI&#xff1f; .NET Multi-platform App UI (.NET MAUI) 是微软推出的一款跨平台开发框架。作为 Xamarin.Forms 的下一代产…...

编程日记 2024/7/29 10:56:17

VSCode切换默认终端

我的VSCode默认终端为PowerShell&#xff0c;每次新建都会自动打开PowerShell。但是我想让每次都变为cmd&#xff0c;也就是Command Prompt 更改默认终端的操作方法如下&#xff1a; 键盘调出命令面板&#xff08;CtrlShiftP&#xff09;中,输入Terminal: Select Default Prof…...

编程日记 2024/7/29 10:54:14

卫星观测叶绿素的相反信号

Contrasted Trends in Chlorophyll-a Satellite Products 运用卫星产品研究Chl的长时间序列变化时需要注意 Introduction &#xff08;1&#xff09;研究叶绿素的长期变化&#xff0c;需要至少40年的长时间序列&#xff1b; &#xff08;2&#xff09;Tian and Zhang 2023报告…...

编程日记 2024/7/29 10:50:09

2024年最新NVIDIA T4价格表及行业趋势！

英伟达&#xff08;NVIDIA&#xff09;作为目前全球T0级别的GPU制造商&#xff0c;其T4系列显卡以其卓越的计算性能和能效比&#xff0c;在数据中心、云计算及AI领域占据重要地位。 一、NVIDIA T4价格表概览 在探讨NVIDIA T4显卡的价格时&#xff0c;我们需要从直接购买和租赁…...

编程日记 2024/7/29 10:49:07

HTML + CSS编程规范

编程规范 HTML CSS 命名规范 HTML CSS 命名规范 1. 命名需要是具备语义性的单词&#xff0c;不能用 数字 拼音 数字,符号开头正确示范 &#xff1a; wrap description title content错误示范 : aaaa a1 $we 4tdds 2. 命名需要多个单词连接的情况下, 标记语言中可以使用 …...

编程日记 2024/7/29 10:48:06

机器学习之人脸识别-使用 scikit-learn 和人工神经网络进行高效人脸识别

文章摘要 本文将介绍如何使用 Python 的 scikit-learn 库和人工神经网络&#xff08;ANN&#xff09;来识别人脸。我们将使用 LFW 数据集&#xff08;Labeled Faces in the Wild&#xff09;&#xff0c;这是一个广泛用于人脸识别基准测试的大型人脸数据库。我们将展示如何准备…...

编程日记 2024/7/29 10:47:04

【虚拟化】KVM概念和架构

目录 一、什么是KVM&#xff1f; 二、KVM的功能 2.1 主要的功能 2.2 其它功能 三、KVM核心组件及作用 四、KVM与VMware的优势 五、KVM架构 六、qemu介绍 七、创建虚拟机流程 一、什么是KVM&#xff1f; Kernel-based Virtual Machine的简称&#xff0c;KVM 是基于虚拟…...

编程日记 2024/7/29 10:45:01

【Linux】权限2

Linux文件要被执行满足两个条件: ①必须要具备可执行权限 x ②真的是一个可执行程序 1.权限的修改,文件强行给别人 权限就是拦住一批人,不让他做特定的一件事情 a.更改人,更改文件所隶属的人 如果把文件强行给别人, chown xxx(普通用户) xxx(文件名) 会出现下面的情况 很明显…...

编程日记 2024/7/29 10:40:57

汽车长翅膀：GPU 是如何加速深度学习模型的训练和推理过程的？

编者按&#xff1a;深度学习的飞速发展离不开硬件技术的突破&#xff0c;而 GPU 的崛起无疑是其中最大的推力之一。但你是否曾好奇过&#xff0c;为何一行简单的“.to(‘cuda’)”代码就能让模型的训练速度突飞猛进&#xff1f;本文正是为解答这个疑问而作。 作者以独特的视角&…...

编程日记 2024/7/29 10:39:56

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/7 4:21:44

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/2/1 5:38:25

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2026/1/31 14:34:46