electron_笔记

news2025/4/27 7:00:05

创建你的第一个应用:

package.json:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "my demo",
  "main": "main.js",
  "scripts": {
    "dev": "electron .  --inspect=5858",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "win": "electron-builder --win --x64"
  },
  "author": "icestone",
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^6.1.1",
    "electron": "23.1.3",
    "electron-builder": "^23.6.0"
  },
  "win": {
    "icon": "icons/icon.ico",
    "target": [
      {
        "target": "nsis",
        "arch": [
          "x64",
          "ia32"
        ]
      }
    ]
  }
}

main.js

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
        },
    })
    require('./src/js/menu'),
    ipcMain.handle('ping', () => 'pong');
    win.loadFile('index.html');
}


// 下面两种监听都可以
/*app.whenReady().then(() => {
    createWindow()
})*/
app.on('ready', () => {
    createWindow()
})

//  监听关闭时调用
app.on('window-all-closed', () => {
    console.log('close window')
    if (process.platform !== 'darwin') app.quit()
})

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
</p>
</body>
</html>

run:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QVScXRef-1681837054112)(./images/1.png)]

监听一个窗口的关闭:

    win.on('close',function () {
        console.log('window is close!')
    })

它的完整代码应该是:

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
        },
    })
    ipcMain.handle('ping', () => 'pong');
    win.loadFile('index.html');
    win.on('close',function () {
        console.log('window is close!')
    })
}


// 下面两种监听都可以
/*app.whenReady().then(() => {
    createWindow()
})*/
app.on('ready', () => {
    createWindow()
})

//  监听关闭时调用
app.on('window-all-closed', () => {
    console.log('close window')
    if (process.platform !== 'darwin') app.quit()
})

electron的生命周期

生命周期事件:

  • ready

    • app初始化完成时调用一次

  • dom-ready

    • 一个窗口中的文本加载完成,此时可以执行dom操作

  • did-finsh-load

    • 导航完成时触发

  • window-all-closed

    • 所有窗口都被关闭时触发

  • before-quit

    • 在关闭窗口之前触发

  • will-quit

    • 在窗口关闭并且应用退出时触发

  • quit

    • 当所有窗口被关闭时触发

  • closed

    • 当所有窗口关闭时触发,此时应删除窗口引用

例如下面的main.js演示:

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
        },
    })
    ipcMain.handle('ping', () => 'pong');
    win.loadFile('index.html');

    win.webContents.on('did-finish-load', () => {
        console.log('did-finish-load');
    })
    win.webContents.on('dom-ready', () => {
        console.log('dom-ready');
    })

    win.on('close', function () {
        console.log('close')
    })
}


// 下面两种监听都可以
/*app.whenReady().then(() => {
    createWindow()
})*/
app.on('ready', () => {
    console.log('ready')
    createWindow()
});
//  监听关闭时调用
app.on('window-all-closed', () => {
    console.log('all close window')
    if (process.platform !== 'darwin') app.quit()
});
app.on('before-quit', function () {
    console.log('before-quit')
});
app.on('will-quit', function () {
    console.log('will-quit');
});
app.on('quit', function () {
    console.log('quit');
});

run:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgKXwH8V-1681837054113)(./images/2.png)]

窗口尺寸设置

使用nodemon

package.json中的script:

  "scripts": {
    "dev": "electron .  --inspect=5858",
    "start": "electron .",
    "nodemon": "nodemon --main.js --exec npm run dev"
  },

这样就可以使用nodemon监听main.js的改动了

相关属性

每次打开窗口默认会在屏幕的中央进行显示,如果想要更改,可以在mian.js中使用x,y来更改:

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');

const createWindow = () => {
    const win = new BrowserWindow({
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
        },
    })
    ipcMain.handle('ping', () => 'pong');
    win.loadFile('index.html');

    win.webContents.on('did-finish-load', () => {
        console.log('did-finish-load');
    })
    win.webContents.on('dom-ready', () => {
        console.log('dom-ready');
    })

    win.on('close', function () {
        console.log('close')
    })
}

// 下面两种监听都可以
/*app.whenReady().then(() => {
    createWindow()
})*/
app.on('ready', () => {
    console.log('ready')
    createWindow()
});
//  监听关闭时调用
app.on('window-all-closed', () => {
    console.log('all close window')
    if (process.platform !== 'darwin') app.quit()
});
app.on('before-quit', function () {
    console.log('before-quit')
});
app.on('will-quit', function () {
    console.log('will-quit');
});
app.on('quit', function () {
    console.log('quit');
});

然后他就更改了:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqgfTyUh-1681837054114)(./images/3.png)]

但是此时,可能会先出现窗口,白屏一瞬间之后再加载内容,那么此时就可以使用:show: false设置一下

const win = new BrowserWindow({
        show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
        },
    })
    win.on("ready-to-show", function () {
        win.loadFile('index.html');
    })

这里监听了ready-to-show,在这个阶段才调用加载index.html

设置最大,最小尺寸

const win = new BrowserWindow({
        show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        maxHeight: 1000,
        maxWidth: 1100,
        minHeight: 500,
        minWidth: 1000
    })

固定尺寸

使用resizable:false:

const win = new BrowserWindow({
        show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        maxHeight: 1000,
        maxWidth: 1100,
        minHeight: 500,
        minWidth: 1000,
        resizable:false
    })

main设置界面内容

设置title

const win = new BrowserWindow({
        // show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        // 设置最大尺寸
        maxHeight: 1000,
        maxWidth: 1100,
        // 设置最小尺寸
        minHeight: 500,
        minWidth: 1000,
        // 禁止缩放窗口
        // resizable:false
        title:'在main.js中设置的title'
    })
  • 注意,此时在index.html的title应该为空
设置icon
const win = new BrowserWindow({
        // show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        // 设置最大尺寸
        maxHeight: 1000,
        maxWidth: 1100,
        // 设置最小尺寸
        minHeight: 500,
        minWidth: 1000,
        // 禁止缩放窗口
        // resizable:false
        title:'在main.js中设置的title',
        icon:'./lg.ico'
    })

如图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GGvK5093-1681837054114)(./images/4.png)]

不显示默认的窗口和菜单

frame:false,默认为true

运行:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BWjYpzv0-1681837054115)(./images/5.png)]

那么此时窗口无法进行拖动

透明窗体

transparent: true

运行:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wdKoXGV-1681837054115)(./images/6.png)]

隐藏menu
const win = new BrowserWindow({
        // show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        // 设置最大尺寸
        maxHeight: 1000,
        maxWidth: 1100,
        // 设置最小尺寸
        minHeight: 500,
        minWidth: 1000,
        // 禁止缩放窗口
        // resizable:false
        title: '在main.js中设置的title',
        icon: './lg.ico',
        // 不显示默认窗口和菜单
        // frame:false
        // 透明窗体
        // transparent: true
        // 隐藏menu
        autoHideMenuBar: true
    })

​

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

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

相关文章

Mac安装和卸载node和npm

Mac安装和卸载node和npm

1、官网下载 访问nodejs官网&#xff0c;点击稳定版&#xff0c;并下载 https://nodejs.org/en 2、安装 双击刚下载的文件&#xff0c;按步骤默认安装就行 3、 验证 安装完成后打开终端 npm -vnode -v如下图出现版本信息&#xff0c;说明安装成功 4、环境配置 打开M…
阅读更多...
Vue中的嵌套路由

Vue中的嵌套路由

router官网-嵌套路由 实际生活中的应用界面&#xff0c;通常由多层嵌套的组件组合而成。同样地&#xff0c;URL 中各段动态路径也按某种结构对应嵌套的各层组件&#xff0c;例如&#xff1a; <body><div id"app"><h1>欢迎使用路由导航</h1&g…
阅读更多...
差分信号输入隔离放大转换模块PCB焊接式0-20mV/0-±10mV/0-±20mV转0-5V/0-10V/4-20mA

差分信号输入隔离放大转换模块PCB焊接式0-20mV/0-±10mV/0-±20mV转0-5V/0-10V/4-20mA

