electron学习和新建窗口

首先我们要先下载electron

npm install --save-dev electron

建立入口文件main.js

 新建一个入口文件 main.js,然后导入eletron新建一个窗口。

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");function createWindow() {const win = new BrowserWindow({width: 800,height: 600,show: false,// minHeight:600,// minWidth:800,autoHideMenuBar: true, // 菜单栏});// 这里引入页面  如果说url 需要win.loadUrl()引入win.loadFile("./index.html");win.webContents.openDevTools();win.on("activate",() => BrowserWindow.getAllWindows().length === 0 && createWindow());// 解决内容空白加载问题win.on("ready-to-show", () => {win.show();});//一个窗口中的文本加载完成win.webContents.on("dom-ready", () => {console.log("2、一个窗口中的文本加载完成");});//一个窗口中的文本加载完成win.webContents.on("close", () => {console.log("8、关闭窗口");});}app.whenReady().then(() => {createWindow();app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}});
});// 生命周期// app初始化完成
app.on("ready", () => {});// 一个窗口中的文本加载完成
app.on("dom-ready", () => {});// 所有窗口都被关闭时触发
app.on("window-all-closed", () => {app.quit();
});

建立一个页面

新建一个html,然后通过main.js里的 win.loadFile引入 就ok了 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>你能看见我吗
</body>
</html>

添加命令 启动

最后在在package.json里添加启动命令 start

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

然后启动就ok了

添加新窗口

方式一:

在页面直接 window.opne()

方式二: 

我们需要页面和electron配置相关了,我们这里使用electron提供的 ipcMain、ipcRenderer, 可以使electron主进程和渲染层通讯。

编辑预加载 preload.js

preload.js主要是联通electron主进程和渲染端的桥梁,我们新建js文件夹,用contextBridge.exposeInMainWorld把方法暴露在window上,不直接把ipcRenderer暴露在window上的原因是因为怕网络攻击。

这里是吧 IPC绑定在window上

const { contextBridge, ipcRenderer, BrowserWindow } = require("electron");const fs = require("fs");/*** 通信方法挂载到window对象上* 在渲染进程中使用:* <script setup lang="ts">* window.IPC.createWin()* </script>*/
contextBridge.exposeInMainWorld("IPC", {closeWindow: () => {ipcRenderer.invoke("closeWindow");},minimizeWindow: () => {ipcRenderer.invoke("minimizeWindow");},createWin: (data) => {console.log(data);ipcRenderer.invoke("create");},
});
绑定preload.js

在main.js绑定preload.js,同时接收 ipcRenderer方法

 const win = new BrowserWindow({width: 800,height: 600,show: false,// minHeight:600,// minWidth:800,autoHideMenuBar: true, // 菜单栏webPreferences: {preload: path.join(__dirname, "preload.js"),nodeIntegration: true, // 可以在页面引用的js里面使用node。js语法 如 requireenableRemoteModule: true, // 可以在页面引用 electron 中的 remote},});

在main.js用ipcMain.handle()接收方法,并打开一个新的窗口,新的窗口要新建一个页面html 

const { app, BrowserWindow, ipcMain } = require("electron");
// 信息传递 ipcMain要引入ipcMain.handle("create", (event, args) => {console.log("可以看见我吗");let win = new BrowserWindow({width: 400, // * 指定启动app时的默认窗口尺寸height: 400, // * 指定启动app时的默认窗口尺resizable: true, // 禁止手动修改窗口尺寸autoHideMenuBar: true,icon: path.join(__dirname, "favicon.ico"),});//   win.loadURL("./dong.html");win.loadFile(path.join(__dirname, "dong.html"));win.on("close", () => {console.log("关闭窗口");});});

main.js全部代码

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");function createWindow() {const win = new BrowserWindow({width: 800,height: 600,show: false,// minHeight:600,// minWidth:800,autoHideMenuBar: true, // 菜单栏webPreferences: {preload: path.join(__dirname, "preload.js"),nodeIntegration: true, // 可以在页面引用的js里面使用node。js语法 如 requireenableRemoteModule: true, // 可以在页面引用 electron 中的 remote},});win.loadFile("./index.html");win.webContents.openDevTools();win.on("activate",() => BrowserWindow.getAllWindows().length === 0 && createWindow());// 解决内容空白加载问题win.on("ready-to-show", () => {win.show();});//一个窗口中的文本加载完成win.webContents.on("dom-ready", () => {console.log("2、一个窗口中的文本加载完成");});//一个窗口中的文本加载完成win.webContents.on("close", () => {console.log("8、关闭窗口");});// 信息传递ipcMain.handle("create", (event, args) => {console.log("可以看见我吗");let win = new BrowserWindow({width: 400, // * 指定启动app时的默认窗口尺寸height: 400, // * 指定启动app时的默认窗口尺resizable: true, // 禁止手动修改窗口尺寸autoHideMenuBar: true,icon: path.join(__dirname, "favicon.ico"),});//   win.loadURL("./dong.html");win.loadFile(path.join(__dirname, "dong.html"));win.on("close", () => {console.log("关闭窗口");});});
}app.whenReady().then(() => {createWindow();app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}});
});// 生命周期// app初始化完成
app.on("ready", () => {});// 一个窗口中的文本加载完成
app.on("dom-ready", () => {});// 所有窗口都被关闭时触发
app.on("window-all-closed", () => {app.quit();
});
页面点击创建弹窗

