Electron笔记

基础环境搭建

官网:https://www.electronjs.org/zh/

这一套笔记根据这套视频而写的

创建项目

方式一:

官网点击GitHub往下拉找到快速入门就能看到下面这几个命令了

git clone https://github.com/electron/electron-quick-start  //克隆项目
cd electron-quick-start  //切换到项目目录
npm install //这里可能会有报错问题,本人查了gpt说是什么连接远程失败,这里本人建议使用cnpm淘宝镜像,没有的可以百度安装一下,yarn也不行(亲测yarn安装还是报错)
npm start //启动项目

目录结构

在这里插入图片描述

方式二:

先安装

cnpm install --save-dev electron   //这里也是建议使用cnpm淘宝镜像

直接使用npm或者yarn都可能会报错,官方也有解释,这里本人使用cnpm就没问题

在这里插入图片描述

然后在package.json里面创建如下内容

{"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js", //这里是主入口"author": "萧寂","license": "MIT","scripts": {"start": "electron ." //运行的命令},"devDependencies": {"electron": "^26.0.0"}
}

如果安装了nodemon,可以在script节点进行如下配置,可以监听js的代码并实时变化
在html代码改变后不会立即监听,需要切换到应用里面按下CTRL+R即可刷新

"scripts": {"start": "nodemon --watch main.js --exec npm run build","build": "electron ."
},

在同级创建main.js,然后在main.js中插入以下内容

const { app, BrowserWindow } = require("electron");
const createWindow = () => {// 创建窗口let win = new BrowserWindow({width: 800,height: 600,});//当前窗口显示的页面win.loadFile("index.html");
};// app启动之后创建窗口
app.on("ready", () => {console.log("窗口加载");createWindow();
});// 生命周期
// 通过on监听事件// 监听关闭的
app.on("close", () => {console.log("当前窗口关闭");
});app.on("window-all-closed", () => {console.log("所有窗口关闭");//退出应用app.quit();
});

CTRL+SHIFT+I可以打开调试面板
同级下创建index.html文件

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP --><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'"/><title>萧寂</title></head><body><h1>你好!</h1>我们正在使用 Node.js <span id="node-version"></span>, Chromium<span id="chrome-version"></span>, 和 Electron<span id="electron-version"></span>.</body>
</html>

然后直接运行

npm start

目录结构

在这里插入图片描述

因为第二种方式目录结构简单,所以在这里演示的所有代码都以第二种创建方式基础上写的

electron生命周期事件

ready:app初始化完成  //重要
dom-ready:一个窗口中的文本加载完成  //重要
did-finsh-load:导航完成时触发   //重要
window-all-closed:所有窗口都被关闭时触发  //重要
before-quit:在关闭窗口之前触发
will-quit:在窗口关闭并且应用退出时触发
quit:当所有窗口被关闭时触发
close:当窗口关闭时触发,此时应删除窗口引用

main.js代码

const { app, BrowserWindow } = require("electron")
const createWindow = () => {// 创建窗口let win = new BrowserWindow({width: 800,height: 600,})//当前窗口显示的页面win.loadFile("index.html")// 这个webContents对象可以控制dom元素加载事件win.webContents.on('did-finish-load', () => {console.log('3333->did-finish-load')})win.webContents.on('dom-ready', () => {console.log('2222->dom-ready')})// 窗口关闭win.on('close', () => {console.log('8888->close')// 从性能考虑,应该释放窗体这个变量,删除窗体引用win = null})
}// 生命周期
// 通过on监听事件
app.on('ready', () => {console.log("1111->ready")createWindow()
})app.on("window-all-closed", () => {// 如果监听了window-all-closed这个事件,需要在事件里面主动退出应用,没有监听事件的话默认会直接退出应用// 但如果监听了此事件,但没有退出操作的话,后续的567生命周期也不会执行console.log("4444->window-all-closed")//退出应用app.quit()
})app.on("before-quit", () => {console.log("5555->before-quit")
})app.on("will-quit", () => {console.log("6666->will-quit")
})app.on("quit", () => {console.log("7777->quit")
})

从打开窗体到关闭窗体打印结果如下

在这里插入图片描述

创建窗体时所携带的一些属性

也是main.js代码

