开发者问题收集

Electron 点击​​按钮可以执行节点吗?

2020-07-15
6851

所以我有一个开始按钮,一旦单击该按钮,我希望它执行一个功能。

我知道我可以在启动电子应用程序时执行该功能,但是有没有办法说有一个开始按钮,并在单击按钮时执行代码?

另外,我知道你不能在浏览器中使用节点,我知道 Electron 使用铬,但仍然可以访问节点,对吗?

这是我得到的错误:

Uncaught Exception:
ReferenceError: document is not defined

index.js

    const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const Bot = require('./bot')
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

const createWindow = () => {

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      preload: "./bot.js"
    }
  });

  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

这是 bot.js 文件:

    const robot = require('robotjs')
const electron = require('electron')
const ipc = electron.ipcRenderer

const Bot = () => {

    const button = document.getElementById('start');
    button.addEventListener('click', () => console.log('Click'))
    // button.addEventListener('click', function (e) {
    //     // Get mouse position.
    //     var mouse = robot.getMousePos();

    //     // Get pixel color in hex format.
    //     var hex = robot.getPixelColor(mouse.x, mouse.y);
    //     console.log("#" + hex + " at x:" + mouse.x + " y:" + mouse.y);
    // });

}


module.exports = Bot;

index.html 文件:

    <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Hello World!</title>
  <link rel="stylesheet" href="index.css" />
 </head>
 <body>
  <div class="App">
   <div class="Header">
    <h1>Checkout-Bot</h1>
   </div>
   <div class="Wrapper">
    <p>Click Start</p>
    <button id="start">Start</button>
   </div>
  </div>
 </body>
</html>
3个回答

将此行和 Bot();index.js 移动到 index.html :

const Bot = require('./bot')

将此更改为:

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
});

更改为:

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
  }
});
GirkovArpa
2020-07-15

Electron 有一个用于前端 javascript(如按钮点击)的“渲染器”线程。如果您在 index.html 文件底部包含 bot.js 文件,则可以从那里运行您的 Bot 代码:

<script src="./bot.js"></script>

并且要允许使用节点,您必须在浏览器窗口中将 webPreferences.nodeIntegration 设置为 true:

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    } 
  })
jed
2020-07-15

我的假设是,您在 HTML 呈现之前预加载了该 JS 文件,因此不存在这样的按钮来附加事件。

此外,我没有看到 Bot 方法被调用。如果您不调用 Bot(),它不会将任何内容附加到您的按钮。 您在哪里调用它?如果您忘记了,您应该在按钮后添加

<!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8" />
      <title>Hello World!</title>
      <link rel="stylesheet" href="index.css" />
     </head>
     <body>
      <div class="App">
       <div class="Header">
        <h1>Checkout-Bot</h1>
       </div>
       <div class="Wrapper">
        <p>Click Start</p>
        <button id="start">Start</button>
       </div>
      </div>
      <script>Bot();</script>
     </body>
    </html> 
siniradam
2020-07-16