一、Electron 环境初步搭建

news2024/11/12 14:40:51

新建一个文件夹,然后进行 npm init -y 进行初始化,然后我们在进行 npm i electron --save-dev   , 此时我们按照官网的教程进行一个初步的搭建,

  • 1.在 package.json 文件进行修改
{
  "name": "electron-ui",
  "version": "1.0.0",
  "description": "electron app!",
  "main": "main.js",
  "author": "He Ming",
  "license": "ISC",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^30.1.0"
  }
}
  • 新建 main.js  文件

在 main.js 文件中我们需要进行初步搭建 

  •  引入 electron 
const { app, BrowserWindow } = require('electron')
  • 创建启动执行之后的窗口

在创建启动执行窗口我们需要进行搭建,

whenReady:返回的是一个 Promise 我们在then里面进行窗口实例创建 

loadFile : 窗口加载页面

on: 监听窗口关闭事件

     生命周期事件

app.whenReady().then(() => {
  const mainWin = new BrowserWindow({
    width: 600,
    height: 600,
  })


  // 窗口加载页面
  mainWin.loadFile('index.html')

  // 监听窗口
  mainWin.on('closed', () => {
    // mainWin = null
  })
})
  • 监听所有窗口都关闭

此次监听窗口关闭的是所有的窗口关闭事件,

// 监听所有窗口都关闭
app.on('window-all-closed', () => {
  // macOS 下,当关闭所有窗口时,应用不会退出
  if (process.platform !== 'darwin') {
  // 调用退出事件
    app.quit()
  }
})

完整代码 

  •  mian.js
const { app, BrowserWindow } = require('electron/main')
const path = require('node:path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
  •   preload.js
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})
  • 新建 index.html  文件
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>桌面应用</title>
</head>

<body>
  <h1>桌面级应用</h1>
</body>

</html>

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

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

相关文章

嵌入式应用之FIFO模块原理与实现

FIFO介绍与原理 FIFO是First-In First-Out的缩写&#xff0c;它是一个具有先入先出特点的缓冲区。FIFO在嵌入式应用的非常广泛&#xff0c;可以说有数据收发的地方&#xff0c;基本就有FIFO的存在。或者为了降低CPU负担&#xff0c;提高数据处理效率&#xff0c;可以在积累到一…

使用 Scapy 库编写 TCP FIN 洪水攻击脚本

一、介绍 TCP FIN洪水攻击是一种分布式拒绝服务攻击&#xff08;DDoS&#xff09;&#xff0c;攻击者通过向目标服务器发送大量伪造的TCP FIN&#xff08;终止&#xff09;数据包&#xff0c;使目标服务器不堪重负&#xff0c;无法正常处理合法请求。FIN包通常用于关闭一个TCP…

电路笔记 : 嘉立创EDA 导入、查找、设计管理器(快速寻找网络标签)功能+DRC错误检查和处理

导入功能 查找功能 可查找多种类型&#xff0c;如原件名称、网络标签等 设计管理器 图层查看 DRC错误 规则设置 线距问题 大多数PCB制造商能够可靠地生产5 mil间距的走线和间隙。这是一个常见的标准&#xff0c;适合大多数消费级和工业级电子产品。在5 mil以上的间距&#xff…

操作系统复习-存储管理之虚拟内存

虚拟内存概述 有些进程实际需要的内存很大&#xff0c;超过物理内存的容量。多道程序设计&#xff0c;使得每个进程可用物理内存更加稀缺。不可能无限增加物理内存&#xff0c;物理内存总有不够的时候。虚拟内存是操作系统内存管理的关键技术。使得多道程序运行和大程序运行称…

Collections工具类及其案例

