electron教程2-预加载脚本

官方文档：https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-first-app

一、使用预加载脚本

1.为了演示这一概念，你将会创建一个将应用中的 Chrome、Node、Electron 版本号暴露至渲染器的预加载脚本；

新建一个 preload.js 文件。该脚本通过 versions 这一全局变量，将 Electron 的 process.versions 对象暴露给渲染器。

复制代码
const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
  // 能暴露的不仅仅是函数，我们还可以暴露变量
})
preload.js
复制代码

为了将脚本附在渲染进程上，在 BrowserWindow 构造器中使用 webPreferences.preload 传入脚本的路径。

主要在main.js中加入代码段

复制代码
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  })
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})
复制代码

现在渲染器能够全局访问 versions 了，在根目录新建renderer.js

const information = document.getElementById('info')
information.innerText = `本应用正在使用 Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), 和 Electron (v${versions.electron()})`
renderer.js

 然后请修改你的 index.html 文件。加上一个 id 属性为 info 的全新元素，并且记得加上你的 renderer.js 脚本：

复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>来自 Electron 渲染器的问好！</title>
  </head>
  <body>
    <h1>来自 Electron 渲染器的问好！</h1>
    <p>👋</p>
    <p id="info"></p>
  </body>
  <script src="./renderer.js"></script>
</html>
index.html
复制代码

完整的mian.js

复制代码
// 在第一行中，我们使用 CommonJS 语法导入了两个 Electron 模块：
// app，它控制您的应用的事件生命周期。
// BrowserWindow，它负责创建和管理应用的窗口。
const { app, BrowserWindow } = require('electron');
const path = require('path');


//createWindow() 函数将您的页面加载到新的 BrowserWindow 实例中
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  })

  win.loadFile('index.html')
}
//在应用准备就绪时调用函数
app.whenReady().then(() => {
  createWindow();
 // 如果没有窗口打开则打开一个窗口 (macOS)
 // 与前二者相比，即使没有打开任何窗口，macOS 应用通常也会继续运行。 在没有窗口可用时调用 app 会打开一个新窗口。
 // 为了实现这一特性，可以监听模组的 activate 事件，如果没有任何活动的 BrowserWindow，调用 createWindow() 方法新建一个。
 // 因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 要实现这个，仅监听 whenReady() 回调即可。
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});
//应用窗口在不同操作系统中的行为也不同。 Electron 允许您自行实现这些行为来遵循操作系统的规范，而不是采用默认的强制执行。 您可以通过监听 app 和 BrowserWindow 模组的事件，自行实现基础的应用窗口规范。
//在 Windows 和 Linux 上，我们通常希望在关闭一个应用的所有窗口后让它退出。 若要在 Electron 中实现这一点，您可以监听 window-all-closed 事件，并调用 app.quit() 来让应用退出。这不适用于 macOS。
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
main.js
复制代码

运行命令

npm run start

查看效果

 二、在进程之间通信

我们将向渲染器添加一个叫做 ping() 的全局函数来演示这一点

首先，在预处理脚本中设置 invoke 调用：

复制代码
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
  ping: () => ipcRenderer.invoke('ping'),
  // 能暴露的不仅仅是函数，我们还可以暴露变量
})
复制代码

然后，在主进程中设置你的 handle 监听器。

复制代码
const { app, BrowserWindow, ipcMain } = require('electron')；
const path = require('path')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  })
  ipcMain.handle('ping', () => 'pong')；
  win.loadFile('index.html')
}
app.whenReady().then(createWindow)
复制代码

将发送器与接收器设置完成之后，现在你可以将信息通过刚刚定义的 'ping' 通道从渲染器发送至主进程当中。

复制代码
const func = async () => {
  const response = await window.versions.ping()
  console.log(response) // 打印 'pong'
}

func()
renderer.js
复制代码

 

posted @   zhang_you_wu  阅读(785)  评论(0)  编辑  收藏  举报
相关博文：
·  electron教程1-创建您的第一个应用程序
·  electron教程4-发布与更新
·  预加载脚本
·  electron 进程间通信
·  electron渲染进程与主进程之间通信
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
历史上的今天：
2020-02-24 sql评估已过期
2018-02-24 thinkphp5入口文件对应模块绑定
点击右上角即可分享
微信分享提示
AI IDE Trae