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

electron教程（一）创建项目

news 2026/2/7 18:39:55

一、方式①

根据官网描述将electron/electron-quick-start项目克隆下来并启动

electron/electron-quick-start地址：

GitHub - electron/electron-quick-start: Clone to try a simple Electron app

git clone https://github.com/electron/electron-quick-start.git

一、方式②

创建自己的项目

1.cmd打开运行窗口
mkdir demo-electron-app && cd demo-electron-app
npm init
2.根据提示确认

 3.修改package.json文件
{"name": "demo-electron-app","version": "1.0.0","description": "my-app","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "ljx","license": "ISC"
}

4.安装electron 

npm容易报错,建议用cnpm

npm install --save-dev electron

package.json文件中添加运行命令

 "start": "nodemon --watch main.js --exec npm run build", // 如果没安装nodemon，这行不要"build": "electron ."

建议：在node环境中，安装nodemon，官网介绍，自行了解：诺德蒙 - NPM (npmjs.com)

安装步骤：

  1. win+r，输入cmd，打开运行窗口
  2. 输入npm install -g nodemon
  3. nodemon -v检查是否安装成功

5.创建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>我的app</title>
</head><body><h1>Hello World!</h1>我们正在使用 Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.
</body></html>
6.创建main.js文件

主进程文件

const { app, BrowserWindow } = require('electron')
const path = require('node:path')// 创建窗口
const createWindow = () => {// 设置窗口大小const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 当前窗口显示的页面win.loadFile('index.html')
}// app启动后创建窗口
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 关闭所有窗口时退出应用
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})
7.创建preload.js文件

预加载文件，通过 contextBridge 定义一个全局变量 versions 的示例如下：

const { contextBridge } = require('electron/renderer')contextBridge.exposeInMainWorld('versions', {node: () => process.versions.node,chrome: () => process.versions.chrome,electron: () => process.versions.electron
})
8.创建renderer.js文件

通过全局变量 versions 可以获取浏览器/node/electron版本信息，并将这些信息插入到html中

const information = document.getElementById('info')
information.innerText = `本应用正在使用 Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), 和 Electron (v${versions.electron()})`

 在index.html文件中添加id=info的标签，并引入render.js文件

<div id="info"></div><script src="./renderer.js"></script>
 9.启动看效果
npm run build

相关文章：

electron教程（一）创建项目

一、方式① 根据官网描述将electron/electron-quick-start项目克隆下来并启动 electron/electron-quick-start地址&#xff1a; GitHub - electron/electron-quick-start: Clone to try a simple Electron app git clone https://github.com/electron/electron-quick-start…...

编程日记 2024/7/3 10:58:49

如何在Oracle、MySQL、PostgreSQL上终止会话或取消SQL查询

How to Kill session or Cancel SQL query on Oracle , MySQL, PostgreSQL 数据库维护过程中难免会遇到一些不正常的SQL或会话进程正在占用系统大量资源&#xff0c;临时需要终止查询或kill会话&#xff0c;在Oracle, MySQL, Postgresql数据库中不同的操作。 Oracle KILL会话…...

编程日记 2024/7/3 10:57:47

3、FTL基本工作过程

上文描述了FTL的四大功能&#xff0c;这里简述一下每个功能的含义。 地址转换简述 FTL要维护一个地址转换表&#xff0c;这个转换表是主机读/写硬盘的逻辑地址到硬盘实际物理地址的转换关系。 假如SSD的容量是128G&#xff0c;SSD逻辑块的大小是4KB&#xff0c;那SSD的逻辑块…...

编程日记 2024/7/3 10:55:45

微信小程序的跳转页面

在微信小程序中&#xff0c;要实现从当前页面返回到指定页面的功能&#xff0c;通常不直接使用“返回上一页”的逻辑&#xff0c;而是利用小程序的页面栈管理和navigateBack或者重新定向到目标页面的API。下面我将介绍两种主要的方法&#xff1a; 方法一&#xff1a;使用 navi…...

编程日记 2024/7/3 10:53:42

深入理解 Java 中的线程间通信：`wait()`, `notify()`, `notifyAll()`

引言 在多线程编程中&#xff0c;线程间通信是一个重要且复杂的主题。Java 提供了一套基本的机制来实现线程间通信&#xff0c;即使用 wait(), notify(), 和 notifyAll() 方法。这些方法由 Object 类提供&#xff0c;用于协调多个线程对共享资源的访问。本文将详细介绍这些方法…...

编程日记 2024/7/3 10:48:36

23种设计模式【创建型模式】详细介绍之【单例模式】

23种设计模式【创建型模式】详细介绍之【单例模式】 设计模式的分类和应用场景总结单例模式1. 概述2. 实现方式2.1 饿汉式单例模式2.2 懒汉式单例模式&#xff08;非线程安全&#xff09;2.3 懒汉式单例模式&#xff08;线程安全&#xff09; 3. 单例模式的优缺点3.1 优点3.2 缺…...

编程日记 2024/7/3 10:46:34

某汽车配件制造公司任职资格体系项目成功案例纪实

——基于岗位特点和核心能力要求&#xff0c;分层分级能力测评&#xff0c;实现个性化人才培养 【客户行业】生产制造&#xff1b;汽车配件制造 【问题类型】任职资格体系建立&#xff1b;人才管理系统 【客户背景】 某汽车配件制造公司是一家专注于汽车配件研发、生产和销…...

编程日记 2024/7/3 10:42:28

