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

Electron 简单搭建项目

准备工作
  1. 全局安装 node npm
  2. 创建文件夹,并执行 npm init
  3. 安装 electron npm i electron --save-dev
  4. 在 package.json 配置文件中的scripts字段下增加一条start命令:
{"scripts": {"start": "electron ."}
}
  1. 由于配置中的入口文件是 main.js ,需要在根目录下创建 main.js
// main.js
// 这个文件控制主进程,运行在Node.js环境中,控制应用的生命周期,显示原生界面,执行特殊操作并管理渲染器进程。const { app, BrowserWindow } = require('electron')
const path = require('node:path')const createWindow = () => {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js') // 预加载 js}})// 加载 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()
})
  1. 创建 index.html
<!--index.html-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><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>.</body>
</html>
  1. 创建 prelode.js
// 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 run start启动应用

相关文章:

Electron 简单搭建项目

准备工作 全局安装 node npm创建文件夹&#xff0c;并执行 npm init安装 electron npm i electron --save-dev在 package.json 配置文件中的scripts字段下增加一条start命令&#xff1a; {"scripts": {"start": "electron ."} }由于配置中的入…...

旗晟智能巡检机器人:开启工业运维的智能化新篇章

在当今快速发展的工业领域&#xff0c;安全、效率和成本控制是企业运营的核心。旗晟科技以创新为驱动&#xff0c;推出了一站式的工业级智能巡检机器人数字化全景运维解决方案&#xff0c;为石油、天然气、化工、电力等高危行业提供了一个全新的运维模式。 一、面对挑战&#x…...

vue3的常用 Composition API有哪些?

Vue.js 3.0 引入了 Composition API&#xff0c;作为一种新的组织组件逻辑的方式&#xff0c;相比于传统的 Options API&#xff0c;Composition API 提供了更灵活、更可复用的代码组织方式。 以下是 Vue 3.0 中常用的 Composition API&#xff1a;setup() 函数&#xff1a; s…...

深度优先算法-DFS(算法篇)

算法之深度优先算法 深度优先算法(DFS) 概念&#xff1a; 深度优先算法(DFS)跟BFS算法一样是用于遍历图的算法&#xff0c;但是DFS并不像BFS算法一样&#xff0c;它搜索出来的路径不具有最短性&#xff0c;并且dfs算法类似于枚举&#xff0c;因此DFS算法一般用于求出问题的所…...

C++模块化之内部类

目录 1.引言 2.内部类的访问控制 3.优缺点分析 4.实际运用 4.1.实现复杂数据结构 4.2.封装细节实现 4.3.事件处理和回调 4.4.模板元编程辅助类 4.5. 访问控制和封装 4.6. 代码组织和模块化 5.总结 1.引言 在C中&#xff0c;内部类&#xff08;Nested Class&#xff…...

k8s-第九节-命名空间

命名空间 如果一个集群中部署了多个应用&#xff0c;所有应用都在一起&#xff0c;就不太好管理&#xff0c;也可以导致名字冲突等。 我们可以使用 namespace 把应用划分到不同的命名空间&#xff0c;跟代码里的 namespace 是一个概念&#xff0c;只是为了划分空间。 # 创建命…...

【AI大模型新型智算中心技术体系深度分析 2024】

文末有福利&#xff01; ChatGPT 系 列 大 模 型 的 发 布&#xff0c; 不 仅 引 爆 全 球 科 技 圈&#xff0c; 更 加 夯 实 了 人 工 智 能&#xff08;Artificial Intelligence, AI&#xff09;在未来改变人类生产生活方式、引发社会文明和竞争力代际跃迁的战略性地位。当…...

王道计算机数据结构+插入排序、冒泡排序、希尔排序、快速排序、简单选择排序

