【前端】-【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用于操作dom
    mainWindow.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
        })
    })
})

自定义菜单

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

面试--各种场景问题总结

面试--各种场景问题总结

1.在开发过程中，你是如何保证机票系统的正常运行的？ 用户、测试、监控和日志、安全措施、数据备份、系统设计、需求分析 2.在机票系统开发过程中，你最有成就的事情，为什么？ 用户体验感、高可用和稳定性、客户满意度、系…
阅读更多...
数据结构 - 堆：TOP-K问题

数据结构 - 堆：TOP-K问题

问题描述 TOP-K问题：即求数据结合中前K个最大的元素或者最小的元素，一般情况下数据量都比较大 比如：专业前10名、世界500强、富豪榜、游戏中前100的活跃玩家等 对于Top-K问题，能想到的最简单直接的方式就是排序，但是&…
阅读更多...
自定义类型：结构体、联合、枚举

自定义类型：结构体、联合、枚举

目录 一、⾃定义类型：结构体 1.结构体类型 1. 1结构体类型的声明 结构体变量的创建和初始化 1.2 结构的特殊声明 1.3 结构的自引用 2. 结构体内存对齐 ①：对齐规则 ②：offsetof函数 ③：为什么存在内存对⻬? ④ 修改默认对⻬…
阅读更多...
GPT 中文提示词技巧：参照 OpenAI 官方教程

GPT 中文提示词技巧：参照 OpenAI 官方教程

前言 搜了半天什么 prompt engineering 的课，最后会发现 gpt 官方其实是有 prompt 教程的。因此本文主要是学习这篇教程。 概述 - OpenAI API 部分案例是参考：根据吴恩达老师教程总结出中文版prompt教程_哔哩哔哩_bilibili up主的内容。 一、尽可能清…
阅读更多...
用JavaScript的管道方法简化代码复杂性

用JavaScript的管道方法简化代码复杂性

用JavaScript的管道方法简化代码复杂性 在现代 web 开发中，维护干净有效的代码是必不可少的。随着项目的增加，我们功能的复杂性也在增加。然而，javaScript为我们提供了一个强大的工具，可以将这些复杂的函数分解为更小的、可管理的…
阅读更多...
SSM志愿者系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

SSM志愿者系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 志愿者服务网站系统是一套完善的信息系统，结合springMVC框架完成本系统，对理解JSP java编程开发语言有帮助系统采用SSM框架（MVC模式开发），系统具有完整的源代码和数据库 ，系统主要采用B…
阅读更多...
Jmeter组件执行顺序与作用域

Jmeter组件执行顺序与作用域

一、Jmeter重要组件 1）配置元件---Config Element： 用于初始化默认值和变量，以便后续采样器使用。配置元件大其作用域的初始阶段处理，配置元件仅对其所在的测试树分支有效，如，在同一个作用域的任何采样器…
阅读更多...
shareMouse 使用中遇到的问题

shareMouse 使用中遇到的问题

一、shareMouse 使用中遇到的问题 1、鼠标不能移动到另一个显示器 明明是两个显示器，但是 只显示一个，鼠标也不能移到另一个显示器上 后来， 设置了 wrap mouse pointer around display就好了，虽然还是显示一个显示器&#xff0c…
阅读更多...
基于SpringBoot的图书推荐系统的

基于SpringBoot的图书推荐系统的

摘 要 网络信息技术的高速发展，使得高校图书馆的服务空间日益扩大，依据个人特点的针对性服务逐渐成为新服务模式的主导趋势。对于大多数用户而言，很难在大量的学术图书馆中快速找到他们想要的材料。另外，随着时代的不断发展&…
阅读更多...
RocketMQ阅读源码前的准备

RocketMQ阅读源码前的准备

本文将讲解如何在IDEA中导入 RocketMQ 源码，并运行 Broker 和 NameServer，编写一个消息发送与消息消费的示例。 一. 源码导入及调试 1.1 导入源码 RocketMQ 原先是阿里巴巴集团内部的消息中间件，于2016年提交至Apache基金会孵化&#xff0…
阅读更多...
高压功率放大器的应用领域有哪些