const { app, BrowserWindow } = require("electron")
const createWindow = () => {// 创建窗口let win = new BrowserWindow({x: 100, y: 50, //窗体坐标show: false, //不展示窗体width: 800,height: 600, //长宽maxHeight: 600,maxWidth: 1000, //最大宽高minHeight: 200,minWidth: 300, //最小宽高resizable: false, //不允许缩放title: "萧寂", //标题(加上这个属性,在页面中就不要有title标签了)icon: "./及格.png", //设置icon图标// frame: false, //只保留主体部分,不保留其他的选项卡窗口了,隐藏菜单栏// transparent: true, //将窗体完全透明化autoHideMenuBar: true, //只保留标题，不保留其他的选项卡部分})// show需要设置false,意思就是默认不显示窗体,然后执行下面这个事件,ready-to-show:等待完毕准备加载执行,适用于页面显示,监听到了再执行show()win.on('ready-to-show', () => {win.show()})//当前窗口显示的页面win.loadFile("index.html")// 窗口关闭win.on('close', () => {console.log('close')win = null})
}// 窗口加载和关闭
app.on('ready', createWindow)
app.on("window-all-closed", () => {console.log("window-all-closed")app.quit()
})

窗口标题及环境(创建窗口)

这里要说明一下，低版本直接可以使用一个remote，主进程稍微配置一下就能创建窗口了，高版本就不行了，高版本需要安装一个@electron/remote模块，通过对这个模块稍微配置一下也能创建窗口了，本人之前版本是"electron": "^26.0.0"，"@electron/remote": "^2.0.11"，[具体配置可以可以看看这个小哥的博客](https://blog.csdn.net/qq_39077394/article/details/125667918?ops_request_misc=%7B%22request%5Fid%22%3A%22169651971016800213043799%22%2C%22scm%22%3A%2220140713.130102334.pc%5Fall.%22%7D&request_id=169651971016800213043799&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_ecpm_v1~rank_v31_ecpm-1-125667918-null-null.142v94insert_down28v1&utm_term=enableRemoteModule%3A true不能使用remote&spm=1018.2226.3001.4187)，我下面的代码和这两个不一样我是在主进程创建窗口，渲染进程向主进程发请求才能创建窗体（下面代码示例就是这个方法），因为方式和另两种不一样，因此记录一下

ctrl+r 可以刷新当前窗口的index.html样式,ctrl+shift+i可以打开调试窗口

这里强调一下main.js为主进程,创建的js里面重新创建的窗口为渲染进程

主进程main.js代码如下

const { app, BrowserWindow, ipcMain } = require("electron") // ipcMain用于渲染进程创建窗体使用
const createWindow = () => {// 创建窗口let win = new BrowserWindow({x: 100,y: 50, //窗体坐标 webPreferences: {nodeIntegration: true,contextIsolation: false,  //加入这两行代码就可以正常使用require了,不会报错了}})//当前窗口显示的页面win.loadFile("index.html")// 窗口关闭win.on('close', () => {console.log('close')win = null})
}
// 窗口加载和关闭
app.on('ready', createWindow)
app.on("window-all-closed", () => {console.log("window-all-closed")app.quit()
})// 下面代码就是创建渲染进程窗体代码
// 在主进程中监听渲染进程的请求
// open-window后面的回调函数,参数一默认是事件对象,参数二为渲染进程传递来的数据
// pageFileName为ipcRenderer.send()的第二个参数,ipcRenderer.send()由渲染进程发起,参数一为事件名,参数二为页面配置(大小,位置等等)
ipcMain.on('open-window', (event, winconfig) => {console.log('winconfig', winconfig)// 创建新窗口并设置相应的配置(配置由渲染进程提供)let newWindow = new BrowserWindow(winconfig)// 这里设置的是winconfig.pageFileName,所以渲染进程的请求的配置中必须pageFileName代表页面newWindow.loadFile(winconfig.pageFileName)// 监听创建的窗体关闭事件newWindow.on('close', () => {console.log('close')newWindow = null})
})

主进程页面index.html代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /><title>萧寂</title>
</head><body><h1>窗口标题</h1><button id="btn">打开第一个新窗口</button><button id="btn2">打开第二个新窗口</button><!-- 这里必须要使用外联,不能直接在下面写,不然会报错,大概意思就是不能使用内联脚本 --><script src="./index.js"></script>
</body>
</html>

渲染进程index.js代码

// 这里强调一下main.js为主进程,窗口里面页面点击创建的js里面重新创建的窗口为渲染进程
// require直接使用会报错,因为electron是不被允许直接require的,不给这个权限,需要我们自行放开
// 权限需要在窗口的配置定义webPreferences对象,值为 {nodeIntegration: true,contextIsolation: false},这样就可以正常使用require了// 创建窗口这里使用的是electron自带的ipcRenderer属性,它是向主进程发送创建窗体请求,参数一为事件名,参数二为窗体配置
const { ipcRenderer } = require("electron")
const path = require("path")
window.addEventListener("DOMContentLoaded", () => {// 点击按钮打开新窗口// 获取btnconst btn = document.getElementById("btn")// 按钮点击打开新窗口btn.addEventListener("click", () => {// 创建新窗口(向主进程发起请求,创建窗体,并显示pageFileName指定的页面)ipcRenderer.send('open-window', {width: 600,height: 400,webPreferences: {nodeIntegration: true,contextIsolation: false},pageFileName: path.join(__dirname, "list.html") // 确保传递了正确的页面文件名,list.html需要显示的页面})})// 打开第二个窗口// 获取btnconst btn2 = document.getElementById("btn2")// 按钮点击打开新窗口btn2.addEventListener("click", () => {// 创建新窗口(向主进程发起请求,创建窗体,并显示pageFileName指定的页面)ipcRenderer.send('open-window', {width: 200,height: 200,webPreferences: {nodeIntegration: true,contextIsolation: false},pageFileName: path.join(__dirname, "list2.html") // 确保传递了正确的页面文件名,list2.html需要显示的页面})})
})

项目结构

在这里插入图片描述

效果图

在这里插入图片描述

自定义窗口的实现

项目结构

在这里插入图片描述

安装

npm install --save @electron/remote

main.js代码如下

const { app, BrowserWindow } = require("electron")
const createWindow = () => {// 创建窗口let win = new BrowserWindow({x: 100,y: 50, //窗体坐标 frame: false, // 只保留主体部分，然后后面的样式全部都是由html去模拟webPreferences: {nodeIntegration: true,contextIsolation: false,  //加入这两行代码就可以正常使用require了,不会报错了enableRemoteModule: true}})require('@electron/remote/main').initialize()require("@electron/remote/main").enable(win.webContents)//当前窗口显示的页面win.loadFile("index.html")// 窗口关闭win.on('close', () => {console.log('close')win = null})
}// 窗口加载和关闭
app.on('ready', createWindow)
app.on("window-all-closed", () => {console.log("window-all-closed")app.quit()
})

index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /><title>萧寂</title><link rel="stylesheet" href="./index.css">
</head><body><main><h1 class="box">主题内容</h1><div><span>一</span><span>口</span><span>X</span></div></main><h2>上面的三个模拟最小化，最大化和关闭</h2><script src="./index.js"></script>
</body></html>

index.css

main {display: flex;justify-content: space-evenly;align-items: center;
}
.box {color: red;
}
span {padding: 10px 5px;cursor: pointer;
}

index.js

const remote = require("@electron/remote")window.addEventListener('DOMContentLoaded', () => {//利用remote获取当前窗口对象let mainwin = remote.getCurrentWindow()const spans = document.querySelectorAll('span')// 最小化spans[0].addEventListener("click", () => {mainwin.minimize() //窗口最小化})// 放大spans[1].addEventListener("click", () => {// 最大化操作console.log('mainwin.isMaximized()', mainwin.isMaximized())  //false,返回布尔值,代表当前界面是否是最大化了if (!mainwin.isMaximized()) {mainwin.maximize() //如果没有最大化的话,给个最大化} else {mainwin.restore() //如果是最大化了,给它恢复到初始状态}})// 关闭窗口spans[2].addEventListener("click", () => {mainwin.close()  //关闭窗口})
})

效果图

在这里插入图片描述

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

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

相关文章

【有限域除法】二元多项式除法电路原理及C语言实现

【有限域除法】二元多项式除法电路原理及C语言实现

二元多项式除法电路原理 例： g ( x ) = x 4 + x 2 + x + 1 g(x)=x^4 + x^2+x+1
阅读更多...
gorm 自定义时间、字符串数组类型

gorm 自定义时间、字符串数组类型

文章目录 自定义时间类型自定义字符串数组测试与完整代码测试代码测试结果 GORM 是GO语言中一款强大友好的ORM框架&#xff0c;但在使用过程中内置的数据类型不能满足以下两个需求&#xff0c;如下&#xff1a; time.Time类型返回的是 2023-10-03T09:12:08.5352808:00这种字符串…
阅读更多...
Qt之显示PDF文件

Qt之显示PDF文件

之前使用过mupdf库&#xff0c;能够成功显示pdf&#xff0c;但是我用着有BUG&#xff0c;不太理解它的代码&#xff0c;搞了好久都不行。后面又试了其他库&#xff0c;如pdfium、popler、下载了很多例程&#xff0c;都跑不起来&#xff01;后面偶然得知xpdf库&#xff0c;看起来…
阅读更多...
数据科学家的编程语言

数据科学家的编程语言

数据科学家的编程语言 在今天有256种编程语言可供选择&#xff0c;选择要学习的语言可能会令人不知所措和困难。有些语言更适用于构建游戏&#xff0c;而有些更适用于软件工程&#xff0c;还有一些更适用于数据科学。 编程语言的类型 低级编程语言是计算机用来执行操作的最容…
阅读更多...
@ConfigurationProperties配置绑定~

@ConfigurationProperties配置绑定~

ConfigurationProperties注解是Spring Boot中的一个注解&#xff0c;用于将配置文件中的属性值绑定到Java类中的字段上。 ConfigurationProperties注解的作用包括&#xff1a; 实现配置文件属性和Java类字段的映射&#xff0c;简化了读取配置文件的操作。 可以指定配置文件中…
阅读更多...
vue3 中使用echarts图表——柱状图

vue3 中使用echarts图表——柱状图

柱状图是比较常用的图形结构&#xff0c;所以我先收集一些精美的柱状图 一、柱状图&#xff1a;设置圆角和颜色 <template><div class"box" ref"chartDom"></div> </template> <script setup> import { ref, onMounted } fr…
阅读更多...
CSS波浪进度条

CSS波浪进度条

目录 1. &#x1f310; 介绍 2. &#x1f3d7;️ HTML结构 3. &#x1f3a8; 页面样式 4. &#x1f4e6; 容器和波浪 5. &#x1f30a; 波浪效果 6. &#x1f4ca; 进度文本 7. &#x1f504; 旋转动画 8. &#x1f31f; 整体效果 9. &#x1f389; 结论 获取完整代码…
阅读更多...
使用Scipy优化梯度下降问题

使用Scipy优化梯度下降问题

目 录 问题重述 附加问题 步骤实施 1.查看Scipy官网SciPy&#xff0c;找到优化有关的模块&#xff08;Optimize&#xff09; 2.研究多种优化策略&#xff0c;选择最符合代码的方案进行优化 3.minimize函数参数及其返回值 4.代码展示 5.结果展示 6.进一步优化 6.1对…
阅读更多...
NEFU数字图像处理（1）绪论

NEFU数字图像处理（1）绪论

一、简介 1.1什么是数字图像 图像是三维场景在二维平面上的影像。根据其存储方式和表现形式&#xff0c;可以将图像分为模拟图像和数字图像两大类 图像处理方法&#xff1a;光学方法、电子学方法 模拟图像&#xff1a;连续的图像数字图像&#xff1a;通过对时间上和数值上连续…
阅读更多...
边缘计算网关

边缘计算网关

一、项目整体框架图 二、项目整体描述 边缘计算网关项目主要实现了智能家居场景和工业物联网场景下设备的数据采集和控制。 整个项目分为三大层&#xff1a;用户接口层、网关层、设备层。 其中用户层通过QT客户端、WEB界面及阿里云提供数据展示和用户接口。 网关使用虚拟机代替…
阅读更多...
使用GDIView排查GDI对象泄漏导致的程序UI界面绘制异常问题

使用GDIView排查GDI对象泄漏导致的程序UI界面绘制异常问题

目录 1、问题说明 2、初步分析 3、查看任务管理器&#xff0c;并使用GDIView工具分析 4、GDIView可能对Win10兼容性不好&#xff0c;显示的GDI对象个数不太准确 5、采用历史版本比对法&#xff0c;确定初次出现问题的时间点&#xff0c;并查看前一天的代码修改记录 6、将…
阅读更多...
Java日期的学习篇

Java日期的学习篇

关于日期的学习 目录 关于日期的学习JDK8以前的APIDate Date常用APIDate的API应用 SimpleDateFormatSimpleDateFormat常用API测试 反向格式化(逆操作)测试 训练案例需求(秒杀活动)实现 Calendar需求痛点常见API应用测试 JDK8及以后的API(修改与新增)为啥学习(推荐使用)新增的AP…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023