本内容是基于王道计算机数据结构的插入排序、冒泡排序、希尔排序、快速排序、简单选择排序整理。 文章目录 插入排序算法性能代码 冒泡排序算法性能代码 希尔排序算法性能代码 快速排序算法性能代码 简单选择排序算法性能代码 插入排序 算法 算法思想&#xff1a;每次将一个…...

python爬虫学习(三十三天)---多线程上篇

hello&#xff0c;小伙伴们&#xff01;我是喔的嘛呀。今天我们来学习多线程方面的知识。 目录 一、了解多线程 &#xff08;1&#xff09;大概描述 &#xff08;2&#xff09;多线程爬虫的优势 &#xff08;3&#xff09;多线程爬虫的实现方式 &#xff08;4&#xff09…...

JavaScript 原型链那些事

在讲原型之前我们先来了解一下函数。 在JS中&#xff0c;函数的本质就是对象&#xff0c;它与其他对象不同的是&#xff0c;创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢&#xff1f;是一个叫做Function的特殊函数&#xff0c;通过newFu…...

nginx的知识面试易考点

Nginx概念 Nginx 是一个高性能的 HTTP 和反向代理服务。其特点是占有内存少&#xff0c;并发能力强&#xff0c;事实上nginx的并发能力在同类型的网页服务器中表现较好。 Nginx 专为性能优化而开发&#xff0c;性能是其最重要的考量指标&#xff0c;实现上非常注重效率&#…...

每日Attention学习9——Efficient Channel Attention

模块出处 [CVPR 20] [link] [code] ECA-Net: Efficient Channel Attention for Deep Convolutional Neural Networks 模块名称 Efficient Channel Attention (ECA) 模块作用 通道注意力 模块结构 模块代码 import torch import torch.nn as nn import torch.nn.functional …...

Java语言程序设计——篇三(1)

选择结构 概述选择单分支if语句例题讲解 双分支if-else语句例题讲解 条件运算符多分支的if-else语句例题讲解 嵌套的if语句例题讲解 switch语句结构例题讲解代码演示运行结果 概述 Java中的控制结构&#xff0c;包括&#xff1a; 1、选择结构( if、if-else、switch ) 2、循环结…...

基于SpringBoot实现轻量级的动态定时任务调度

在使用SpringBoot框架进行开发时&#xff0c;一般都是通过Scheduled注解进行定时任务的开发&#xff1a; Component public class TestTask {Scheduled(cron"0/5 * * * * ? ") //每5秒执行一次public void execute(){SimpleDateFormat df new SimpleDateFormat(…...

夸克升级“超级搜索框” 推出AI搜索为中心的一站式AI服务

大模型时代&#xff0c;生成式AI如何革新搜索产品&#xff1f;阿里智能信息事业群旗下夸克“举手答题”。7月10日&#xff0c;夸克升级“超级搜索框”&#xff0c;推出以AI搜索为中心的一站式AI服务&#xff0c;为用户提供从检索、创作、总结&#xff0c;到编辑、存储、分享的一…...

element-ui el-select选择器组件下拉框增加自定义按钮

element-ui el-select选择器组件下拉框增加自定义按钮 先看效果 原理&#xff1a;在el-select下添加禁用的el-option&#xff0c;将其value绑定为undefined&#xff0c;然后覆盖el-option禁用状态下的默认样式即可 示例代码如下&#xff1a; <template><div class…...

Python基于you-get下载网页上的视频

​ 1.python 下载地址 下载 : https://www.python.org/downloads/ 2. 配置环境变量 配置 python_home 地址 配置 python_scripts 地址 在path 中加入对应配置 3. 验证 ​ C:\Users>python --version Python 3.12.4C:\Users>wheel version wheel 0.43.04. 下载 c…...

大模型/NLP/算法面试题总结3——BERT和T5的区别?

1、BERT和T5的区别&#xff1f; BERT和T5是两种著名的自然语言处理&#xff08;NLP&#xff09;模型&#xff0c;它们在架构、训练方法和应用场景上有一些显著的区别。以下是对这两种模型的详细比较&#xff1a; 架构 BERT&#xff08;Bidirectional Encoder Representation…...

