Vue 3+Vite+Eectron从入门到实战系列之(四)一Electron热身运动(二)

在electron里面能不呢实现暗黑模式和明亮模式的切换?我们怎么读取主进程里面的数据和系统数据。这篇就是来实现这几个效果的

实现效果

请添加图片描述

更改系统的主题色

在 App.vue 中添加代码。

<el-button type="warning" @click="changeTheme">更改系统主题颜色</el-button>
const themeMode = ref("light");
const changeTheme = () => {themeMode.value = themeMode.value === "light" ? "dark" : "light";window.electronAPI.changeTheme(themeMode.value);
};

在渲染进程的 preload.js 中添加代码。

之前,我们是在渲染进程中send,现在我们使用invoke,通过invoke来激活一个事件。

changeTheme(data) {ipcRenderer.invoke("change-theme", data);
}

主进程 main.js 中添加代码。

通过ipc.handle来注册一个事件,当主进程接收到渲染进程的消息时,就会触发该事件。

//触发更改主题的事件
ipc.handle("change-theme", (event, data) => {console.log("change theme", data);nativeTheme.themeSource = data;
});

send 和 invoke 的区别,我们在后面再详细分析。

读取渲染进程的自定义数据

在渲染进程的 preload.js 中添加代码。

sysLists: [{name: "系统设置",icon: "el-icon-setting",path: "/system/sysSetting",},{name: "系统日志",icon: "el-icon-document",path: "/system/sysLog",},{name: "系统用户",icon: "el-icon-user",path: "/system/sysUser",},],

展示到我们的页面上

<ul><li v-for="item in sysLists" :key="item.id">{{ item.name }}</li>
</ul>
const sysLists = computed(() => {return window.electronAPI.sysLists;
});

在这里插入图片描述

读取渲染进程中的系统信息

在渲染进程的 preload.js 中添加代码。

getSystemVersion: () => process.getSystemVersion(),

展示到我们的页面上

<h3>系统版本:{{ sysInfo }}</h3>
const sysInfo = computed(() => {return window.electronAPI.getSystemVersion();
});

在这里插入图片描述
这样,我们就实现了这几个效果。

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

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

相关文章

红豆0感舒适衬衫2.0,让这个七夕节变得有点不一样

七夕节又到了&#xff0c;在这个佳人相约的传统节日&#xff0c;红豆舒适男装以“七夕穿红豆 爱人更舒适”为主题带来了24届红豆七夕节。 这是红豆集团连续24年举办红豆七夕节&#xff0c;红豆七夕节也不仅是广受年轻人喜爱的传统节日盛典&#xff0c;同样也是红豆集团打造的特…

CV党福音:YOLOv8实现分类

YOLO作为目标检测领域的常青树&#xff0c;如今以及更新到了YOLOv10&#xff0c;并且还有YOLOX、YOLOS等变体&#xff0c;可以说该系列已经在目标检测领域占据了半壁江山&#xff0c;如今&#xff0c;YOLOv8的发行者ultralytics竟有一统江山之意&#xff0c;其在提出的框架中不…

【书生大模型实战营(暑假场)】入门任务二 Git 关卡

入门任务二 Git 关卡 参考&#xff1a; 教程任务 注意&#xff1a; 项目Github链接 1 闯关任务 1.1 使用 Git 完成破冰介绍 本任务将基于开发机实现&#xff0c;重点在于熟悉Git操作。首先要了解 Git操作的常见四部曲&#xff0c;即&#xff1a;舔 Add&#xff0c;提 Co…

计算机毕业设计选题推荐-电缆行业生产管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

Gradle 入门指南:从安装到基础用法详解

文章目录 Gradle 简介安装 Gradle创建和配置 Gradle 项目将 Gradle 项目打成jar包多项目聚合示例项目结构步骤详解 Gradle 简介 Gradle 是一个基于 Groovy 和 Kotlin 的构建工具&#xff0c;用于自动化构建、依赖管理和项目管理。它结合了 Maven 的依赖管理和 Ant 的灵活性&am…

【MySQL】库操作,数据类型

目录 MySQL简介SQL语句分类库操作语句展示数据库创建数据库使用数据库删除数据库 数据类型整型浮点型字符串日期类型 MySQL简介 数据库有关系型数据库和非关系型数据库。 关系型数据库&#xff1a;是指采用了关系模型来组织数据的数据库。 简单来说&#xff0c;关系模型指的就…

智能化的Facebook未来:AI如何重塑社交网络的面貌?

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;社交网络的面貌正在经历深刻的变革。Facebook&#xff08;现Meta Platforms&#xff09;作为全球最大的社交媒体平台之一&#xff0c;正积极探索如何利用AI技术来提升用户体验、优化内容管理并推动平台创新。…

线上预约陪诊平台医院陪诊系统源码就医陪护小程序APP开发

项目分析 随着医疗行业的数字化转型和人们对健康需求的日益增长&#xff0c;线上预约陪诊系统作为一种新兴的医疗服务模式&#xff0c;正逐渐受到市场的关注和认可。本文将从市场前景、使用人群、盈利模式以及竞品分析等多个角度&#xff0c;全面探讨线上预约陪诊系统的技术性…