页面中用window.IPC去掉preload.js里的方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>你能看见我吗</body>
<script>const btn1 = document.getElementById("btn1")btn1.onclick = function(){window.IPC.createWin(123)}
</script>
</html>
 目录

启动成功

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

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

相关文章

centos或者 ubuntu 查找当前目录所有文件包含指定值的文件地址

出现环境是我的nginx缓存 缓存了一个css 但是这个css不是最新的了 所以直接在缓存的目录下执行 find /data -type f -exec grep -l "被缓存文件的内容" {} 找到以后直接vi 查看一下 如果内容没问题的话 直接 rm -rf 删除了就可以了

Async注解详解-Async的作用以及原理

文章目录 起因Async作用原理EnableAsyncAsyncAnnotationBeanPostProcessor 起因 作为一个菜鸟&#xff0c;总是会遇到各种匪夷所思的bug。今天&#xff0c;不出意外的话今天我又遇到了意外…bug… 我在调用同事的一个方法时&#xff0c;莫名奇妙的报了空指针&#xff0c;当前…

压缩感知的图像仿真(MATLAB源代码)

压缩感知是一种用于高效获取和表示信号的技术&#xff0c;它可以显著减少数据的采样和传输量&#xff0c;同时保持对信号的高质量恢复能力。在压缩感知中&#xff0c;信号被表示为其在一个稀疏基中的稀疏线性组合。通过仅使用少量的随机投影测量&#xff0c;就能够捕捉信号的大…

报表控件Stimulsoft 新版本2024.1中,功能区工具栏新功能

今天&#xff0c;我们将讨论Stimulsoft Reports、Dashboards 和 Forms 2024.1版本中的一项重要创新 - 在一行中使用功能区工具栏的能力。 Stimulsoft Ultimate &#xff08;原Stimulsoft Reports.Ultimate&#xff09;是用于创建报表和仪表板的通用工具集。该产品包括用于WinF…

Elasticsearch Update By Query详解

1. 使用场景 一般在以下几种情况时&#xff0c;我们需要重建索引&#xff1a; 索引的 Mappings 发生变更&#xff1a;字段类型更改&#xff0c;分词器及字典更新 索引的 Setting 发生变更&#xff1a;索引的主分片数发生改变 集群内&#xff0c;集群间需要做数据迁移 Elastiic…

【移动安全】MobSF联动安卓模拟器配置动态分析教程

原文链接 MobSF联动安卓模拟器配置动态分析教程 实现方式 Windows开启安卓模拟器并进行相关配置作为调试客户端&#xff0c;Linux使用docker开启MobSF作为服务端。 好处&#xff1a;干净&#xff0c;部署简单&#xff0c;不用安装乱七八糟的环境&#xff0c;防止破坏其他应…

STM32F10X(Cortex-M3)系统定时器寄存器笔记和系统定时器精准延时函数

Cortex-M3系统定时器寄存器笔记和系统定时器精准延时函数 简介系统定时器寄存器STK_CTRLSTK_LOADSTK_VALSTK_CALIB STM32F10X(Cortex-M3)精准延时函数 简介 在STM32F10X(Cortex-M3)除了通用定时器和看门狗定时器外&#xff0c;还有一个系统定时器(SysTick) 拿STM32F103C8T6来说…

ES6 | (一)ES6 新特性(上) | 尚硅谷Web前端ES6教程

文章目录 &#x1f4da;ES6新特性&#x1f4da;let关键字&#x1f4da;const关键字&#x1f4da;变量的解构赋值&#x1f4da;模板字符串&#x1f4da;简化对象写法&#x1f4da;箭头函数&#x1f4da;函数参数默认值设定&#x1f4da;rest参数&#x1f4da;spread扩展运算符&a…

