electron渲染进程主进程相互传值示例解析

目录
  • 在electron中分为渲染进程和主进程
  • 浏览器传值给主进程
    • 浏览器环境
    • 主进程
  • 主进程传值给渲染进程
    • 主进程
    • 渲染进程
    • 注意

在electron中分为渲染进程和主进程

渲染进程就是浏览器环境，主进程就是node环境

既然他们是不同的环境，那么为我们怎么让他们相互关联起来呢？或者说怎么传递值？ 毕竟在开发中可能会遇到我想要的值只能在node环境中才能获取，然后node中可能也会需要浏览器环境的值；这个时候就需要两个环境联通起来相互传值

浏览器传值给主进程

浏览器环境

引入:

import { ipcRenderer } from "electron";

使用:

ipcRenderer.send("reader-json-file", '123');

主进程

引入:

import { ipcMain } from "electron";

使用:

ipcMain.on('reader-json-file',(event, num)=>{
    console.log(num); // 123 (字符串类型)
})

完成以上的操作我们就可以在主进程中获取到渲染进程传递过来的值了

主进程传值给渲染进程

在这个的时候跟以上有一点点差异，这个是需要拿到你创建这个窗口（主进程的变量值），然后将其传值给他，并在渲染进程中接收

主进程

使用：

win.webContents.send('reader-json-file-data','456');