【稳定ACM出版、EI检索|武汉场线上线下结合】2024年第五届医学人工智能国际学术会议(ISAIMS 2024,8月13-17)

第五届医学人工智能国际学术会议&#xff08;ISAIMS2024&#xff09;将于2024年8月13-17日于荷兰阿姆斯特丹自由大学召开&#xff0c;国内分会场将于2024年10月25-27日于中国武汉召开。 本届会议将继续围绕人工智能在医学领域的最新研究成果&#xff0c;为来自国内外高等院校、…

反转链表(LeetCode)

题目 给你单链表的头节点&#xff0c;请你反转链表&#xff0c;并返回反转后的链表 解题 class ListNode:def __init__(self, value0, nextNone):self.value valueself.next nextdef reverse_linked_list_recursive(head: ListNode) -> ListNode:# 空链表或单节点链表if …

计算机网络-传输层

网络层不具有重传&#xff0c;需要传输层来控制。 Tcp&#xff1a;需要将传输的数据进行分段传输&#xff0c;并且能够建立会话&#xff0c;具备流量控制&#xff0c;是一种可靠的传输协议UDP&#xff1a;一个数据包就能完成数据通信&#xff0c;不分段&#xff0c;不需要建立…

人工智能|人工智能教育的发展现状及趋势

智能的热潮正席卷全球。国家在人工智能领域展开战略布局&#xff0c;人工智能人才成为国家急需的高层次技术人才。据领英发布的《全球 Al 领域人才报告》显示&#xff0c;国内人工智能人才缺口达到 500 多万。 毫无疑问&#xff0c;人工智能将不可阻挡地影响所有产业。给自己一…

【数据结构】线性表(线性表的定义和基本操作)

计算机考研408-数据结构笔记本之——第二章 线性表 2.1 线性表的定义和基本操作 1 线性表的定义(数据结构三要素——逻辑结构&#xff09; 线性表是具有相同数据类型的n(n≥0)个数据元素的有限序列. 其中n为表长&#xff0c;当n0 时线性表是一个空表。 若用L命名线性表&…

【C++】:智能指针 -- RAII思想shared_ptr剖析

目录 一&#xff0c;内存泄漏二&#xff0c;智能指针的使用及原理2.1 RAII思想2.2 auto_ptr2.3 unique_ptr 三&#xff0c;shared_ptr(重点)3.1 shared_ptr的原理及使用3.2 shared_ptr的模拟实现1. 基本框架2. 引用计数的设计3. 拷贝构造4. 析构函数5. 赋值拷贝 3.3 shared_ptr…

详解Xilinx FPGA高速串行收发器GTX/GTP(4)--TX/RX接口的数据位宽和时钟设计

目录 1、时钟设计 2、TX接口 3、接口位宽与时钟的关系 4、时钟来源方案 5、TX端内部的时钟分频设计 6、RX接口 文章总目录点这里:《FPGA接口与协议》专栏的说明与导航 1、时钟设计 GT收发器内部比较复杂,所使用的时钟就不止一个,比较主要的时钟有两个,架构…

Zookeeper的监听机制及原理解析

系列文章目录 手把手教你安装Zookeeper 及可视化插件ZooInspector、ZKUI Zookeeper入门篇&#xff0c;了解ZK存储特点 使用Zookeeper的监听及原理解析 系列文章目录前言一、监听机制的基本概念二、Zookeeper监听原理1. 事件类型2. 监听模式与监听器类型&#xff08;1&#xff…

健康管理系统

目录 第1章 系统概述 第2章 可行性研究 2.1 项目背景及意义 2.2 可行性研究 第3章 需求分析 3.1 功能性需求 3.2 非功能性需求 3.2.1 性能需求 第4章 总体设计 4.1 技术架构 4.2功能模块设计 第5章 详细设计 5.1 主页 5.2 写剧本杀 5.3 剧本杀分类管理 5.4 个人…

数组下标越界异常(ArrayIndexOutOfBoundsException)以及解决方案

在Java学习的初期&#xff0c;我们往往可能会遇到一些程序的错误提示&#xff0c;告诉我们&#xff0c;程序出现了某些不正常的情况&#xff0c;在这种情况发生时&#xff0c;我们一般称之为出现了异常。 我们目前有两类常见的错误&#xff1a; 一个是编译时异常 &#xff0c…

数据分析与应用:微信-情人节红包流向探索分析

目录 0 需求描述 1 红包发送方用户的基本信息缺失率有多高?(即有多少红包发送方用户无法在用户基本信息表中匹配? 2 哪一组红包金额的拒收率最高? 3、最受二线城市欢迎的红包金额为?(即发出次数最多) 4 北上广深 4 大城市中,哪座城市的男性用户发出的 520 红包比例…

三大口诀不一样的代码,小小的制表符和换行符玩的溜呀

# 小案例&#xff0c;打印输出加法口诀 for i in range(1,10):for j in range(1,10):if j>i:breakprint(f"{j}{i}{ji}".strip(),end\t)print() print(\n) for i in range(1,10):for j in range(1,10):if j>i:breakprint(f"{j}x{i}{j*i}",end\t)print…