【前端】-【electron】

文章目录

  • 介绍
    • electron工作流程
    • 环境搭建
  • electron生命周期（app的生命周期）
  • 窗口尺寸
  • 窗口标题
  • 自定义窗口的实现
  • 阻止窗口关闭
  • 父子及模态窗口
  • 自定义菜单

介绍

electron技术架构：chromium、node.js、native.apis
在这里插入图片描述

electron工作流程

在这里插入图片描述
桌面应用就是运行在不同操作系统上的软件，软件中的功能是通过native.apis跟不同操作系统进行交互实现的，想实现什么功能调用响应的API即可
electron主要有两类进程：

  1. 主进程：main process
  2. 渲染进程：renderer process

当我们启动一个APP时，他首先会启动主进程，一般是main.js或index.js中的代码，主进程启动成功后会创建一个native ui，然后在nativeui里创建一个或多个Browse window，用于呈现界面（即web界面），每个Browse window可以看作是一个渲染进程，每个渲染进程相互独立，各自运行在自己的沙箱环境中，但是app在使用的过程中，不同窗口会进行交互，于是electron提供了IPC、RPC通信机制供窗口与窗口进行数据传输
在这里插入图片描述
只有主进程能操作原生API，能管理所有WEB界面，和这些web界面对应的渲染进程
在这里插入图片描述
渲染进程支持所有的DOM操作、node api的调用操作

环境搭建

package.json中main字段指定的文件就是app启动后，启动的主进程；script字段指定的是启动项目的命令
在这里插入图片描述

electron生命周期（app的生命周期）

ready：app初始化完成后会被调用一次，一般用于窗口初始化
dom-ready：一个窗口中的文本加载完成，与dom操作相关，有个webcontext对象可以调用
did-finsh-load：导航完成时触发，即选项卡的旋转器停止旋转时触发，且指派了onload事件。由webcontext调用
window-all-closed：所有窗口都被关闭时触发，如果我们没有监听这个方法，那么所有窗口关闭后，应用程序就默认退出，如果我们监听了这个方法，我们就可以自己决定所有窗口关闭后，应用程序是否退出，如果我们选择不退出，那么后续的before-quit、will-quit、quit都失效了
before-quit：在关闭窗口之前触发
will-quit：在窗口关闭并且应用退出时触发
quit：所有窗口被关闭时触发
closed：当窗口关闭时触发，此时应删除窗口引用

const { app, BrowserWindow } = require('electron')// 创建窗口
function createWindow() {let mainWindow = new BrowserWindow({width: 800,height:400})mainWindow.loadFile('index.html')// webContents用于操作dommainWindow.webContents.on('did-finish-load',() => {console.log("33333------did-finish-load")})mainWindow.webContents.on('dom-ready',() => {console.log("22222------dom-ready")})mainWindow.on('close',() => {console.log("88888------close")mainWindow = null})
}app.on('ready',() => {console.log("11111------ready")createWindow()
})app.on('window-all-closed',() => {console.log("44444------window-all-closed")
})app.on('before-quit',() => {console.log("55555------before-quit")
})app.on('will-quit',() => {console.log("66666------will-quit")
})app.on('quit',() => {console.log("77777------quit")
})

执行顺序：1——2——3——8——4——5——6——7

窗口尺寸

