JavaScript-Electron js-无法从单击堆栈溢出中获取执行简单操作的按钮

顺晟科技

2022-10-19 13:44:56

长话短说，我正在开发一个通过本地网络发送命令的单页应用程序。在测试电子JS时，我似乎连一个简单的按钮都不能工作。我觉得我并没有将main.js和index.js之间的逻辑联系起来，但对于我来说，我无法找到正确的方法来做到这一点。我甚至在index.js和main.js&index.html中放置了断点，但是除了main.js中的断点之外，没有一个断点被删除。我在preload.js文件中放置了一个简单的函数，该函数被正确调用，但我试图附加到index.html和index.js中的按钮的那个函数甚至从未被击中。许多注释掉的代码是我想记住的，或者是我注意到了一种不同的创建方法，只是想试试是否有效。如果任何人有任何答案或指导，将不胜感激！:D

下面是我的main.js

//#region ---for dev only | hot reload
try {
    require('electron-reloader')(module)
} catch (_) {}
//#endregion
const electron = require('electron');
const {app, BrowserWindow, Menu} = require('electron');
const path = require('path');
const ipcMain = electron.ipcMain;

//#region globals
const SRC_DIR = '/src/'
const IMG_DIR = '/assets/images'
//#endregion

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

    //Used to auto open dev tools for debugging
    //win.openDevTools();    
    
    win.loadFile('src/index.html');
    // win.loadURL(url.format({
    //     pathname: path.join(__dirname, 'index.html'),
    //     protocol: 'file',
    //     slashes: true
    // }));
}

app.whenReady().then(() => {    
    //nativeTheme.shouldUseDarkColors = true;
    createWindow();
})

//closes app processes when window is closed 
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit();
})

var menu = Menu.buildFromTemplate([
    {
        label: 'Menu',
        submenu: [
            {label: 'Edit'},
            {type: 'separator'},
            {
                label: 'Exit',
                click() {
                    app.quit();
                }
            }
        ]
    }
])

Menu.setApplicationMenu(menu);

这里是index.html

//#region ---for dev only | hot reload
try {
    require('electron-reloader')(module)
} catch (_) {}
//#endregion
const electron = require('electron');
const {app, BrowserWindow, Menu} = require('electron');
const path = require('path');
const ipcMain = electron.ipcMain;

//#region globals
const SRC_DIR = '/src/'
const IMG_DIR = '/assets/images'
//#endregion

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

    //Used to auto open dev tools for debugging
    //win.openDevTools();    
    
    win.loadFile('src/index.html');
    // win.loadURL(url.format({
    //     pathname: path.join(__dirname, 'index.html'),
    //     protocol: 'file',
    //     slashes: true
    // }));
}

app.whenReady().then(() => {    
    //nativeTheme.shouldUseDarkColors = true;
    createWindow();
})

//closes app processes when window is closed 
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit();
})

var menu = Menu.buildFromTemplate([
    {
        label: 'Menu',
        submenu: [
            {label: 'Edit'},
            {type: 'separator'},
            {
                label: 'Exit',
                click() {
                    app.quit();
                }
            }
        ]
    }
])

Menu.setApplicationMenu(menu);

最后，这是我的index.js（也是我的第一个也是唯一的呈现器？）

//#region ---for dev only | hot reload
try {
    require('electron-reloader')(module)
} catch (_) {}
//#endregion
const electron = require('electron');
const {app, BrowserWindow, Menu} = require('electron');
const path = require('path');
const ipcMain = electron.ipcMain;

//#region globals
const SRC_DIR = '/src/'
const IMG_DIR = '/assets/images'
//#endregion

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

    //Used to auto open dev tools for debugging
    //win.openDevTools();    
    
    win.loadFile('src/index.html');
    // win.loadURL(url.format({
    //     pathname: path.join(__dirname, 'index.html'),
    //     protocol: 'file',
    //     slashes: true
    // }));
}

app.whenReady().then(() => {    
    //nativeTheme.shouldUseDarkColors = true;
    createWindow();
})

//closes app processes when window is closed 
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit();
})

var menu = Menu.buildFromTemplate([
    {
        label: 'Menu',
        submenu: [
            {label: 'Edit'},
            {type: 'separator'},
            {
                label: 'Exit',
                click() {
                    app.quit();
                }
            }
        ]
    }
])

Menu.setApplicationMenu(menu);

顺晟科技：

出现此错误的原因

这里的问题是您没有按照Electron的意图使用脚本文件。

如果使用Devtools控制台（通过取消注释），您应该会在控制台中看到以下错误:

//#region ---for dev only | hot reload
try {
    require('electron-reloader')(module)
} catch (_) {}
//#endregion
const electron = require('electron');
const {app, BrowserWindow, Menu} = require('electron');
const path = require('path');
const ipcMain = electron.ipcMain;

//#region globals
const SRC_DIR = '/src/'
const IMG_DIR = '/assets/images'
//#endregion

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

    //Used to auto open dev tools for debugging
    //win.openDevTools();    
    
    win.loadFile('src/index.html');
    // win.loadURL(url.format({
    //     pathname: path.join(__dirname, 'index.html'),
    //     protocol: 'file',
    //     slashes: true
    // }));
}

app.whenReady().then(() => {    
    //nativeTheme.shouldUseDarkColors = true;
    createWindow();
})

//closes app processes when window is closed 
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit();
})

var menu = Menu.buildFromTemplate([
    {
        label: 'Menu',
        submenu: [
            {label: 'Edit'},
            {type: 'separator'},
            {
                label: 'Exit',
                click() {
                    app.quit();
                }
            }
        ]
    }
])

Menu.setApplicationMenu(menu);

这是因为您的文件是作为“普通javascript文件”加载的。如果要使用节点语法（又名“require”语法），则需要在预加载脚本中执行。只有预加载脚本可以使用require语法，因为它是Electron允许使用Node的唯一脚本。

您也可以使用其他javascripts文件，方法是将其导入HTML中，就像对该文件所做的那样，但是您应该删除调用。由于“require”调用（在第一行）将抛出并出错，因此以下所有代码将不会运行。这就是为什么您的按钮在单击时没有反应。

正确的操作方法

如果需要使用Electron Renderer API中的某些方法（例如），则需要将其放入预加载脚本中。

如果你想使用自己的脚本，在一个单独的文件中，你也可以做到这一点，你将不能直接调用电子API。如果您想在自己的脚本中调用电子API，有一种解决方案，称为context bridge。这允许您在预加载脚本中创建一个可以使用Electron API的对象。您可以给这个对象命名，然后使用全局对象从其他脚本调用它。

例如，如果要使用:

在示例中

上一篇：HTML-内联CSS不遵循@medi 下一篇：CSS-如何确保子html元素不会脱

网站建设

Html

JavaScript-Electron js-无法从单击堆栈溢出中获取执行简单操作的按钮

出现此错误的原因

正确的操作方法

在示例中