干货分享 | TSMaster 序列发送模块在汽车开发测试中的应用

众所周知&#xff0c;序列发送模块可以不需要脚本代码实现测试中特定控制报文序列的发送&#xff0c;该模块多用于循环顺序控制的测试案例中。序列发送模块的常用场景&#xff0c;主要是针对一些新开发的产品需要通过该模块来验证产品功能等等。本文重点和大家分享一下关于TSMa…

力扣102 二叉树的层序遍历 Java版本

文章目录 题目描述思路代码 题目描述 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[…

辉辉数码:目前电视盒子哪个最好?目前性能最好的电视盒子

大家好&#xff0c;我是辉辉&#xff0c;上期测评发布后我收到了很多粉丝的反馈希望我这期能分享电视盒子推荐&#xff0c;看看目前电视盒子哪个最好。我购入了市面上最热门的十几款电视盒子对比配置、系统后整理了五款目前性能最好的电视盒子推荐给大家。 品牌型号&#xff1…

计算机网络-局域网和城域网(二)

1.局域网互联设备&#xff1a; 2层网桥&#xff08;生成树、源路由&#xff09;、3层交换机、路由器。网桥要求3层以上协议相同&#xff0c;1、2层协议不同可互联。 2.生成树网桥&#xff1a; 又叫透明网桥&#xff0c;IEEE802.1d&#xff0c;生成树算法。基本思想是在网桥之…

Spring Security学习(六)——配置多个Provider(存在两种认证规则)

前言 《Spring Security学习&#xff08;五&#xff09;——账号密码的存取》一文已经能满足一般应用的情况。但实际商业应用也会存在如下的情况&#xff1a;用户提交的账号密码&#xff0c;能在本地的保存的账号密码匹配上&#xff0c;或者能在远端服务认证中匹配上&#xff…

提示找不到msvcr110.dll怎么解决?这5个方法简单有效搞定

在计算机系统运行过程中&#xff0c;如果发现无法找到msvcr110.dll这个特定的动态链接库文件&#xff0c;通常会引发一系列问题和困扰。首先&#xff0c;这可能导致某些应用程序无法正常启动或运行&#xff0c;因为msvcr110.dll是许多基于Microsoft Visual C编译的应用程序所必…

如何使用Docker本地部署Jupyter+Notebook容器并结合内网穿透实现远程访问

文章目录 1. 选择与拉取镜像2. 创建容器3. 访问Jupyter工作台4. 远程访问Jupyter工作台4.1 内网穿透工具安装4.2 创建远程连接公网地址4.3 使用固定二级子域名地址远程访问 本文主要介绍如何在Ubuntu系统中使用Docker本地部署Jupyter Notebook&#xff0c;并结合cpolar内网穿透…

新版Java面试专题视频教程——多线程篇①

新版Java面试专题视频教程——多线程篇① Java多线程相关面试题 0. 问题汇总0.1 线程的基础知识0.2 线程中并发安全 1.线程的基础知识1.1 线程和进程的区别&#xff1f;1.2 并行和并发有什么区别&#xff1f;1.3 创建线程的四种方式1.4 runnabl…

ES6 | (二)ES6 新特性(下) | 尚硅谷Web前端ES6教程

文章目录 &#x1f4da;迭代器&#x1f407;定义&#x1f407;工作原理&#x1f407;自定义遍历数据 &#x1f4da;生成器函数&#x1f407;声明和调用&#x1f407;生成器函数的参数传递&#x1f407;生成器函数案例 &#x1f4da;Promise&#x1f4da;Set&#x1f407;Set的定…

fastApi笔记05-路径参数和数值校验

使用Path可以对路径参数声明与Query相同类型的校验和元数据 from typing import Annotatedfrom fastapi import FastAPI, Path, Queryapp FastAPI()app.get("/items/{item_id}") async def read_items(item_id: Annotated[int, Path(title"The ID of the item …

微服务篇之限流

一、为什么要限流 1. 并发的确大&#xff08;突发流量&#xff09;。 2. 防止用户恶意刷接口。 二、限流的实现方式 1. Tomcat限流 可以设置最大连接数&#xff0c;但是每一个微服务都有一个tomcat&#xff0c;实现起来非常麻烦。 2. Nginx限流 &#xff08;1&#xff09;控…

假如C++进入Linux内核,那么需要做哪些改造?

假如C进入Linux内核&#xff0c;那么需要做哪些改造&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「c的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xf…