const { app, BrowserWindow } = require('electron')// 创建窗口
function createWindow() {let mainWindow = new BrowserWindow({x:100,// 设置窗口显示的位置，距离左边的距离y:100,// 设置窗口显示的位置，距离右边的距离width: 800,height:400,maxHeight:600,// 窗口最大高度minHeight:200,// 窗口最小高度maxWidth:1000,// 窗口最大宽度minWidth:300,// 窗口最小宽度resizable:false// 是否允许缩放窗口，默认为true，可以缩放窗口，设为false})mainWindow.loadFile('index.html')mainWindow.on('close',() => {console.log("88888------close")mainWindow = null})
}app.on('ready',createWindow)app.on('window-all-closed',() => {console.log("window-all-closed")app.quit()
})

注意此时有个bug：窗口弹出来，然后有一段白屏时间，然后再出现内容，这是因为let mainWindow = new BrowserWindow()执行完成后就会显示出窗口来，此时窗口里面是没有内容的，我们设置show:false，让窗口创建好也不展示出来，然后加载index.html文件，加载完成后，监听窗口的ready-to-show方法，再把窗口展示出来

const { app, BrowserWindow } = require('electron')// 创建窗口
function createWindow() {let mainWindow = new BrowserWindow({show:false,width: 800,height:400})mainWindow.loadFile('index.html')// 监听窗口已经准备好去展示了mainWindow.on('ready-to-show',()=>{mainWindow.show()})mainWindow.on('close',() => {console.log("88888------close")mainWindow = null})
}app.on('ready',createWindow)app.on('window-all-closed',() => {console.log("window-all-closed")app.quit()
})

窗口标题

在这里插入图片描述

const { app, BrowserWindow } = require('electron')// 创建窗口
function createWindow() {let mainWindow = new BrowserWindow({show:false,width: 800,height:400,frame: false,// 是否有边框transparent:true,// 窗体透明，只有frame: false时才生效icon:'lg.ico',// 图标title:'拉钩教育',// 窗口标题autoHideMenuBar: true// 隐藏菜单、选项卡})mainWindow.loadFile('index.html')// 监听窗口已经准备好去展示了mainWindow.on('ready-to-show',()=>{mainWindow.show()})mainWindow.on('close',() => {console.log("88888------close")mainWindow = null})
}app.on('ready',createWindow)app.on('window-all-closed',() => {console.log("window-all-closed")app.quit()
})

需求：窗口里面提供一个按钮，点击按钮，再弹出一个窗口

ctr+r可以对应用进行重载
25版本后可以使用ipcMain和ipcRenderer实现新窗口

index.html代码如下：
在这里插入图片描述
版本一：主进程允许渲染进程使用BrowserWindow实现，main.js代码如下：

const { app, BrowserWindow } = require('electron')// 创建窗口
function createWindow() {let mainWindow = new BrowserWindow({show:false,width: 800,height:400,webPreferences:{nodeIntegration:true,// 允许渲染进程使用node集成环境contextIsolation: false,// 如果nodeIntegration:true失效，那么需要添加这行代码 }})mainWindow.loadFile('index.html')// 监听窗口已经准备好去展示了mainWindow.on('ready-to-show',()=>{mainWindow.show()})mainWindow.on('close',() => {console.log("88888------close")mainWindow = null})
}app.on('ready',createWindow)app.on('window-all-closed',() => {console.log("window-all-closed")app.quit()
})

index.js代码（index.html的js代码）如下：
在这里插入图片描述
版本二：主进程允许渲染进程使用remote实现，main.js代码如下：

const { app, BrowserWindow } = require('electron')// 创建窗口
function createWindow() {let mainWindow = new BrowserWindow({show:false,width: 800,height:400,webPreferences:{enableRemoteModule:true//允许使用远程模式},autoHideMenuBar: true// 隐藏菜单、选项卡})mainWindow.loadFile('index.html')// 监听窗口已经准备好去展示了mainWindow.on('ready-to-show',()=>{mainWindow.show()})mainWindow.on('close',() => {console.log("88888------close")mainWindow = null})
}app.on('ready',createWindow)app.on('window-all-closed',() => {console.log("window-all-closed")app.quit()
})

index.js代码（index.html的js代码）如下：

const { remote } = require('electron')
window.addEventListener('DOMContentLoaded',() => {// 点击按钮打开一个新窗口const oBtn = document.getElementsById('btn')oBtn.addEventListener('click',() => {// 创建窗口let indexWindow = new remote.BrowserWindow({width:200,height:200})indexWindow.loadFile('sub.html')indexWindow.on('close',() => {indexWindow = null})})
})

自定义窗口的实现

需求：点击窗口右上角的三个图标，分别执行相应操作
在这里插入图片描述
index.html代码如下，红框中为三个图标的代码
在这里插入图片描述
main.js中代码如下：

const { app, BrowserWindow } = require('electron')// 创建窗口
function createWindow() {let mainWindow = new BrowserWindow({show:false,width: 800,height:400,webPreferences:{nodeIntegration:true,// 允许渲染进程使用node集成环境contextIsolation: false,// 如果nodeIntegration:true失效，那么需要添加这行代码enableRemoteModule:true//允许使用远程模式},autoHideMenuBar: true// 隐藏菜单、选项卡})mainWindow.loadFile('index.html')// 监听窗口已经准备好去展示了mainWindow.on('ready-to-show',()=>{mainWindow.show()})mainWindow.on('close',() => {console.log("88888------close")mainWindow = null})
}app.on('ready',createWindow)app.on('window-all-closed',() => {console.log("window-all-closed")app.quit()
})

index.html的js代码写在index.js中，如下：

const { remote } = require('electron')
window.addEventListener('DOMContentLoaded',() => {// 利用remote可以获取当前窗口对象let mainWindow = remote.getCurrentWindow()// 获取元素添加点击操作的监听let aBtn = document.getElementsByClassName('windowTool')[0].getElementsByTagName('div')aBtn[0].addEventListener('click',() => {// 关闭窗口mainWindow.close()})aBtn[1].addEventListener('click',() => {// 最大化console.log(mainWindow.isMaximized())// 先判断当前窗口是不是最大化，如果是，则回到原来的大小，如果不是最大化，则最大化当前窗口if(!mainWindow.isMaximized()){mainWindow.maximize()// 让当前窗口最大化}else{mainWindow.restore()// 让当前窗口回到原来的大小}})aBtn[2].addEventListener('click',() => {// 最小化console.log(mainWindow.isMinimized())if(!mainWindow.isMaximized()){mainWindow.minimize()// 让当前窗口最小化}})
})

阻止窗口关闭

点击右上角的关闭按钮后，弹出浮窗提示用户是否关闭，若用户选择关闭，则关闭应用，否则关闭浮窗，index.html页面如下：
在这里插入图片描述
index.html中的js代码保存在index.js中，代码如下：

const { remote } = require('electron')
window.addEventListener('DOMContentLoaded',() => {// 监听mainWindow.close()window.onbeforeunload = function(){let oBox = document.getElementsByClassName('isClose')[0]oBox.style.display = 'block'// 弹窗出现let yseBtn = oBox.getElementsByTagName('span')[0]let noBtn = oBox.getElementsByTagName('span')[1]yseBtn.addEventListener('click', () => {// 此时关闭窗口需要用destory，// 因为onbeforeunload用于监听mainWindow.close()，如果这里还用mainWindow.close关闭的话，会陷入死循环mainWindow.destory()})noBtn.addEventListener('click', () => {oBox.style.display = 'none'// 去掉弹窗})}// 利用remote可以获取当前窗口对象let mainWindow = remote.getCurrentWindow()// 获取元素添加点击操作的监听let aBtn = document.getElementsByClassName('windowTool')[0].getElementsByTagName('div')aBtn[0].addEventListener('click',() => {// 关闭窗口mainWindow.close()})aBtn[1].addEventListener('click',() => {// 最大化console.log(mainWindow.isMaximized())// 先判断当前窗口是不是最大化，如果是，则回到原来的大小，如果不是最大化，则最大化当前窗口if(!mainWindow.isMaximized()){mainWindow.maximize()// 让当前窗口最大化}else{mainWindow.restore()// 让当前窗口回到原来的大小}})aBtn[2].addEventListener('click',() => {// 最小化console.log(mainWindow.isMinimized())if(!mainWindow.isMaximized()){mainWindow.minimize()// 让当前窗口最小化}})
})

父子及模态窗口

在这里插入图片描述
index.js代码如下：

const { remote } = require('electron')
window.addEventListener('DOMContentLoaded',() => {// 点击按钮打开一个新窗口const oBtn = document.getElementsById('btn')oBtn.addEventListener('click',() => {// 创建窗口let indexWindow = new remote.BrowserWindow({parent:remote.getCurrentWindow(),// 指定子窗口的父窗口是主线程的窗口modal:true,// 子窗口是模态化窗口，当子窗口出现时，父窗口不能游任何操作，也不能移动width:200,height:200})indexWindow.loadFile('sub.html')indexWindow.on('close',() => {indexWindow = null})})
})

自定义菜单

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

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

相关文章

微服务开发：断路器详解

微服务开发：断路器详解

微服务是目前业界使用的最重要的实现方面。通过使用微服务架构，开发人员可以消除他们以前在单体应用程序中遇到的许多问题。展望未来，人们开始在微服务中搜索和采用各种模式。大多数时候，新模式的产生是为了解决另一个模式中出现的常见问题。…
阅读更多...
TCP协议实现一对一聊天

TCP协议实现一对一聊天

服务端代码： import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.util.Scanner;/*** 发送消息线程*/ class Send e…
阅读更多...
Scrapy爬虫数据存储为JSON文件的解决方案

Scrapy爬虫数据存储为JSON文件的解决方案

什么是JSON文件 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人们阅读和编写，同时也易于机器解析和生成。它基于JavaScript Spark语言的一个子集，但独立于Smashing语言，因此在许多中…
阅读更多...
实战oj题——设计循环队列

实战oj题——设计循环队列

前言：今天我们来实现循环队列。 各个接口的实现 创建队列： typedef struct {int* a;int front;int back;int k;} MyCircularQueue;我们的队列是由数组储存的，所以我们队列中得定义一个数组，front代表我们的首元素，ba…
阅读更多...
解决：spring boot+mybatis进行增删改查的时候，接收到前端数据，并且执行成功了，但是数据库里面添加的内容都是空值

解决：spring boot+mybatis进行增删改查的时候，接收到前端数据，并且执行成功了，但是数据库里面添加的内容都是空值

在写spring boot整合mybatis的时候，我在Apifox里面测试，数据也传递过去了，后端服务器也接收到了参数，就是数据库里面添加的都是空值？？？ 前端接收到了数据，并且没有报错 Apifox里面也…
阅读更多...
陪诊系统：基于自然语言处理的患者沟通创新

陪诊系统：基于自然语言处理的患者沟通创新

医疗领域的数字化转型正日益引入创新技术，其中基于自然语言处理（NLP）的陪诊系统成为提升患者沟通的一项关键技术。本文将深入研究这一领域，介绍陪诊系统如何借助NLP实现患者沟通的创新，并提供一个简单的Python代码示例…
阅读更多...
Leetcode—383.赎金信【简单】

Leetcode—383.赎金信【简单】

2023每日刷题（五十） Leetcode—383.赎金信 实现代码 class Solution { public:int arr[26] {0};int arr2[26] {0};bool canConstruct(string ransomNote, string magazine) {int len ransomNote.size();int len2 magazine.size();for(int i 0; i …
阅读更多...
西南科技大学模拟电子技术实验三（BJT单管共射放大电路测试）预习报告

西南科技大学模拟电子技术实验三（BJT单管共射放大电路测试）预习报告

一、计算/设计过程 说明：本实验是验证性实验，计算预测验证结果。是设计性实验一定要从系统指标计算出元件参数过程，越详细越好。用公式输入法完成相关公式内容，不得贴手写图片。（注意：从抽象公式直接得出结果，不得分，页数可根据内容调整） 二、画出并填写实验指导书上…
阅读更多...
网络安全威胁——跨站脚本攻击

网络安全威胁——跨站脚本攻击

跨站脚本攻击 1. 定义2. 跨站脚本攻击如何工作3. 跨站脚本攻击类型4. 如何防止跨站脚本攻击 1. 定义 跨站脚本攻击（Cross-site Scripting，通常称为XSS），是一种典型的Web程序漏洞利用攻击，在线论坛、博客、留言板等共享…
阅读更多...
Java利用UDP实现简单的双人聊天

Java利用UDP实现简单的双人聊天

一、创建新项目 首先创建一个新的项目，并命名。 二、实现代码 import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.net.*; import java.io.IOException; import java.lang.String; public class liaotian extends JFrame{ pri…
阅读更多...
今日现货黄金最新建议

今日现货黄金最新建议

近期现货黄金价格再度逼近历史高位，很多本来在场外观望的投资者，都纷纷希望进场一试身手。然而大涨大跌的行情并不是很适合新手投资者参与，如果大家还没做好技术上的准备，可以多听听正规交易平台的专业人士的意见。 在正式入市之前…
阅读更多...
LLM大语言模型（一）：ChatGLM3-6B本地部署

LLM大语言模型（一）：ChatGLM3-6B本地部署

目录 前言 本机环境 ChatGLM3代码库下载 模型文件下载 修改为从本地模型文件启动 启动模型网页版对话demo 超参数设置 GPU资源使用情况 （网页对话非常流畅） 前言 LLM大语言模型工程化，在本地搭建一套开源的LLM，方便后续的…
阅读更多...
【MATLAB】SSA+FFT+HHT组合算法

【MATLAB】SSA+FFT+HHT组合算法

有意向获取代码，请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 SSAFFTHHT组合算法是一种基于奇异谱分析（SSA）、快速傅里叶变换（FFT）和希尔伯特-黄变换（HHT）的组合算法。 其中&am…
阅读更多...
搭梯子之后电脑连接WIFI打不开浏览器网页：远程计算机或者设备不接受连接

搭梯子之后电脑连接WIFI打不开浏览器网页：远程计算机或者设备不接受连接

问题描述： 打不开网页，但是能正常使用微信等app windows网络诊断： 远程计算机或者设备不接受连接 解决办法： 电脑搜索【internet选项】 进入连接，点击局域网设置，将里面的代理服务器选项关掉就可以正常打开…
阅读更多...
西南科技大学模拟电子技术实验五（集成运算放大器的应用设计）预习报告

西南科技大学模拟电子技术实验五（集成运算放大器的应用设计）预习报告

一、计算/设计过程 设计一：用集成运放设计一个输入为0.05v，放大为-100的反相比例运算电路。 对于理想电路，反相比例运算电路的输出电压与输入电压之间的关系如下： =-100，所以 =100 若是假定R1为100k，则R2= =1k 为了减小输入级偏置电流引起的运算误差，在同相输入端…
阅读更多...
103.进程概述

103.进程概述

目录 1.并行和并发 区别： 2.PCB 3.进程状态 4. 进程命令 从严格意义上来讲，程序和进程是两个不同的概念，他们的状态，占用的系统资源都是不同的。 程序：程序是一种静态实体，是存储在计算机存储介质上的…
阅读更多...
Android Glide自定义AppCompatImageView切分成若干小格子，每个小格子onDraw绘制Bitmap，Kotlin（1）

Android Glide自定义AppCompatImageView切分成若干小格子，每个小格子onDraw绘制Bitmap，Kotlin（1）

Android Glide自定义AppCompatImageView切分成若干小格子，每个小格子onDraw绘制Bitmap，Kotlin（1） 垂直方向的RecyclerView，每行一个AppCompatImageView，每个AppCompatImageView被均匀切割成n个小格子&#…
阅读更多...
提高工厂能源效率的关键：工厂能耗监测平台

提高工厂能源效率的关键：工厂能耗监测平台

工业做为能源消耗的重要场所，所以节能减排对工业来讲是一个亟需解决的问题。除了对设备进行更新换代外，还需要能源管理消耗监测平台，帮助企业实现节能减排的目标。 工厂能源消费量非常庞大，能源比较难以监测与控制。传统能源的管…
阅读更多...
P6 Linux 系统中的文件类型

P6 Linux 系统中的文件类型

目录 前言 ​编辑 01 linux系统查看文件类型 02 普通文件 - 03 目录文件 d 04 字符设备文件 c 和块设备文件 b 05 符号链接文件 l 06 管道文件 p 07 套接字文件 s 总结 前言 🎬 个人…
阅读更多...
Python+requests+unittest执行接口自动化测试详情

Python+requests+unittest执行接口自动化测试详情

1、安装requests、xlrd、json、unittest库 <1>pip 命令安装&#xff1a; pip install requests pip install xlrd pip install json pip install unittest 2、创建六类Python Package 利用Page Object Model 设计理念创建六类Python Package(也可根据项目要求具体实施)…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023