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启动应用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/43457.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MYSQL八股文汇总

目录 1、三大范式 2、DML 语句和 DDL 语句区别 3、主键和外键的区别 4、drop、delete、truncate 区别 5、基础架构 6、MyISAM 和 InnoDB 有什么区别&#xff1f; 7、推荐自增id作为主键问题 8、为什么 MySQL 的自增主键不连续 9、redo log 是做什么的? 10、redo log…

CY5-丙氨酸荧光探针,生物医学研究应用-星戈瑞

在生物医学研究中&#xff0c;荧光探针技术因其高灵敏度、高特异性和非侵入性而受科研应用。其中&#xff0c;CY5-丙氨酸荧光探针作为一种生物分子标记工具&#xff0c;近年来在细胞成像、蛋白质定位等领域展现出科研潜力。本文将详细介绍CY5-丙氨酸荧光探针的结构、性质以及其…

App H5+ 实现下载、查看功能 前后端实现(SpringBoot)

<!doctype html><html><head><meta charset"utf-8"><title>维修指南</title><meta name"viewport" content"widthdevice-width, initial-scale1.0, minimum-scale0, maximum-scale0.85, user-scalableyes&quo…

下半年交火点:智驾全国都能开,智舱多模态大模型

“你猜一猜我现在参加什么样的活动呢&#xff1f;” “你参加的是WAIC&#xff0c;就是那个人工智能的大Party&#xff0c;超多科技高手都在这……” “你帮我介绍一下这本书吧。” “这书叫《反脆弱&#xff0c;从不确定性中获益》&#xff0c;讲的是怎么在混乱里找机会&am…

闲聊C++与面向对象思想

艾伦凯曾说&#xff0c;“I made up the term object-oriented, and I can tell you I did not have C in mind.”&#xff08;“我发明了术语‘面向对象’&#xff0c;可以告诉您我没有C”&#xff09;。 今天看到这句话&#xff0c;激发了笔者写一篇文章聊聊C与面向对象思想…

搞不清啊?伦敦金与上海金区别是?

进入黄金市场的朋友&#xff0c;有可能会被各式各样的黄金交易品种带得眼花缭乱&#xff0c;其实各品种虽然都以黄金作为投资标的物&#xff0c;但是也是各有不同的&#xff0c;下面我们就来比较一下相似的投资品种——伦敦金和上海金。 首先在比较之前&#xff0c;我们要搞清楚…

基于泰坦尼克号生还数据进行 Spark 分析

基于泰坦尼克号生还数据进行 Spark 分析 在这篇博客中&#xff0c;我们将展示如何使用 Apache Spark 分析著名的泰坦尼克号数据集。通过这篇教程&#xff0c;您将学习如何处理数据、分析乘客的生还情况&#xff0c;并生成有价值的统计信息。 数据解析 • PassengerId &#…

快速排序[原理,C++实现,注意事项,时间复杂度分析]

模板&#xff1a; //本模板来自ACwing void quick_sort(int q[],int l,int r) {if(l>r) return;int xq[lr>>1],il-1,jr1;while(i<j){do i;while(q[i]<x);do j--;while(q[j]>x); if(i<j) swap(q[i],q[j]);}quick_sort(q,l,j);quick_sort(q,j1,r); };原理&…

江苏高防服务器都有哪些优势?

江苏高防服务器所针对的应用群体是不同的&#xff0c;高防服务器与普通服务器的应用效果和功能上是有着很大的差别&#xff0c;所以企业与用户在进行挑选高防服务器时&#xff0c;会更加看重服务器的质量与服务效果&#xff0c;本文就来聊一下江苏高防服务器的优势有哪些吧&…

1509.三次操作后最大值与最小值的最小差

1.题目描述 给你一个数组 nums 。 每次操作你可以选择 nums 中的任意一个元素并将它改成 任意值 。 在 执行最多三次移动后 &#xff0c;返回 nums 中最大值与最小值的最小差值。 示例 1&#xff1a; 输入&#xff1a;nums [5,3,2,4] 输出&#xff1a;0 解释&#xff1a;我们最…

