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高级计划排程系统，在集团多工厂协同生产下的应用
随着业务规模的扩大和市场的全球化，越来越多的企业选择“总部多工厂基地”的模式，此种模式大幅提升企业的产能与产量，有效分散风险。然后，与之而来的是对企业的管理提出更高的管理要求。多个生产基地不仅面临集团下发的周期性计划…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求ÿ…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...
stm32wle5 lpuart DMA数据不接收
配置波特率9600时，需要使用外部低速晶振...
CSS 工具对比：UnoCSS vs Tailwind CSS，谁是你的菜？
在现代前端开发中，Utility-First (功能优先) CSS 框架已经成为主流。其中，Tailwind CSS 无疑是市场的领导者和标杆。然而，一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 这篇文章将深入探讨这两款工具的核心理念、技术差…...
Shell 解释器 bash 和 dash 区别
bash 和 dash 都是 Unix/Linux 系统中的 Shell 解释器，但它们在功能、语法和性能上有显著区别。以下是它们的详细对比： 1. 基本区别 特性bash (Bourne-Again SHell)dash (Debian Almquist SHell)来源G…...
联邦学习带宽资源分配
带宽资源分配是指在网络中如何合理分配有限的带宽资源，以满足各个通信任务和用户的需求，尤其是在多用户共享带宽的情况下，如何确保各个设备或用户的通信需求得到高效且公平的满足。带宽是网络中的一个重要资源，通常指的是单位时间…...
Angular中Webpack与ngx-build-plus 浅学
Webpack 在 Angular 中的概念 Webpack 是一个模块打包工具，用于将多个模块和资源打包成一个或多个文件。在 Angular 项目中，Webpack 负责将 TypeScript、HTML、CSS 等文件打包成浏览器可以理解的 JavaScript 文件。Angular CLI 默认使用 Webpack 进行项目…...
[electron]预脚本不显示内联script
script-src self 是 Content Security Policy (CSP) 中的一个指令，它的作用是限制加载和执行 JavaScript 脚本的来源。 具体来说： self 表示 当前源。也就是说，只有来自当前网站或者当前页面所在域名的 JavaScript 脚本才被允许执行。"…...
Kafka深度解析与原理剖析
文章目录 一、Kafka核心架构原理1. **分布式协调与选举**2. **ISR、OSR与HW机制**3. **高性能存储设计**4. **刷盘机制 (Flush)**5. **消息压缩算法**二、高可用与消息可靠性保障1. **数据高可用策略**2. **消息丢失场景与规避**3. **顺序消费保证**三、Kafka高频面试题精析1. …...