首页 > 其他分享 >Electron踩坑日记-2

Electron踩坑日记-2

时间:2024-09-02 14:04:27浏览次数:11  
标签:vue const electron js Electron false 日记

Electron踩坑日记-2

Electron + vue项目渲染进程如何与逻辑进程交互?

假设有这样一个需求,在页面上有一个A按钮,我现在需要点击A,然后执行某段nodejs的代码.
我们知道,在浏览器环境下是无法执行nodejs代码的,因此我们需要调用到electron给予的能力.下文,我将演示如何编写相关代码.

在main.js设置

function createWindow() {
  const win = new BrowserWindow({
    transparent: true,
    frame: false,
    titleBarStyle: "hidden",
    ......其他设置

    webPreferences: {
      nodeIntegration: true, // 允许在渲染进程中使用 Node.js
      contextIsolation: false,
      devTools: false, // 禁用开发者工具
      extensions: false, // 如果有这个选项,可以设置为 false 禁用扩展
    },
  });
}

可以看到,我将 nodeIntegration: true, 允许在渲染进程中使用 Node.js将 contextIsolation: false,允许上下文,只有先这样设置,vue项目才可以使用electron渲染进程和逻辑进程的通信的能力

然后我们只需要在main.js中注册相关的函数例如

ipcMain.handle("get-user-data-path", async () => {
  return app.getPath("userData");
});

那么我们该怎么在vue项目中调用到呢
很简单

const { ipcRenderer } = window.require("electron"); //引入ipcRenderer

const deleteFile = async (type, file) => {
  const userDataPath = await ipcRenderer.invoke ("get-user-data-path"); //触发main.js中编写的函数
};

这样,就实现了vue文件和electron的通信,只需要在

ipcMain.handle("get-user-data-path", async () => {
  return app.getPath("userData");
});

这个函数中进一步引入执行nodejs的xxx.js文件.然后调用他即可实现了

标签:vue,const,electron,js,Electron,false,日记
From: https://www.cnblogs.com/mrkr/p/18392594

相关文章

  • Electron踩坑日记-1
    Electron踩坑日记Electron+vue项目打包后,应用打开出现空白背景在实际开发过程中,我遇到了在serve模式下能够正常运行,但是build后的产物给到测试,打开出现全透明(因为我设置了electron的透明属性,如果没有设置就是纯白色)没有内容的情况.经过排查我发现,产生问题的原因是在s......
  • spring学习日记-day5-代理模式
    一、学习目标        代理模式是一种常用的设计模式,它主要用于在不修改原有对象代码的情况下,通过引入一个代理对象来控制对原有对象的访问,从而增强原有对象的功能。代理模式主要分为两种:静态代理和动态代理。尽管Spring框架本身更多地利用了动态代理来实现其功能,但理......
  • 开学第一周9.1周日学习日记
    算法cf1989ABCDhttps://codeforces.com/contest/1989B最长公共子序列 //相当于枚举以b[i]为起点遍历a的最长公共子序列 //因为是子序列所以abacccab即使后面先取了第一个a也不影响最长长度#include<bits/stdc++.h>usingnamespacestd;voidsolve() { stringa......
  • 图书系统的创建(三)——日记
    在写完操作后,我们可以创建User用户包,在这个包内我们要建立管理员(librarian)和普通成员(normal)两个类,对于用户的创建我认为有几个值得注意的点:1.菜单框架同样的,我们可以创建一个共同特征user父类,我们可以在里面定义name变量和构造方法。在两个子类中,我们肯定一个菜单menu去给出......
  • 【项目日记】高并发内存池---实现中心缓存
    年少的梦啊,有些很幸运地实现了,有些被遗忘在了风中---董卿---高并发内存池---实现中心缓存1整体理念2SpanList的实现3CentralCache的实现4请求内存联动1整体理念实现中心缓存之前,我们先理解中心缓存需要做那些事情,具有哪些特性?我们把中心缓存的功能......
  • 2024.9 训练日记
    我们将难度分为\(5\)个等级:\(\color{grey}\bigstar\)简单题,根本不配进入NOI的考场,做着玩玩。或者为模板题。\(\color{green}\bigstar\)签到题,在NOI赛场上强银选手几乎人人都会,如果赛场上不会的话对冲银的影响是非常大的,要避免。\(\color{blue}\bigstar\)中等题,在NOI......
  • 解决 Electron 安装失败问题的实用指南
    遇到安装失败问题?在国内或其他网络受限的环境中,安装Electron时可能会遇到各种错误。以下是一些解决这些问题的有效方法。如果您在Electron-Egg安装过程中遇到安装npm包报错的问题,也可以尝试以上办法,然后重新进行npmi--force操作重新安装包方法一:更改npm源这个方法在大......
  • 【日记】现在问题变成买哪一台电脑了(344 字)
    正文今天领了家电补贴,原本就有换电脑的计划和打算,这下想换电脑的心情越来越强烈了。昨天跟母亲打电话,她跟我聊到有光伏公司跟他们抢生意。虽然这事挺搞,但我还觉得蛮有意思。我万万没想到商战这种事情能发展到我们村里……检查基本已经结束了,没有前阵子那样特别忙......
  • 程序员失业日记4:半个月拿下4个offer
    上篇文章很多小伙伴留言也讲到自己被公司裁员,还有的细心的小伙伴说去年九月就被裁了,在看一下文章的发布时间,绷不住了。先和大家说一下,我已经找到工作,因为最近工作一直都很忙,加上自己也比较懒,所以就拖了很久才写的。之前没说就是为了方便写后面的文章。也是通过本文分享一下自己找......
  • 第三届电力工程与电气技术国际学术会议(ICPEET 2024) 2024 3rd International Conferenc
    文章目录一、会议详情二、重要信息三、大会介绍四、出席嘉宾五、征稿主题六、咨询一、会议详情二、重要信息大会官网:https://ais.cn/u/vEbMBz提交检索:EICompendex、IEEEXplore、Scopus大会时间:2024年9月13-15日大会地点:马来西亚·吉隆坡最终截稿:2024年9月9日(23:......