高压功率放大器的应用领域有哪些

高压功率放大器是一种特殊的电子设备，用于放大低电压信号到较高的功率水平。它在许多应用领域中发挥着重要作用。下面西安安泰将详细介绍高压功率放大器的几个常见应用领域。 声学领域：高压功率放大器在声学领域中广泛应用。例如，在音响系统和…
阅读更多...
第一节：认识微服务

第一节：认识微服务

一、微服务技术对比 Dubbo SpringCloudSpringCloudAlibaba注册中心zookeeper、Redis Eureka、ConsulNacos、Eureka服务远程调用Dubbo协议Feign（http协议）Dubbo、Feign配置中心无SpringCloudGateway、ZuulSpringCloudConfig、Nacos服务网…
阅读更多...
VR 实现 Splash Screen 效果

VR 实现 Splash Screen 效果

文章目录 背景官方实现逆向分析 背景 手机 App 在实现 Splash Screen 的时候，目前都有成熟的方案可以参考，但是在做 VR 开发时，要如何实现一个 App 自己的 Splash Screen ，下面是我们基于 PICO & OCULUS 进行业务开发时经过探…
阅读更多...
继承 和 多肽(超重点 ! ! !)

继承 和 多肽(超重点 ! ! !)

[本节目标] 1.继承 2.组合 3.多肽 1.继承 1.1 为什么要继承 Java中使用类对现实世界中实体来进行描述，类经过实例化之后的产物对象，则可以用来表示现实中的实体，但是现实世界错综复杂，事物之间可能会存在一些关联&#xff0…
阅读更多...
Prometheus+Grafana搭建日志采集

Prometheus+Grafana搭建日志采集

介绍 一、什么是日志数据采集 日志数据采集是指通过各种手段获取应用程序运行时产生的各类日志信息，并将这些信息存储到特定的地方，以便后续分析和使用。通常情况下，这些日志信息包括系统运行状态、错误信息、用户操作记录等等。通过对这些…
阅读更多...
网络基础：网络通信基础

网络基础：网络通信基础

目录 1.网络通信基本单位 2.网络通信基础 3.调制技术 4.解调技术 5.载波调制 6.编码技术 6.1基本编码 6.2应用型编码 1.曼彻斯特编码 2.差分曼彻斯特编码 3.MLT-3编码 4.mB/nB编码 1.网络通信基本单位 Byte（字节）是用于计量存储容量的一种…
阅读更多...
【动手学深度学习】(八)数值稳定和模型初始化

【动手学深度学习】(八)数值稳定和模型初始化

文章目录 一、理论知识 一、理论知识 1.神经网络的梯度 考虑如下有d层的神经网络 计算损失l关于参数Wt的梯度（链式法则） 2.数值稳定性常见的两个问题 3.梯度爆炸 4.梯度爆炸的问题 值超出阈值 对于16位浮点数尤为严重 对学习率敏感 如果学习率太大…
阅读更多...
游戏反Frida注入检测方案

游戏反Frida注入检测方案

在游戏安全对抗过程中，有不少外挂的实现基于对游戏内存模块进行修改，这类外挂通常会使用内存修改器，除此之外，还有一种门槛相对更高、也更难检测的「注入挂」。 据FairGuard游戏安全数据统计，在游戏面临的众多安全风险…
阅读更多...
oops-framework框架 之 创建项目(二)

oops-framework框架 之 创建项目(二)

引擎： CocosCreator 3.8.0 环境： Mac Gitee: oops-game-kit 构建 本篇博客将使用oops-game-kit 构建一个新的开发项目， 关于 oops-framework 框架的了解，可参考上篇博客： oops-framework框架 之 初始了解(一) 大概…
阅读更多...
11.2每日一题（函数定义域）

11.2每日一题（函数定义域）

因为等式的左边是单调增的，所以右边的等式也需要单调增从而确定函数的定义域
阅读更多...
最新文章

Copyright @ 2022~2023