我正试图通过静态文件中的electron.app.getVersion()获得我的电子应用程序的版本。
我试过使用
document.getElementById("releasever").content = "Release:" + require('electron').app.getVersion();
获取版本号，并将其设置为段落标记的内容。但是错误显示为Uncaught TypeError: Cannot read properties of undefined (reading 'getVersion')。
为窗口打开NodeIntegration和ContextIsolation。如果有人能向我解释为什么getVersion()不工作或有更好的方法，请告诉我。非常感谢!
为了在主进程和渲染进程之间安全可靠地传输数据，您应该使用preload.js脚本。
这个preload.js脚本包含在您创建窗口的代码中。
要了解更多关于preload脚本和IPC如何工作，您应该详细阅读并理解以下电子链接。
- <
- 上下文隔离/gh> 使用预加载脚本
- 进程间通信
- ipnMain
- ipcRenderer
在下面的最小可复制示例中，我使用了preload.js脚本。
在下面的示例中，我将
nodeIntegration设置为false。这提高了安全性。
package.json
显示应用程序版本号的package.json文件。
{
"name": "electron-test",
"productName": "Electron Test",
"description": "Electron Testing Environment",
"version": "1.0.0",
"main": "main.js",
"devDependencies": {
"electron": "^24.0.0"
},
"scripts": {
"start": "electron ."
}
}
main.js(主进程)
获取应用程序版本号的main.js文件(通过app.getVersion()方法)，并通过IPC将其发送到渲染进程(在窗口创建时，但在显示之前)。
// Import required electron modules
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
// Import required Node modules
const nodePath = require('path');
// Prevent garbage collection
let window;
function createWindow() {
const window = new electronBrowserWindow({
x: 0,
y: 0,
width: 800,
height: 600,
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
sandbox: true,
preload: nodePath.join(__dirname, 'preload.js')
}
});
window.loadFile(nodePath.join(__dirname, 'index.html'))
// Send the application version to the render
.then(() => { window.webContents.send('appVersion', electronApp.getVersion()); })
.then(() => { window.show(); });
return window;
}
electronApp.on('ready', () => {
window = createWindow();
});
electronApp.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
electronApp.quit();
}
});
electronApp.on('activate', () => {
if (electronBrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
preload.js(主进程)
使用预加载脚本通过IPC向主进程和渲染进程之间传输数据。
// Import the necessary Electron modules
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;
// Exposed protected methods in the render process
contextBridge.exposeInMainWorld(
// Allowed 'ipcRenderer' methods
'ipcRenderer', {
// From main to render
getVersion: (listener) => {
ipcRenderer.on('appVersion', listener);
}
}
);
和如何使用它…
/**
*
* Main --> Render
* ---------------
* Main: window.webContents.send('channel', data); // Data is optional.
* Preload: apiName: (listener) => { ipcRenderer.on('channel', listener); }
* Render: window.ipcRenderer.apiName((event, data) => { methodName(data); });
*
* Main --> Render (Once)
* ----------------------
* Main: window.webContents.send('channel', data); // Data is optional.
* Preload: apiName: (listener) => { ipcRenderer.once('channel', listener); }
* Render: window.ipcRenderer.apiName((event, data) => { methodName(data); });
*
* Render --> Main
* ---------------
* Render: window.ipcRenderer.apiName(data); // Data is optional.
* Preload: apiName: (data) => { ipcRenderer.send('channel', data) }
* Main: electronIpcMain.on('channel', (event, data) => { methodName(data); });
*
* Render --> Main (Once)
* ----------------------
* Render: window.ipcRenderer.apiName(data); // Data is optional.
* Preload: apiName: (data) => { ipcRenderer.send('channel', data); }
* Main: electronIpcMain.once('channel', (event, data) => { methodName(data); });
*
* Render --> Main (Value) --> Render
* ----------------------------------
* Render: window.ipcRenderer.apiName(data).then((result) => { methodName(result); });
* Preload: apiName: (data) => { return ipcRenderer.invoke('channel', data); }
* Main: electronIpcMain.handle('channel', (event, data) => { return someMethod(data); });
*
* Render --> Main (Promise) --> Render
* ------------------------------------
* Render: window.ipcRenderer.apiName(data).then((result) => { methodName(result); });
* Preload: apiName: (data) => { return ipcRenderer.invoke('channel', data); }
* Main: electronIpcMain.handle('channel', async (event, data) => {
* return await myPromise(data).then((result) => { return result; })
* });
*
* Main: function myPromise(data) { return new Promise((resolve, reject) => { ... }; )};
*
*/
index.html(渲染过程)
最后，您的index.html文件将侦听IPC事件，当收到时，填充段落元素的innerText。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electron Test</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
</head>
<body>
<h1>App Version:</h1>
<p id="appVersion"></p>
</body>
<script>
window.ipcRenderer.getVersion((event, data) => {
document.getElementById('appVersion').innerText = data;
});
</script>
</html>