package exercise;public class Demo1 {public static void main(String[] args) {//可变参数//方法形参的个数是可以发生变化的//格式&#xff1a;属性类型...名字//int...argsint sum getSum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);System.out.println(sum);}//底层&#xff1a;可…

6.9总结

Vue生命周期 生命周期&#xff1a;指一个对象从创建到销毁的整个过程生命周期的八个阶段&#xff1a;每触发一个生命周期事件&#xff0c;会自动执行一个生命周期的方法&#xff08;钩子&#xff09; mounted&#xff1a;挂载完成&#xff0c;Vue初始化成功&#xff0c;HTML渲…

简记:为Docker配置服务代理

简记 为Docker配置服务代理 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/art…

设置路径别名

一、描述 如果想要给路径设置为别名&#xff0c;就是常见的有些项目前面的引入文件通过开头的&#xff0c;也就是替换了一些固定的文件路径&#xff0c;怎么配置。 二、配置 import { defineConfig } from vite import react from vitejs/plugin-react import path from path…

GitHub工程获取第三方PR操作

GitHub工程获取第三方PR操作 1. 源由2. 获取第三方PRStep 1&#xff1a;安装ghStep 2&#xff1a;获取个人TokenStep 3&#xff1a;通过git协议获取代码Step 4&#xff1a;获取第三方PR分支 3. 总结 1. 源由 通常来说&#xff0c;GitHub上通常有三种场景&#xff1a; 工程管理…

MySQLWorkbench导出sql文件

MySQLWorkbench导出sql文件 前言效果图导出操作选择要导出的数据库遇到的问题解决问题查看mysql路径前言 在完成数据库搭建之后,需要为上线做准备,那么就需要导出数据库的建库sql了 本篇文章讲解的是mysql Workbench 导出数据建库脚本 效果图 导出操作 选择要导出的数据库…

什么是智慧零售?智慧零售的发展前景如何?

在零售业的快速发展中&#xff0c;市场竞争日益激烈&#xff0c;产品同质化严重&#xff0c;线下销售与线上商店的竞争加剧&#xff0c;资金成本问题日益凸显。这些问题不仅限制了零售业的发展&#xff0c;也给消费者带来了诸多不便。然而&#xff0c;智慧零售的出现&#xff0…

Java | Leetcode Java题解之第135题分发糖果

题目&#xff1a; 题解&#xff1a; class Solution {public int candy(int[] ratings) {int n ratings.length;int ret 1;int inc 1, dec 0, pre 1;for (int i 1; i < n; i) {if (ratings[i] > ratings[i - 1]) {dec 0;pre ratings[i] ratings[i - 1] ? 1 : …

互联网应用主流框架整合之SpringMVC初始化及各组件工作原理

Spring MVC的初始化和流程 MVC理念的发展 SpringMVC是Spring提供给Web应用领域的框架设计&#xff0c;MVC分别是Model-View-Controller的缩写&#xff0c;它是一个设计理念&#xff0c;不仅仅存在于Java中&#xff0c;各类语言及开发均可用&#xff0c;其运转流程和各组件的应…

如何使用照相机

前言&#xff1a; ” 接上篇&#xff0c;https://t.zsxq.com/19UoFe33k&#xff0c;本文是整理的关于《美国纽约摄影学院 摄影教材》这本书&#xff0c;第一单元 - 第3课 - 如何使用照相机&#xff0c;课后习题及解答。“ 1、对于一架典型的单镜头反光照相机&#xff0c;取景时…

并查集-求有向图中是否有环

目录 一、问题描述 二、解题思路 初始化 遍历边并尝试合并 结果分析 三、代码实现 四、刷题链接 一、问题描述 二、解题思路 题目的目的就是检查有向图中是否存在环&#xff0c;这里提供两种判断方式&#xff1a; 1.使用并查集 2.使用拓扑排序 我们在这里先只给出并查…

【C语言】宏详解(下卷)

前言 紧接上卷&#xff0c;我们继续来了解宏。 宏替换的规则 1.在调用宏时&#xff0c;首先对参数进行检查&#xff0c;看看是否包含任何由#define定义的符号。如果是&#xff0c;它们首先被替换。 2.替换文本随后被插入到程序中原来文本的位置。对于宏&#xff0c;参数名被他…

React保姆级教学

React保姆级教学 一、创建第一个react项目二、JSX基本语法与react基础知识1、 插值语法&#xff1a;2、 循环一个简单列表3、 实现简单条件渲染4、 实现复杂的条件渲染5、 事件绑定6、 基础组件&#xff08;函数组件&#xff09;7、 使用useState8、 基础样式控制9、 动态类名1…

[FreeRTOS 基础知识] 保存现场与恢复现场

文章目录 什么是现场&#xff1f;保存现场的数据存放在哪里&#xff1f;保护现场的场景 什么是现场&#xff1f; 在[FreeRTOS 基础知识] 栈 与 汇编语言文章中解析了fun_c汇编函数&#xff0c;假设在执行fun_c函数的过程中产生高优先级的中断。如下图所示。 此时刚从RAM的SP栈…

【C语言】预处理详解(中卷)

前言 预处理完整系列推荐阅读顺序&#xff1a; 预处理详解&#xff08;上卷&#xff09;——宏&#xff08;上卷&#xff09;——宏&#xff08;下卷&#xff09;——预处理详解&#xff08;中卷&#xff09;——预处理详解&#xff08;下卷&#xff09; 本文接着讲预处理相…

区间预测 | Matlab实现QRBiTCN分位数回归双向时间卷积神经网络注意力机制时序区间预测

Matlab实现QRBiTCN分位数回归双向时间卷积神经网络注意力机制时序区间预测 目录 Matlab实现QRBiTCN分位数回归双向时间卷积神经网络注意力机制时序区间预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现QRBiTCN分位数回归双向时间卷积神经网络注意力机制时序…