🚀preload.js脚本的使用

📅 2023/5/11

我们在渲染进程中想使用部分node及Electron提供的API有三种方法：
1.通过进程通信实现 2.在创建窗口的时候开启渲染进程的node能力
3.使用preload.js
第一种和第二种方式可以在Electron进程间的通信及模块化中查看如何使用

预加载（preload）脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码 。 这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。 预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。

const { BrowserWindow } = require('electron')
    const win = new BrowserWindow({
    webPreferences: {
        preload: '脚本的绝对路径'
    },
})

因为预加载脚本与浏览器共享同一个全局 Window 接口，并且可以访问 Node.js API，所以它通过在全局 window 中暴露任意 API 来增强渲染器，以便你的网页内容使用。预加载脚本与渲染器的主要运行环境是隔离开来的，以避免泄漏任何具特权的 API 到您的网页内容代码中。 我们將使用 contextBridge 模块来安全地实现交互。

//preload.js
const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld('myAPI', {
    api1: true,
    api2:()=>{
      
    },
    api3:(callback) => {
        callback(...arg)
    }
})
//渲染进程调用
myAPI.api1() //true

//可以传入回调函数进行交互
myAPI.api3((...arg)=>{
    console.log(...arg)
})