vue3项目打包的时候,怎么区别测试环境,和本地环境

在Vue 3项目中区别测试环境和本地环境&#xff0c;并标记接口的方法可以通过环境变量来实现。 首先&#xff0c;你可以在你的项目根目录下创建一个.env文件&#xff0c;并定义你的环境变量。比如&#xff0c;你可以创建.env.local作为本地环境的配置文件&#xff0c;.env.test…...

小特性 大用途 —— YashanDB JDBC驱动的这些特性你都get了吗?

在现代数据库应用场景中&#xff0c;系统的高可用性和负载均衡是确保服务稳定性的基石。YashanDB JDBC驱动通过其创新的多IP配置特性&#xff0c;为用户带来了简洁而强大的解决方案&#xff0c;以实现数据库连接的高可用性和负载均衡&#xff0c;满足企业级应用的高要求。 01 …...

全网最全的软件测试面试八股文

前面看到了一些面试题&#xff0c;总感觉会用得到&#xff0c;但是看一遍又记不住&#xff0c;所以我把面试题都整合在一起&#xff0c;都是来自各路大佬的分享&#xff0c;为了方便以后自己需要的时候刷一刷&#xff0c;不用再到处找题&#xff0c;今天把自己整理的这些面试题…...

VMware虚拟机配置桥接网络

转载&#xff1a;虚拟机桥接网络配置 一、VMware三种网络连接方式 VMware提供了三种网络连接方式&#xff0c;VMnet0, VMnet1, Vmnet8&#xff0c;分别代表桥接&#xff0c;Host-only及NAT模式。在VMware的编辑-虚拟网络编辑器可看到对应三种连接方式的设置&#xff08;如下图…...

华为机考真题 -- 攀登者1

题目描述: 攀登者喜欢寻找各种地图,并且尝试攀登到最高的山峰。地图表示为一维数组,数组的索引代表水平位置,数组的元素代表相对海拔高度。其中数组元素0代表地面。 一个山脉可能有多座山峰(山峰定义:高度大于相邻位置的高度,或在地图边界且高度大于相邻的高度)。登山者…...

深入理解Python密码学:使用PyCrypto库进行加密和解密

深入理解Python密码学&#xff1a;使用PyCrypto库进行加密和解密 引言 在现代计算领域&#xff0c;信息安全逐渐成为焦点话题。密码学&#xff0c;作为信息保护的关键技术之一&#xff0c;允许我们加密&#xff08;保密&#xff09;和解密&#xff08;解密&#xff09;数据。P…...

MMSegmentation笔记

如何训练自制数据集&#xff1f; 首先需要在 mmsegmentation/mmseg/datasets 目录下创建一个自制数据集的配置文件&#xff0c;以我的苹果叶片病害分割数据集为例&#xff0c;创建了mmsegmentation/mmseg/datasets/appleleafseg.py 可以看到&#xff0c;这个配置文件主要定义…...

Python基础语法:变量和数据类型详解(整数、浮点数、字符串、布尔值)①

文章目录 变量和数据类型详解&#xff08;整数、浮点数、字符串、布尔值&#xff09;一、变量二、数据类型1. 整数&#xff08;int&#xff09;2. 浮点数&#xff08;float&#xff09;3. 字符串&#xff08;str&#xff09;4. 布尔值&#xff08;bool&#xff09; 三、类型转换…...

【C++航海王:追寻罗杰的编程之路】关联式容器的底层结构——红黑树

目录 1 -> 红黑树 1.1 -> 红黑树的概念 1.2 -> 红黑树的性质 1.3 -> 红黑树节点的定义 1.4 -> 红黑树的结构 1.5 -> 红黑树的插入操作 1.6 -> 红黑树的验证 1.8 -> 红黑树与AVL树的比较 2 -> 红黑树模拟实现STL中的map与set 2.1 -> 红…...