【Linux】生物信息学常用基本命令

wget网址用于直接从网上下载某个文件到服务器&#xff0c;当然也可以直接从网上先把东西下到本地然后用filezilla这个软件来传输到服务器上。 当遇到不会的命令时候&#xff0c;可以使用man “不会的命令”来查看这个命令的详细信息。比如我想要看看ls这个命令的详细用法&…...

编程日记 2024/7/3 10:41:27

React Native V0.74 — 稳定版已发布

嗨，React Native开发者们， React Native 世界中令人兴奋的消息是，V0.74刚刚在几天前发布，有超过 1600 次提交。亮点如下： Yoga 3.0New Architecture: Bridgeless by DefaultNew Architecture: Batched onLayout UpdatesYarn 3 for New Projects让我们深入了解每一个新亮点…...

编程日记 2024/7/3 10:40:25

Python面试宝典第4题：环形链表

题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。如果存在环 &#xff0c;则返回 true 。 否则&#xff0c;返回 false 。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xf…...

编程日记 2024/7/3 10:37:21

Kubernetes (K8s) 底层原理

Kubernetes (K8s) 的底层原理涉及多个关键组件和概念&#xff0c;确保容器化应用程序的自动化部署、扩展和管理。以下是 Kubernetes 的底层原理及其关键组件的详细描述。 核心组件 Etcd 功能&#xff1a;分布式键值存储&#xff0c;用于存储集群的所有数据&#xff0c;包括配置…...

编程日记 2024/7/3 10:36:19

解析Kotlin中的委托（包括类委托，属性委托）【笔记摘要】

1.委托模式 委托模式&#xff1a;操作对象不会去处理某段逻辑&#xff0c;而是会把工作委托给另外一个辅助对象去处理。 例如我们要设计一个自定义类的来实现Set&#xff0c;可以将该实现委托给另一个对象&#xff1a; class MySet<T> (val helperSet: HashSet<T>…...

编程日记 2024/7/3 10:32:12

vue3+ts+uniapp+vite+pinia项目配置

开发环境&#xff1a; node >18&#xff0c;npm >8.10.2&#xff0c;vue < 3.2.31 安装项目 npx degit dcloudio/uni-preset-vue#vite-ts vue3-uniapp 1、引入样式规范 npm add -D eslint eslint-config-airbnb-base eslint-config-prettier eslint-import-resolv…...

编程日记 2024/7/3 10:30:08

大数据开发语言 Scala（四）：面向对象编程

目录 1. 概述 2. 面向对象编程的基本概念 2.1 类和对象 2.2 继承和多态 2.3 封装和访问控制 3. 面向对象编程在大数据开发中的应用 3.1 Spark中的面向对象编程 3.2 面向对象编程在数据清洗和预处理中 3.3 面向对象编程在机器学习中的应用 4. 面向对象编程的高级特性 …...

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

C++ //练习 14.31 我们的StrBlobPtr类没有定义拷贝构造函数、赋值运算符及析构函数，为什么？

C Primer&#xff08;第5版&#xff09; 练习 14.31 练习 14.31 我们的StrBlobPtr类没有定义拷贝构造函数、赋值运算符及析构函数&#xff0c;为什么&#xff1f; 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 解释&#xff1a; 因为…...

编程日记 2024/7/3 10:28:06

通配符和正则表达式之间的关系

通配符和正则表达式&#xff08;正则&#xff09;都是用于匹配字符串的工具&#xff0c;但它们的复杂性和用途有所不同。下面是它们之间的主要关系和区别&#xff1a; 通配符 通配符主要用于简单的模式匹配&#xff0c;常见于文件系统操作中&#xff0c;例如在命令行中查找文…...

编程日记 2024/7/3 10:26:03

GY-30光照传感器软件I2C方式驱动代码，基于STM32Cube

GY-30光照传感器的具体资料可以去淘宝搜索然后问卖家要&#xff0c;网上也有&#xff0c;所以这里我就不多嘴了。 VCC连接3到5伏电压&#xff0c;根据文件开头的描述在STM32CubeMX中配置好外设。 STM32Cube开发方式就是4个字“简单直接”&#xff0c;直接上代码。 gy30.h #…...

编程日记 2024/7/3 10:25:01

双相元编程：一种新语言设计方法

本文讨论了编程语言的一种趋势&#xff0c;即允许相同的语法表达 在两个不同阶段或环境&#xff08;上下文&#xff09;中执行的计算同时保持跨阶段&#xff08;上下文&#xff09;的一致行为。这些阶段通常在时间上&#xff08;运行时间&#xff09;或空间上&#xff08;运行…...

编程日记 2024/7/3 10:24:00

基于SpringBoot校园外卖配送系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…...

编程日记 2024/7/3 10:22:57

茗鹤APS高级计划排程系统，在集团多工厂协同生产下的应用

随着业务规模的扩大和市场的全球化&#xff0c;越来越多的企业选择“总部多工厂基地”的模式&#xff0c;此种模式大幅提升企业的产能与产量&#xff0c;有效分散风险。然后&#xff0c;与之而来的是对企业的管理提出更高的管理要求。多个生产基地不仅面临集团下发的周期性计划…...

编程日记 2024/7/3 10:18:51

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2026/2/6 3:56:50

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/4 16:30:39

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2026/1/23 12:42:28

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2026/1/27 9:33:09

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/12/5 3:38:11

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2026/2/1 6:30:04

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/2/6 1:04:23

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51