|
在 Electron 中,你可以在 `main.js` 中定义全局变量,然后在其他 JavaScript 文件中使用 `global` 对象(在主进程中)或 `window` 对象(在渲染进程中)来访问这些变量。以下是具体的实现步骤:
### 1. 在 `main.js` 中定义全局变量
你可以使用 `global` 对象在主进程中定义全局变量:
- // main.js
- const { app, BrowserWindow } = require('electron');
- global.myGlobalVariable = "Hello from main.js";
- function createWindow() {
- const win = new BrowserWindow({
- width: 800,
- height: 600,
- webPreferences: {
- contextIsolation: true,
- enableRemoteModule: false,
- preload: path.join(__dirname, 'preload.js') // 使用 preload.js 进行安全通信
- }
- });
- win.loadFile('index.html');
- }
- app.whenReady().then(createWindow);
复制代码
### 2. 在其他 JavaScript 文件中访问全局变量
#### 在主进程中
如果你有另一个 JavaScript 文件在主进程中(例如 `anotherFile.js` ),你可以这样访问全局变量:
- // anotherFile.js
- console.log(global.myGlobalVariable); // 输出: Hello from main.js
复制代码
#### 在渲染进程中
如果你想在渲染进程中访问全局变量(例如在 `index.html` 中包含的脚本),你应该使用 preload 脚本来安全地暴露全局变量:
1. **在 `preload.js` 中:**
- // preload.js
- const { contextBridge } = require('electron');
- contextBridge.exposeInMainWorld('myAPI', {
- myGlobalVariable: () => global.myGlobalVariable
- });
复制代码
2. **在渲染进程中(例如在 `index.html` 中的脚本):**
- html
- <!-- index.html -->
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Electron App</title>
- </head>
- <body>
- <script>
- console.log(window.myAPI.myGlobalVariable()); // 输出: Hello from main.js
- </script>
- </body>
- </html>
复制代码
### 总结
- 在主进程中使用 `global` 对象定义全局变量。
- 在渲染进程中使用 preload 脚本通过 `contextBridge` 安全地暴露这些变量。
- 在渲染进程中通过暴露的 API 访问这些全局变量。
这种方法可以确保在 Electron 应用中安全地访问全局变量,同时保持良好的安全性。
|
|