MySQL DDL

数据库 1 创建数据库 CREATE DATABASE 数据库名 CREATE DATABASE IF NOT EXISTS 数据库名;&#xff08;判断是否存在) CREATE DATABASE 数据库名 CHARACTER SET 字符 2 查看数据库 SHOW DATABASES; 查看某个数据库的信息 SHOW CAEATE DATABASE 数据库名 3 修改数据库 …...

从模型到应用:李彦宏解读AI时代的新趋势与挑战

如何理解李彦宏说的“不要卷模型&#xff0c;要卷应用” 开源项目的机遇与挑战 7月4日&#xff0c;2024世界人工智能大会暨人工智能全球治理高级别会议在上海世博中心举办。在产业发展主论坛上&#xff0c;百度创始人、董事长兼首席执行官李彦宏呼吁&#xff1a;“大家不要卷…...

C++ STL 随机数用法介绍

目录 一&#xff1a;C语言中的随机数 二&#xff1a;C中的随机数 1. 生成随机数的例子 2. 随机数引擎 3. 随机数引擎适配器 4. C中预定义的随机数引擎&#xff0c;引擎适配器 5. 随机数分布 一&#xff1a;C语言中的随机数 <stdlib.h>//初始化随机种子 srand(static_ca…...

做视频类型的网站/搜索引擎排名优化公司

通过AD(管理距离)来衡量哪个路由协议更优秀. 如何衡量同一种协议学到的多条路的好坏?使用度量值. 度量值>代价值 RIP:跳数 EIGRP:带宽(从源到目标的多个网段的最低带宽),延迟(多个网段的延迟之和),可靠性,负载,MTU. OSPF:基于带宽的代价(每段网络的代价之和).需要维护路由信…...

武汉网站设计推荐刻/深圳百度网站排名优化

1. rand函数rand() 函数可以不加任何参数&#xff0c;就可以生成随机整数。如果要设置随机数范围&#xff0c;可以在函数中设置 min 和 max 的值。如果需要生成随机数的种子&#xff0c;使用 srand 函数配置。echo rand(); // 生成 0~RAND_MAX 之间的随机数&#xff0c;Windows…...

学网站建设能赚钱吗/百度云盘网页版

精品站长网交易系统源码&#xff0c;虚拟交易网站程序源码&#xff0c;虚拟交易平台带店铺处罚商品处罚。带申诉功能&#xff0c; 带提现通知功能&#xff0c; 带熊掌号推送功能&#xff0c; 带站内信息功能。 php5.2mysql5.6 压缩包内有详细的搭建教程 不知道是不是小子电脑…...

logo免费网站/简述搜索引擎优化

本文主要介绍了新版本TP-Link路由器上网设置的详细步骤&#xff0c;新版的TP-Link无线路由器的设置网址、设置界面、管理员密码等方面&#xff0c;与旧版本的TP-Link路由器是完全不一样的。但是&#xff0c;无论是什么版本的TP-Link路由器&#xff0c;设置思路都是一样的。一台…...

网站开发 自动生成缩略图/泰安百度推广代理商

JVM怎么判断对象是否存活 引用计数算法 引用计数算法比较简单&#xff0c;对每个对象保存一个整型的引用计算器属性。用于记录对象背应用的情况。对于一个对象A&#xff0c;只要有任何一个对象引用了A&#xff0c;则A的引用计数器就加1&#xff1b;当引用失效时&#xff0c;引用…...

怎么做网站dreamwave/杭州网站建设 seo

复制文件夹中所有内容到指定位置 /*** 复制文件夹下的所有文件到指定目录* param oldPath* param newPath*/public static void copyFolder(String oldPath, String newPath) {try {// 如果文件夹不存在&#xff0c;则建立新文件夹(new File(newPath)).mkdirs();//读取整个文件…...