字典操作(获取类操作、添加更新类操作、字典删除类操作)

字典数据获取类操作 keys() 用来获取字典中所有的 key, 保存到一个列表中&#xff0c;并以 dict_keys类型返回 stu {name: Tom, age: 23, gender: male, address: BeiJing} ks stu.keys() print(ks)values() 用来获取字典中所有的 value &#xff0c;保存到一个列表中&#…

注册中心组成结构和基本原理解析

假如你正在设计和开发一个分布式服务系统&#xff0c;系统中存在一批能够独立运行的服务&#xff0c;而在部署上也采用了集群模式以防止出现单点故障。显然&#xff0c;对于一个完整的业务系统而言&#xff0c;这些服务之间需要相互调用并形成复杂的访问链路&#xff0c;一种可…

Casual decoder 和prefix decoder 区别

Causal Decoder&#xff08;因果解码器&#xff09;和Prefix Decoder&#xff08;前缀解码器&#xff09;是两种不同的语言模型架构&#xff0c;它们在处理文本生成任务时采用不同的注意力机制。 Causal Decoder是一种自回归模型&#xff0c;它在生成文本时只能依赖于已经生成…

mysql面试题 Day5

1 什么是事务&#xff1f; 事务是指 多个数据库操作组成一个逻辑执行单元&#xff0c;满足ACID四个条件。 A是指原子性&#xff0c;事务保证操作要么全部完成&#xff0c;要么全部不完成&#xff0c;不会出现部分完成的情况&#xff1b; C是指一致性&#xff0c;事务执行后&…

C++ 定时器触发

c定时器&#xff0c;能够定时触发&#xff0c;即每隔一段固定时间执行一下函数 #include <iostream> #include <thread> #include <chrono> #include <signal.h> #include <time.h> #include <cstring> #include <glog/logging.h>#…

SQL Server解决Float字段使用ISNULL时报错

SQL Server解决Float字段使用ISNULL时报错 一、前言1.报错内容2.解决案例 一、前言 1.报错内容 > [42000] [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]从数据类型 varchar 转换为 float 时出错。 (8114)。这个错误通常是由于SQL Server在执行ISNULL函数时遇到…

防抖和节流使用场景

防抖&#xff08;Debounce&#xff09;和节流&#xff08;Throttle&#xff09;是两种常用的性能优化技术&#xff0c;用于限制某些高频率执行的函数的调用次数&#xff0c;从而优化性能和用户体验。它们的主要区别在于控制函数执行频率的策略不同。 防抖&#xff08;Debounce…

Mini-L-CTF-2022 minispringboot Thymeleaf模板注入 spel的绕过

Mini-L-CTF-2022 minispringboot Thymeleaf模板注入 spel的绕过 就是一个低版本的Thymeleaf注入 漏洞点 public class MainController {GetMapping({"/{language}"})public String test(PathVariable(name "language") String language, RequestParam(…

codesys多段直线电机跨电机控制

1. 电机描述 在X轴上有多段直线电机&#xff0c;如下图有9个&#xff0c;从X1到X9. 2.codesys程序结构 程序名称&#xff1a;Pou_two_motors 动作名称&#xff1a;ACT_move 把这个程序搞到任务配置里面 通过ethercat总线命名一下这些电机&#xff0c;方便调用。 3.程序内容 P…

油烟监测仪:守护厨房,让蓝天白云成为常态

夏日炎炎&#xff0c;白天的酷暑让人们更加向往夜晚的凉爽与惬意。在这样的季节里&#xff0c;品尝各式烧烤、小龙虾&#xff0c;再搭配一杯冰镇啤酒&#xff0c;成为了许多市民夜晚消遣的不二选择。然而&#xff0c;随之而来的餐饮油烟问题也进入了高发阶段&#xff0c;对周边…