electron教程（一）创建项目
一、方式①
根据官网描述将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 init2.根据提示确认
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 electronpackage.json文件中添加运行命令
"start": "nodemon --watch main.js --exec npm run build", // 如果没安装nodemon，这行不要"build": "electron ."
建议：在node环境中，安装nodemon，官网介绍，自行了解：诺德蒙 - NPM (npmjs.com)
安装步骤：
- win+r，输入cmd，打开运行窗口
- 输入npm install -g nodemon
- 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地址： GitHub - electron/electron-quick-start: Clone to try a simple Electron app git clone https://github.com/electron/electron-quick-start…...
如何在Oracle、MySQL、PostgreSQL上终止会话或取消SQL查询
How to Kill session or Cancel SQL query on Oracle , MySQL, PostgreSQL 数据库维护过程中难免会遇到一些不正常的SQL或会话进程正在占用系统大量资源，临时需要终止查询或kill会话，在Oracle, MySQL, Postgresql数据库中不同的操作。 Oracle KILL会话…...
3、FTL基本工作过程
上文描述了FTL的四大功能，这里简述一下每个功能的含义。 地址转换简述 FTL要维护一个地址转换表，这个转换表是主机读/写硬盘的逻辑地址到硬盘实际物理地址的转换关系。 假如SSD的容量是128G，SSD逻辑块的大小是4KB，那SSD的逻辑块…...
微信小程序的跳转页面
在微信小程序中，要实现从当前页面返回到指定页面的功能，通常不直接使用“返回上一页”的逻辑，而是利用小程序的页面栈管理和navigateBack或者重新定向到目标页面的API。下面我将介绍两种主要的方法： 方法一：使用 navi…...
`, `notify()`, `notifyAll()`)
深入理解 Java 中的线程间通信：`wait()`, `notify()`, `notifyAll()`
引言 在多线程编程中，线程间通信是一个重要且复杂的主题。Java 提供了一套基本的机制来实现线程间通信，即使用 wait(), notify(), 和 notifyAll() 方法。这些方法由 Object 类提供，用于协调多个线程对共享资源的访问。本文将详细介绍这些方法…...
23种设计模式【创建型模式】详细介绍之【单例模式】
23种设计模式【创建型模式】详细介绍之【单例模式】 设计模式的分类和应用场景总结单例模式1. 概述2. 实现方式2.1 饿汉式单例模式2.2 懒汉式单例模式（非线程安全）2.3 懒汉式单例模式（线程安全） 3. 单例模式的优缺点3.1 优点3.2 缺…...
某汽车配件制造公司任职资格体系项目成功案例纪实
——基于岗位特点和核心能力要求，分层分级能力测评，实现个性化人才培养 【客户行业】生产制造；汽车配件制造 【问题类型】任职资格体系建立；人才管理系统 【客户背景】 某汽车配件制造公司是一家专注于汽车配件研发、生产和销…...
【Linux】生物信息学常用基本命令
wget网址用于直接从网上下载某个文件到服务器，当然也可以直接从网上先把东西下到本地然后用filezilla这个软件来传输到服务器上。 当遇到不会的命令时候，可以使用man “不会的命令”来查看这个命令的详细信息。比如我想要看看ls这个命令的详细用法&…...
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让我们深入了解每一个新亮点…...
Python面试宝典第4题：环形链表
题目 给你一个链表的头节点 head ，判断链表中是否有环。如果存在环 ，则返回 true 。 否则，返回 false 。 如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。 为了表示给定链表中的环…...
 底层原理)
Kubernetes (K8s) 底层原理
Kubernetes (K8s) 的底层原理涉及多个关键组件和概念，确保容器化应用程序的自动化部署、扩展和管理。以下是 Kubernetes 的底层原理及其关键组件的详细描述。 核心组件 Etcd 功能：分布式键值存储，用于存储集群的所有数据，包括配置…...
解析Kotlin中的委托（包括类委托，属性委托）【笔记摘要】
1.委托模式 委托模式：操作对象不会去处理某段逻辑，而是会把工作委托给另外一个辅助对象去处理。 例如我们要设计一个自定义类的来实现Set，可以将该实现委托给另一个对象： class MySet<T> (val helperSet: HashSet<T>…...
vue3+ts+uniapp+vite+pinia项目配置
开发环境： node >18，npm >8.10.2，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…...
大数据开发语言 Scala（四）：面向对象编程
目录 1. 概述 2. 面向对象编程的基本概念 2.1 类和对象 2.2 继承和多态 2.3 封装和访问控制 3. 面向对象编程在大数据开发中的应用 3.1 Spark中的面向对象编程 3.2 面向对象编程在数据清洗和预处理中 3.3 面向对象编程在机器学习中的应用 4. 面向对象编程的高级特性 …...
C++ //练习 14.31 我们的StrBlobPtr类没有定义拷贝构造函数、赋值运算符及析构函数，为什么？
C Primer（第5版） 练习 14.31 练习 14.31 我们的StrBlobPtr类没有定义拷贝构造函数、赋值运算符及析构函数，为什么？ 环境：Linux Ubuntu（云服务器） 工具：vim 解释： 因为…...
通配符和正则表达式之间的关系
通配符和正则表达式（正则）都是用于匹配字符串的工具，但它们的复杂性和用途有所不同。下面是它们之间的主要关系和区别： 通配符 通配符主要用于简单的模式匹配，常见于文件系统操作中，例如在命令行中查找文…...
GY-30光照传感器软件I2C方式驱动代码，基于STM32Cube
GY-30光照传感器的具体资料可以去淘宝搜索然后问卖家要，网上也有，所以这里我就不多嘴了。 VCC连接3到5伏电压，根据文件开头的描述在STM32CubeMX中配置好外设。 STM32Cube开发方式就是4个字“简单直接”，直接上代码。 gy30.h #…...
双相元编程：一种新语言设计方法
本文讨论了编程语言的一种趋势，即允许相同的语法表达 在两个不同阶段或环境（上下文）中执行的计算同时保持跨阶段（上下文）的一致行为。这些阶段通常在时间上（运行时间）或空间上（运行…...
基于SpringBoot校园外卖配送系统设计和实现(源码+LW+调试文档+讲解等)
💗博主介绍：✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者，博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗 🌟文末获取源码数据库🌟 感兴趣的可以先收藏起来，…...
茗鹤APS高级计划排程系统，在集团多工厂协同生产下的应用
随着业务规模的扩大和市场的全球化，越来越多的企业选择“总部多工厂基地”的模式，此种模式大幅提升企业的产能与产量，有效分散风险。然后，与之而来的是对企业的管理提出更高的管理要求。多个生产基地不仅面临集团下发的周期性计划…...
FastAPI文档示例：请求响应样例配置的终极指南
FastAPI文档示例：请求响应样例配置的终极指南 【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi FastAPI是一个高性能、易于学…...
别再只盯着日志了！利用RDP的.bmc缓存文件做Windows终端服务器取证（附Python工具链）
挖掘RDP客户端缓存：被忽视的Windows终端会话可视化取证新维度 当服务器日志被刻意删除或篡改时，安全人员往往陷入取证僵局。但很少有人意识到，每台连接过远程桌面的Windows电脑里，都藏着一种特殊的"视觉日志"——RDP位图…...
跨平台模组获取：Steam创意工坊资源的多引擎下载方案
跨平台模组获取：Steam创意工坊资源的多引擎下载方案 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 诊断访问障碍：游戏模组获取的系统性问题分析 识别用…...
拯救你的机械键盘：3步告别按键连击烦恼
拯救你的机械键盘：3步告别按键连击烦恼 【免费下载链接】KeyboardChatterBlocker A handy quick tool for blocking mechanical keyboard chatter. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyboardChatterBlocker 你是否曾经在打字时突然发现屏幕上出…...
Go语言中的Kubernetes部署实战
Go语言中的Kubernetes部署实战 Kubernetes作为容器编排的事实标准，已经成为现代云原生应用部署的基石。本文将深入介绍如何将Go语言应用部署到Kubernetes集群，从基础概念到生产实践，帮助你掌握容器编排的核心技能。 Kubernetes核心概念 Pod&a…...
Realistic Vision V5.1 生态工具集成展示：与Cursor等AI编程助手联动工作流
Realistic Vision V5.1 生态工具集成展示：与Cursor等AI编程助手联动工作流 最近在尝试把各种AI工具串起来用，发现了一件挺有意思的事。以前我们做开发，写代码是一个工具，画界面图是另一个工具，做流程图还得再开一个软…...
从原理到上板：FPGA动态数码管的视觉暂留效应详解（Verilog/Vivado）
从原理到上板：FPGA动态数码管的视觉暂留效应详解（Verilog/Vivado） 当你在FPGA开发板上看到数码管稳定显示数字时，可能不会想到这背后隐藏着精妙的"视觉欺骗"。这种看似简单的动态显示技术，实际上是人眼生理特…...
阿里通义Qwen3-Coder 多场景集成指南
1. Qwen3-Coder 核心能力与适用场景 第一次接触阿里通义Qwen3-Coder时，最让我惊讶的是它对代码上下文的理解深度。记得有次我随手输入"写个带缓存的斐波那契函数"，它不仅生成了正确的Python实现，还主动添加了LRU缓存装饰器的使用说…...
别再硬啃理论了！用STM32F407+OpenMV做个会‘看’会‘动’的小车，代码全开源
从零打造会“思考”的智能小车：STM32F407OpenMV实战指南 当你第一次看到这个小车精准识别路标并自主避障时，那种成就感会瞬间点燃你对嵌入式开发的热情。这不是又一套枯燥的理论教程，而是一个真实可用的智能小车项目——它能用摄像头“看”世…...
【Cuvil编译器生产级AI推理落地指南】：20年编译器老兵亲授Python模型从PyTorch到裸金属推理的7大避坑红线
第一章：Cuvil编译器在Python AI推理中的应用Cuvil 是一款面向AI工作负载的轻量级领域专用编译器，专为优化Python生态中基于NumPy、Torch和ONNX的推理流程而设计。它不依赖传统JIT或解释器层，而是通过静态图提取、张量算子融合与硬件感知调度&…...