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高级计划排程系统，在集团多工厂协同生产下的应用
随着业务规模的扩大和市场的全球化，越来越多的企业选择“总部多工厂基地”的模式，此种模式大幅提升企业的产能与产量，有效分散风险。然后，与之而来的是对企业的管理提出更高的管理要求。多个生产基地不仅面临集团下发的周期性计划…...
基于节点电价的电网对电动汽车接纳能力评估模型研究（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
Odrive 0.5.5 固件启动流程详解：从USB初始化到电机线程就绪，新手避坑指南
ODrive 0.5.5 固件启动全流程拆解：从硬件初始化到电机控制线程就绪 当一块崭新的ODrive开发板首次通电时，固件究竟在后台执行了哪些精密操作？本文将深入RTOS内核，以时间轴方式还原从rtos_main入口到双轴电机线程就绪的完整启动过程…...
告别U盘！用PXE网络批量装UOS，一台电脑搞定所有（附Arm/Mips/X86全架构配置）
告别U盘！用PXE网络批量装UOS，一台电脑搞定所有（附Arm/Mips/X86全架构配置） 在国产化替代的大背景下，UOS操作系统凭借其出色的兼容性和安全性，正被越来越多的企业和机构采用。然而，当面对数十台甚…...
告别命令行！用Python脚本批量管理Docker容器和镜像的实战技巧
告别命令行！用Python脚本批量管理Docker容器和镜像的实战技巧 在DevOps和云原生技术快速发展的今天，Docker已经成为现代应用部署的标准工具。然而，随着容器数量的增加和部署频率的提高，手动通过命令行管理Docker容器和镜像变得越来…...
从‘尺子刻度’到‘信号保真’：用Python仿真带你直观理解ADC的INL、DNL和SNDR到底在说什么
从‘尺子刻度’到‘信号保真’：用Python仿真带你直观理解ADC的INL、DNL和SNDR到底在说什么 在数字信号处理的世界里，模数转换器(ADC)扮演着将连续模拟信号转换为离散数字信号的关键角色。但对于许多软件开发者或跨领域学习者来说，ADC的性能参…...
开源AI助手插件：为HuluNote笔记软件集成智能文本处理与知识管理
1. 项目概述：一个为HuluNote设计的开源AI助手最近在GitHub上看到一个挺有意思的项目，叫openclaw-hulunote-assistant。光看这个名字，可能很多人会有点懵，这到底是干嘛的？简单来说，这是一个专门为笔记应用Hu…...
QtScrcpy终极指南：如何免费实现高清Android投屏与多设备控制
QtScrcpy终极指南：如何免费实现高清Android投屏与多设备控制 【免费下载链接】QtScrcpy Android实时投屏软件，此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/barry-ran/QtS…...
解锁Midjourney V6针孔相机效果：从模糊边缘到胶片噪点，7步零代码复刻1950年代Lomography美学
更多请点击： https://intelliparadigm.com 第一章：Midjourney V6针孔相机美学的视觉基因解码 针孔相机（Pinhole Camera）作为一种无镜头、仅靠小孔成像的原始光学装置，其模糊边缘、高对比暗角、中心锐度衰减与天然晕影…...
免费Web串口助手：3个简单步骤开启专业串口调试
免费Web串口助手：3个简单步骤开启专业串口调试 【免费下载链接】SerialAssistant A serial port assistant that can be used directly in the browser. 项目地址: https://gitcode.com/gh_mirrors/se/SerialAssistant 你知道吗？现在无需安装任何…...