概述&#xff1a; IPO压力应变桥信号处理系列隔离放大器是一种将差分输入信号隔离放大、转换成按比例输出的直流信号混合集成厚模电路。产品广泛应用在电力、远程监控、仪器仪表、医疗设备、工业自控等行业。该模块内部嵌入了一个高效微功率的电源&#xff0c;向输入端和输出端…
阅读更多...
【Java版oj】day33剪花布条、客似云来

【Java版oj】day33剪花布条、客似云来

目录 一、剪花布条 &#xff08;1&#xff09;原题再现 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;完整代码 二、客似云来 &#xff08;1&#xff09;原题再现 &#xff08;2&#xff09;问题分析 &#xff08;3&#xff09;完整代码 一、剪花布条 &a…
阅读更多...
【Unity3D日常BUG】Unity3D打包WEBGL平台运行出现无法解析gzip、构建压缩等问题

【Unity3D日常BUG】Unity3D打包WEBGL平台运行出现无法解析gzip、构建压缩等问题

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 在Unity3D中打包WEBGL运行出现这样的错误&#xff1a; 具体分…
阅读更多...
第3章 高可用负载均衡集群规划

第3章 高可用负载均衡集群规划

作者&#xff1a;田逸&#xff08;formyz&#xff09; 开篇之初&#xff0c;先举几个反例&#xff0c;来说明事前规划的重要性。 案例一&#xff1a;某广告媒体公司&#xff0c;需要部署一套媒体播放系统&#xff0c;由一台应用服务器和一台数据库服务器组成&#xff0c;让人没…
阅读更多...
考研二战上岸上海交通大学电院（819）

考研二战上岸上海交通大学电院（819）

笔者来自通信考研小马哥23上交819全程班学员 此文记录过去两年的考研经历以及介绍个人考研经验。方法不一定适合所有人&#xff0c;每个人都有适合自己的学习方式&#xff0c;这篇帖子我可能写的比较长也说的比较具体&#xff08;啰嗦&#xff09;&#xff0c;大概8000多字&am…
阅读更多...
Qt Style Sheets Examples整理

Qt Style Sheets Examples整理

文章目录 样式表用法使用动态属性自定义使用Box模型自定义QPushButton自定义QPushButton的菜单指示子控件复杂选择器完整代码&#xff1a; 特定部件样式表QAbstractScrollAreaQCheckBoxQComboBoxQDockWidget 原文地址&#xff1a;https://doc.qt.io/qt-6/stylesheet-examples.h…
阅读更多...
Golang 泛型介绍

Golang 泛型介绍

泛型介绍 泛型是一种编写独立于所使用的特定类型的代码的方法。现在可以编写函数和类型(Functions and types)来使用一组类型中的任何一种。 泛型为语言添加了三个重要的东西: 1 函数和类型的类型参数。2 将接口类型定义为类型集&#xff0c;包括没有方法的类型。3 类型推断…
阅读更多...
五项热门技术领域和应用场景

五项热门技术领域和应用场景

介绍五种当下比较热门的技术&#xff0c;分别是人工智能、云计算、数据分析、微服务和区块链。每种技术都有自己的定义、子领域、应用场景和学习难度。这些技术都有着广阔的发展前景和市场需求&#xff0c;对于想要从事或了解这些领域的人来说&#xff0c;都是很有价值的知识。…
阅读更多...
【react 全家桶】初始化脚手架

【react 全家桶】初始化脚手架

本人大二学生一枚&#xff0c;热爱前端&#xff0c;欢迎来交流学习哦&#xff0c;一起来学习吧。 <专栏推荐> &#x1f525;&#xff1a;js专栏 &#x1f525;&#xff1a;vue专栏 &#x1f525;&#xff1a;react专栏 文章目录 10 【初始化脚手架】1.什么是 React 脚…
阅读更多...
时序数据的内存服务

时序数据的内存服务

说明 既要坚定锻炼成熟架构的道路&#xff0c;也要在合理的范围内重塑设计 计算时序数据的特征&#xff0c;少不了“Rolling”类的操作。过去&#xff0c;直接采用pandas进行rolling&#xff0c;效率很不错&#xff0c;但是在实战应用时不太行。 反思下来&#xff1a;离线的操…
阅读更多...
Linux --- 软件安装、项目部署

