• 第五节 Electron 模块介绍 remote模块详细介绍

     系列文章目录

    第一节 electron 介绍

    第二节 创建electron项目并启动

    第三节 Electron运行流程 、 主进程渲染进程并使用nodejs

    第四节 Electron 调用H5事件结合node模块fs 实现文件拖拽读取

    目录

     系列文章   目录

    前言

    实现方法

    一、环境及页面搭建

    二、重点来了 remote模块的安装及使用

    1.安装

    2.主进程里配置启用remote模块

    3.渲染进程获取页面button并绑定事件

    4、项目结构及完整代码 （html参考上面）

    总结

    前言

    electron模块分为主进程模块和渲染进程模块，其中很多模块既可以在主进程中使用也可以在渲染进程中使用比如sell、nativeImage。有很多功能可以使用H5的Api及node模块就可以实现，但顶部菜单及底部托盘只能用electron模块可以修改等，electron提供了很多模块。

    本节案例：在渲染进程中点击按钮调用主进程的BrowserWindow打开一个新的窗口。

    实现方法

    1. 利用渲染进程的ipcRenderer给主进程发送信息让主进程调用BrowserWindow
    2. 利用remote模块实现（以下使用这个方法）

    使用注意事项：Electron10.x 之前可以直接使用 Remote 模块，Electron10.x 以后 Electron14.x 以前要 使用 remote 模块的话必须得在 BrowserWindow 中通过 enableRemoteModule: true 开启， Electron14.x 以后官方把内置的 remote 挪到了第三方模块里面，下面我们给大家看看如何在 Electron 最新版本中使用@electron/remote 模块

    说明：我现在的electron版本是19.0.6

    一、环境及页面搭建

    index.html：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <title></title>
    6.   <meta charset="UTF-8">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1">
    8.  
    9.   <script src="./renderer/renderer.js"></script>
    10.   <style>
    11.  
    12.   </style>
    13. </head>
    14.  
    15. <body>
    16.   <button id="openNewWindow">打开新窗口</button>
    17. </body>
    18.  
    19. </html>

    second.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <title></title>
    6.   <meta charset="UTF-8">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1">
    8.  
    9.   <script src="./renderer/renderer.js"></script>
    10.   <style>
    11.     div{color: red; text-align: center;}
    12.   </style>
    13. </head>
    14.  
    15. <body>
    16.   <div>我是第二个页面</div>
    17. </body>
    18.  
    19. </html>

    二、重点来了 remote模块的安装及使用

    1.安装

    在index.html renderer.js编写代码

    2.主进程里配置启用remote模块

    1. 主进程引入 
      const remote = require("@electron/remote/main");  // 1>引入
    2. 主进程初始化 
      remote.initialize()  // 2>初始化
    3. 主进程启用 
      remote.enable(mainWindow.webContents)  //3>启用remote
    4. 渲染进程引入BrowserWindow 
      const { BrowserWindow } = require("@electron/remote")

    3.渲染进程获取页面button并绑定事件

    1. window.onload = ()=>{
    2.   var btnDom = document.querySelector("#openNewWindow")
    3.   btnDom.onclick = function(){
    4.     const secWindow = new BrowserWindow({
    5.       width: 300,
    6.       height: 200,
    7.     });
    8.     secWindow.loadFile(path.join(__dirname, "second.html"))
    9.   }
    10. }

    4、项目结构及完整代码 （html参考上面）

     renderer.js

    1. const {BrowserWindow} = require("@electron/remote")
    2. const path = require("path");
    3.  
    4. window.onload = ()=>{
    5.   var btnDom = document.querySelector("#openNewWindow")
    6.   btnDom.onclick = function(){
    7.     const secWindow = new BrowserWindow({
    8.       width: 300,
    9.       height: 200,
    10.     });
    11.     secWindow.loadFile(path.join(__dirname, "second.html"))
    12.   }
    13. }

    main.js

    1. const { app, BrowserWindow } = require("electron");
    2. const path = require("path");
    3. const remote = require("@electron/remote/main");  // 1>引入
    4. remote.initialize()  // 2>初始化
    5.  
    6. const createWindow = () => {
    7.   const mainWindow = new BrowserWindow({
    8.     width: 1000,
    9.     height: 800,
    10.     webPreferences:{
    11.       // preload:path.join(__dirname,"renderer/preload.js")
    12.       // 渲染进程使用node模块
    13.       nodeIntegration:true, // 允许渲染进程使用nodejs
    14.       contextIsolation:false, // 允许渲染进程使用nodejs
    15.       
    16.     },
    17.     
    18.   });
    19.   // 打开调试模式
    20.   mainWindow.webContents.openDevTools();
    21.   mainWindow.loadFile(path.join(__dirname, "index.html")); // 渲染进程
    22.   remote.enable(mainWindow.webContents)  //3>启用remote
    23. };
    24. // 监听应用的启动事件
    25. app.on("ready", createWindow);
    26. //监听窗口关闭的事件，关闭的时候退出应用，macOs 需要排除
    27. app.on("window-all-closed", () => {
    28.   if (process.platform !== "darwin") {
    29.     app.quit();
    30.   }
    31. });
    32. //Macos 中点击 dock 中的应用图标的时候重新创建窗口
    33. app.on("activate", () => {
    34.   if (BrowserWindow.getAllWindows().length === 0) {
    35.     createWindow();
    36.   }
    37. });

    总结

    以上就是今天要讲的内容，主要思路就是利用remote模块调用主进程模块。

    每天记录一点，助力成长！

    欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

    如果你觉得本文对你有帮助，欢迎点赞收藏转载，烦请注明出处，谢谢！ 

  • 相关阅读:
    opencv(1)：创建和显示窗口, 读取保存图片
    从零接入小程序支付
    用照片预测人的年龄【图像回归】
    时序预测 | MATLAB实现CNN-LSTM卷积长短期记忆神经网络时间序列预测（风电功率预测）
    【智能家居项目】裸机版本——认识esp8266 | 网络子系统
    批量压缩图片软件-免费图片压缩后高清无损
    点灯科技 小爱开关灯
    字体的基础知识：英文字体区分练习
    仿游戏热血江湖游戏类22（得到物品方法2）
    Java NIO，Selector机制源码分析
  • 原文地址：https://blog.csdn.net/hongc93/article/details/126341682