admin管理员组

文章数量:1221920

There is an app version number in package.json. I want that in my footer section which is part of my index.html.

There is a (template)[] for a single page electron application (SPA) which I'm trying to test this. But no luck so far.

Here my current code:

main.js:

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

ipcMain.handle('get-version', () => {
    console.log('get-version');
    const version = app.getVersion();
    console.log('Version:', version);
    return version;
})

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'src/preload.js')
        }
    });

    win.loadFile('src/index.html');
}

app.whenReady().then(() => {
    createWindow();

    ipcMain.on('button-click', (event, arg) => {
        console.log(arg); // Handle IPC messages
    });
});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SPA with IPC</title>
    <script defer src="renderer.js"></script>
    <link rel="stylesheet" href="styles/master.css">
</head>
<body>
    <header id="header">
        <h1>My SPA</h1>
    </header>
    [...]
    <footer id="footer">
        <p>Footer content here</p>
    </footer>
</body>
</html>

renderer.js:

[...]    
// Set version string (not working)
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded')

    
    ipcRenderer.invoke('get-version').then(version => {
        document.querySelector('#footer p').textContent = `Version ${version}`
    })
})

I'm sorry, this is probably not hard, but electron is still pretty confusing me.

There is an app version number in package.json. I want that in my footer section which is part of my index.html.

There is a (template)[https://github.com/mgarbade/electron-spa-template] for a single page electron application (SPA) which I'm trying to test this. But no luck so far.

Here my current code:

main.js:

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

ipcMain.handle('get-version', () => {
    console.log('get-version');
    const version = app.getVersion();
    console.log('Version:', version);
    return version;
})

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'src/preload.js')
        }
    });

    win.loadFile('src/index.html');
}

app.whenReady().then(() => {
    createWindow();

    ipcMain.on('button-click', (event, arg) => {
        console.log(arg); // Handle IPC messages
    });
});

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SPA with IPC</title>
    <script defer src="renderer.js"></script>
    <link rel="stylesheet" href="styles/master.css">
</head>
<body>
    <header id="header">
        <h1>My SPA</h1>
    </header>
    [...]
    <footer id="footer">
        <p>Footer content here</p>
    </footer>
</body>
</html>

renderer.js:

[...]    
// Set version string (not working)
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded')

    
    ipcRenderer.invoke('get-version').then(version => {
        document.querySelector('#footer p').textContent = `Version ${version}`
    })
})

I'm sorry, this is probably not hard, but electron is still pretty confusing me.

  • electron
Share Improve this question edited Feb 7 at 16:23 mcExchange asked Feb 6 at 16:47 mcExchangemcExchange 6,49813 gold badges65 silver badges119 bronze badges 2
  • "But no luck so far." What does it mean? What happens? Do you get errors? – Arkellys Commented Feb 7 at 9:18
  • The app version was not updated in the footer. Meanwhile I found a solution. I will post it below. – mcExchange Commented Feb 7 at 12:47
Add a comment  | 

1 Answer 1

Reset to default 0

Fixed it. The trick was to add the function reference to preload.js and chose other "webPreferences"

nodeIntegration: false,
contextIsolation: true,

Here a more explicit solution:

main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: path.join(__dirname, 'preload.js')
        }
    })

    win.loadFile('src/index.html')
}

app.whenReady().then(() => {
    createWindow()

    ipcMain.handle('get-version', () => {
        const version = app.getVersion()
        console.log('Version:', version)
        return version
    })

    ipcMain.on('button-click', (event, arg) => {
        console.log(arg)
    })
})

renderer.js:

//...

document.addEventListener('DOMContentLoaded', () => {
    window.electronAPI.getVersion()
        .then(version => {
            document.querySelector('#footer p').textContent = `Version ${version}`
        })
    
    loadPage('page1.html')
})

preload.js:

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
    getVersion: () => ipcRenderer.invoke('get-version'),
    send: (channel, data) => ipcRenderer.send(channel, data)
})

The full solution can also be found on this open source repo.

本文标签： ElectronGet app version as variable in footerStack Overflow

版权声明：本文标题：Electron - Get app version as variable in footer - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739376127a2160490.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。