这儿的win是你在创建窗口时的变量，如下：

  win = new BrowserWindow({
    width: 1000,
    height: 600,
    minWidth: 800,
    minHeight: 600,
    // 不要边框
    frame: false,
    webPreferences: {
      webviewTag: true,
      // 禁止同源策略，避免 axios 无法使用
      webSecurity: false,
      // Required for Spectron testing
      enableRemoteModule: !!process.env.IS_TEST,
      nodeIntegration: true,
      contextIsolation: false
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      // nodeIntegration: (process.env
      //     .ELECTRON_NODE_INTEGRATION as unknown) as boolean,
      // contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })

渲染进程

在vue中的话：可以在生命周期mounted、created中监听

ipcRenderer.on("reader-json-file-data", (event, value) => {
    console.log(value); // 456 (字符串类型)
});

注意

渲染进程和主进程相互传值可以是任意类型（我这边测试过可以传递的值，布尔、数字、字符串、对象都是可以的），我这边只是做了一个演示，所以就是传递了一个字符串类型的数字；

以上就是electron渲染进程主进程相互传值示例解析的详细内容，更多关于electron进程渲染传值的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Web Worker线程解决方案electron踩坑记录

    Web Worker线程解决方案electron踩坑记录

    目录 初始化项目 编写入口文件和 electron 插件 websocket websocket 服务 连接 websocket 服务 发送心跳 取消心跳 重新连接 其它优化 Worker 初始化项目 electron 开发时会遇到一对多的情况,在进行 websocket 通信时,如果接收到服务端多个指令时,而这个指令刚好需要占用线程,这个时候整个界面就会失去响应,那么我们就可以使用线程来解决这个问题. npm create vite@latest electron-worker 执行完后修改

  • electron创建新窗口模态框并实现主进程传值给子进程

    目录 正文 创建新窗口 主进程 创建一个路由 试试能不能启动 启动新窗口 传值 正文 我们在开发的过程中难免会遇到需要创建一个子窗口(子进程),但是在这个子进程中所有值都是初始化的,而我们肯定是需要一些值才能进行下一步操作,比如:token: 那么我们怎么去传递值呢? 我先给伙伴们说一些,基本原理(下面很多东西会建立在vue的基础上生命周期,如果是其他框架就自行修改就行),然后再给大家根据代码一步一步操作. 首先我们是需要创建一个子进程(或者叫新窗口,模态框都可以) 发送一个命令到主进程去创建一

  • 详解Electron中如何使用SQLite存储笔记

    目录 前言 数据库的选择 安装 创建表 Service Controller 业务 总结 前言 上一篇,我们使用 remirror 实现了一个简单的 markdown 编辑器.接下来,我们要学习如何去存储这些笔记. 当然了,你也可以选择不使用数据库,不过若是你以后需要将该应用上架到 mac Apple Store ,就需要考虑这个了.因为上架 mac 应用需要启用 sandbox,当你第一次访问笔记中的媒体文件时,都要打开选择文件的弹窗,通过让用户主动选择来授权访问沙箱外的媒体文件.不过,如果你

  • electron 中 webview的使用示例解析

    目录 正文 获取webview的dom webview 页面 webview页面的代码 新建public/preload.js文件 监听页面对否显示 禁止打开新窗口 刷新页面 上一页 下一页 正文 webview 想必都有所了解,比如:微信小程序嵌套H5 那么我们在electron中怎么使用webview呢? 我们先跟着官方文档展示一下,看是否能有效果: 若要在应用程序中嵌入网页, 请将 webview 标签添加到应用程序的被嵌入页面中 (这是将显示外来内容的应用程序页). 在最简单的例子中,

  • Electron架构深入探究

    目录 Electron是什么 Electron架构 小结 Electron是什么 引用来自官网的解释: Electron 是一个使用 JavaScript. HTML 和 CSS 构建桌面应用程序的框架.通过将 Chromium 和 Node.js 嵌入到它的二进制文件中,Electron 允许你维护一个 JavaScript 代码库,并创建可以在 Windows. macOS 和 Linux 上运行的跨平台应用程序ーー不需要本地开发经验. 如果我们追溯历史,可以发现Electron的前身是At

  • electron渲染进程主进程相互传值示例解析

    目录 在electron中分为渲染进程和主进程 浏览器传值给主进程 浏览器环境 主进程 主进程传值给渲染进程 主进程 渲染进程 注意 在electron中分为渲染进程和主进程 渲染进程就是浏览器环境,主进程就是node环境 既然他们是不同的环境,那么为我们怎么让他们相互关联起来呢?或者说怎么传递值? 毕竟在开发中可能会遇到我想要的值只能在node环境中才能获取,然后node中可能也会需要浏览器环境的值:这个时候就需要两个环境联通起来相互传值 浏览器传值给主进程 浏览器环境 引入: import

  • js操作模态窗口及父子窗口间相互传值示例

    parent.hmtl 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • 使用VSCode调试Electron主进程的方法步骤

    使用VSCode调试Electron主进程的方法步骤

    目录 搭建环境 文档 调试 渲染进程 搭建环境 本文所使用的项目是 electron-quick-start . $ git clone https://github.com/electron/electron-quick-start $ cd ./electron-quick-start $ npm install 经过以上步骤就搭建好了基本 Electron 应用开发环境.查看 package.json: {   "name": "electron-quick-start

  • python多进程 主进程和子进程间共享和不共享全局变量实例

    Python 多进程默认不能共享全局变量 主进程与子进程是并发执行的,进程之间默认是不能共享全局变量的(子进程不能改变主进程中全局变量的值). 如果要共享全局变量需要用(multiprocessing.Value("d",10.0),数值)(multiprocessing.Array("i",[1,2,3,4,5]),数组)(multiprocessing.Manager().dict(),字典)(multiprocessing.Manager().list(ran

  • python 在threading中如何处理主进程和子线程的关系

    之前用python的多线程,总是处理不好进程和线程之间的关系.后来发现了join和setDaemon函数,才终于弄明白.下面总结一下. 1.使用join函数后,主进程会在调用join的地方等待子线程结束,然后才接着往下执行. join使用实例如下: import time import random import threading class worker(threading.Thread): def __init__(self): threading.Thread.__init__(self

  • python实现跨进程(跨py文件)通信示例

    python实现跨进程(跨py文件)通信示例

    目录 前言 一.server端 二.client端 三.运行效果 总结 前言 项目中总会遇到数据需要跨进程通信的问题,今天就给大家带来一套简单的跨进程通信代码.代码分为服务端与客户端两部分. 一.server端 import multiprocessing import time def do_socket(conn, addr, ): try: while True: if conn.poll(1) == False: time.sleep(0.5) continue data = conn.

  • 使用electron制作满屏心特效的示例代码

    本文介绍了使用electron制作满屏心特效的示例代码,分享给大家,具体如下: 图片被压缩了 看起来很难看 主进程代码 import {BrowserWindow, app, ipcMain} from 'electron' createWindow(); ipcMain.on('quitApp', () => { app.quit(); }); function createWindow() { const loginURL = process.env.NODE_ENV === 'develo

  • electron实现qq快捷登录的方法示例

    之前本来想不写这个功能的,结果客户死活要qq登录! 实在没办法就写了,顺便写个文章! 在写之前有两个问题: 1: 打开qq授权页面点击页面中的链接会又打开一个页面! ..... 2: 授权之后是否成功很难去判断 不过脑海中有一个想法就是,electron就是一个类似于浏览器一样,既然是浏览器那肯定可以阻止链接的点击 也可以判断状态! 就去啃文档了!!! 推荐大家去w3c去看文档 比较全 而且速度较快 文档也比较新:https://www.w3cschool.cn/electronmanual/

  • Python 高级教程之线程进程和协程的代码解析

    目录 进程 进程 5 种基本状态 进程的特点 进程间数据共享 进程池 进程的缺点 线程 线程的定义 使用线程模块的简单示例 代码解析 协程 协程与线程 Python 协程 协程的执行 关闭协程 链接协程以创建管道 总结 进程 进程是指在系统中正在运行的一个应用程序,是 CPU 的最小工作单元. 进程 5 种基本状态 一个进程至少具有 5 种基本状态:初始态.就绪状态.等待(阻塞)状态.执行状态.终止状态. 初始状态:进程刚被创建,由于其他进程正占有CPU资源,所以得不到执行,只能处于初始状态.

随机推荐