Linux --- 软件安装、项目部署

一、软件安装 1.1、软件安装方式 在Linux系统中&#xff0c;安装软件的方式主要有四种&#xff0c;这四种安装方式的特点如下&#xff1a; 1.2、安装JDK 上述我们介绍了Linux系统软件安装的四种形式&#xff0c;接下来我们就通过第一种(二进制发布包)形式来安装 JDK。 JDK…
阅读更多...
文案优化技巧，批量文案改写工具

文案优化技巧，批量文案改写工具

在当今竞争激烈的市场中&#xff0c;一篇优秀的文案可以吸引更多的潜在客户&#xff0c;提高转化率&#xff0c;带来更多的收益。然而&#xff0c;写出优秀的文案有时是一项具有挑战性的任务。许多人不得不花费大量的时间和精力来编辑和重写它们&#xff0c;这不仅耗时费力&…
阅读更多...
具有柔性结构的孤岛直流微电网的分级控制（Malab代码实现）

具有柔性结构的孤岛直流微电网的分级控制（Malab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f4cb;&#x1f4cb;&#x1f4cb;本文目录如下&#xff1a;⛳️⛳️⛳️ 目录 1 概述 2 数学…
阅读更多...
PICO 4 Pro：加入眼动和面部追踪，VR体验乐趣加倍

PICO 4 Pro：加入眼动和面部追踪，VR体验乐趣加倍

VR产品的体验在最近几年得到长足的进展&#xff0c;其中有几个重要的关键点。2019-2020年&#xff0c;VR一体机超越PC VR成为主流&#xff0c;便携性和综合体验做到了极佳的均衡。到了2022年&#xff0c;Pancake光学、彩色VST透视、眼动追踪、面部追踪等技术开始落地&#xff0…
阅读更多...
MB510 3BSE002540R1在机器视觉工业领域最基本的应用

MB510 3BSE002540R1在机器视觉工业领域最基本的应用

​ MB510 3BSE002540R1在机器视觉工业领域最基本的应用 大家都说人类感知外界信息的80%是通过眼睛获得的&#xff0c;图像包含的信息量是最巨大的。那么机器视觉技术的出现&#xff0c;就是为机器设备安上了感知外界的眼睛&#xff0c;使机器具有像人一样的视觉功能&#xff0c…
阅读更多...
京东淘宝天猫户外服饰行业数据分析（电商数据查询软件）

京东淘宝天猫户外服饰行业数据分析（电商数据查询软件）

户外运动越来越火&#xff0c;甚至还形成了一种独有的穿衣风格——“户外穿搭风”。 冲锋衣、工装裤、工装裙、口袋马甲、渔夫帽等都是这两年在这种户外穿搭风潮席卷之下爆红的产物。无论是在京东还是淘宝天猫&#xff0c;这类服饰的销售表现都比较出色。 京东数据&#xff1a;…
阅读更多...
Spark大数据处理学习笔记（3.1）掌握RDD的创建

Spark大数据处理学习笔记（3.1）掌握RDD的创建

该文章主要为完成实训任务&#xff0c;详细实现过程及结果见【http://t.csdn.cn/oT0of】 文章目录 一、准备工作1.1 准备文件1.1.1 准备本地系统文件1.1.2 启动HDFS服务1.1.3 上传文件到HDFS 1.2 启动Spark Shell1.2.1 启动Spark服务1.2.2 启动Spark Shell 二、创建RDD2.1 通过…
阅读更多...
Java语言背景介绍 及 语言跨平台原理

Java语言背景介绍 及 语言跨平台原理

01_Java语言背景介绍 Java语言的三个版本&#xff1a; ●Java SE ● Java ME ●Java EE Java SE&#xff1a; Java语言的&#xff08;标准版&#xff09;&#xff0c;用于桌面应用的开发&#xff0c;是其他两个版本的基础。 桌面应用&#xff1a;GUI程序&#xff0c;是采…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023