【Electron学习笔记(三)】Electron的主进程和渲染进程

发布于:2024-12-07 ⋅ 阅读:(59) ⋅ 点赞:(0)

Electron的主进程和渲染进程

前言

在Electron应用开发中,主进程与渲染进程的协作至关重要。Electron基于Chromium和Node.js,让开发者用Web技术构建跨平台桌面应用。为确保安全与性能,Electron采用主进程和渲染进程分离架构。主进程管理应用生命周期、窗口及原生功能,渲染进程则负责显示用户界面。两者通过IPC机制通信,实现数据共享与功能调用。Preload脚本在渲染进程加载前注入代码,安全暴露必要API,避免直接暴露Node.js环境。本文将深入解析这一机制,探讨两者工作原理与安全通信方法。

笔记源于:禹神:一小时快速上手Electron,前端Electron开发教程

正文

1、主进程

每个 Electron 应用都有一个单一的主进程,作为应用程序的入口点,主进程在 Node.js 环境中运行,它具有 require 模块和使用所有 Node.js API 的能力,主进程的核心就是:使用 BrowerWindow 来创建和管理窗口

2、渲染进程

每个 BrowerWindow 实例都对应一个单独的渲染器进程,运行在渲染器进程中的代码,必须遵循网页标准,这也就意味着:渲染器进程无权直接访问 require 或使用任何 Node.js 的API

3、Preload 脚本

预加载(Preload)脚本是运行在渲染进程中的,但它是在网页内容加载之前执行的,这意味着它具有比普通渲染器代码更高的权限,可以访问 Node.JS 的 API,同时又可以与网页内容进行安全的交互。
简单地说:它是 Node.JS 和 Web API 的桥梁,Preload 脚本可以安全地将部分 Node.JS 功能暴露给网页,从而减少安全风险。

3.1 在项目目录下创建 preload.js 文件

在 main.js 的同级目录下创建
在这里插入图片描述

3.2 在 main.js 文件下创建路径变量并将 preload.js 定义为桥梁
  • 获取所在路径:const path = require('path')
  • 设置 webPreferences 属性将 preload.js 定义为桥梁:webPreferences{preload:path.resolve(__dirname,"./preload.js")}
    在这里插入图片描述
3.3 在 preload.js 文件下使用 electron 提供的contextBridge 模块
console.log("preload",process.version)
const {contextBridge} = require("electron")

contextBridge.exposeInMainWorld('myAPI',{
    version:process.version
})

在这里插入图片描述

3.4 在 render.js 文件下调用 contextBridge
const btn1=document.getElementById("btn1")
console.log("render")
// 绑定点击事件
btn1.onclick=()=>{
    // alert("已弹出")
    alert(myAPI.version)
}

在这里插入图片描述
至此,我们可以通过渲染进程访问 require 或使用 Node.js 的API:在这里插入图片描述