Question

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

我知道我可以在电子应用程序启动时执行该功能，但是无论如何说有一个启动按钮，单击按钮就可以执行代码？

我也知道您不能在浏览器中使用节点，并且我知道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>

Answer 1

将此行和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,
  }
});

Answer 2

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,
    } 
  })

Answer 3

我的假设是您正在呈现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>

电子只要单击按钮就可以执行节点？

3 个答案: