Question

我在Electron应用程序上遇到麻烦。我大约9个月前就开始使用它，但是现在我制作的自定义最小和最大化按钮无法正常工作。

这是我的文件结构

node_modules
    ...
web
    css
        main.css
    html
        index.html
    images
        ...
    js
        index.js
    themes
        ...
main.js
package.json
package-lock.json
require.js

这是index.html

的内容

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../css/main.css">
        <style type="text/css">* {visibility: hidden;}</style>
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
        <link rel="icon" href="../images/favicon-32x32.png" />
    </head>
    <body>
        <div id="wrapper">
            <div id="title-bar">
                <div id="title-bar-btns">
                    <button id="min-btn" onclick="window_minimise()">&#x2014;</button>
                    <button id="close-btn" onclick="window_close()">&#x2715;</button>
                </div>
            </div>
        ...
        </div>
        <script>
            // You can also require other files to run in this process
            require('../../renderer.js')
        </script>
        <script src="../js/index.js" type="text/javascript"></script>
    </body>
</html>

还有index.js

...
const {BrowserWindow} = require('electron').remote;

  function window_minimise(){
      let window = BrowserWindow.getCurrentWindow();
      window.minimize();
  }

  function window_close(){
      let window = BrowserWindow.getCurrentWindow();
      window.close();
  }
...

这是我的main.js文件

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

let mainWindow

function createWindow () {

  let mainWindow = new BrowserWindow({
      width: 1200,
      height: 748,
      icon:'web/images/favicon-32x32.png',
      resizable: false,
      frame: false,
      show: false,
      backgroundColor: '#171717',
      webPreferences: {
          nodeIntegration: true
      }
  })

  mainWindow.once('ready-to-show', () => {
  mainWindow.show()
})
  mainWindow.setMenu(null);

  mainWindow.loadURL('http://localhost:8000/html/index.html')

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

当我单击最小化或最大化时，什么也没有发生。所以我去了http://localhost:8000/html/index.html并检查了控制台，然后看到了这些错误

未捕获到的ReferenceError：require未在index.html：137上定义

未捕获的ReferenceError：require.js：110中未定义

我正在使用电子版5.0.2。

如果有人可以帮助我解决这个问题，那就太好了。

谢谢。

编辑：页面加载时会显示我上面提到的错误，而当我单击“最小化”时会显示该错误

未捕获的ReferenceError：之前无法访问“ BrowserWindow” 在以下位置进行window_minimise（index.js：113）的初始化 HTMLButtonElement.onclick（index.html：18）

EDIT2：我认为问题在于eel（允许我将python与我的电子应用程序接口的代码）要求网页必须在本地主机上运行，因此require之类的节点功能不起作用。我在这里的GitHub问题中详细介绍了以下内容：github.com/ChrisKnott/Eel/issues/147

Answer 1

如下更改您的index.js文件。然后使用nodeRequire代替关键字require。

  initNodeRequire();
  const {BrowserWindow} = nodeRequire('electron').remote;

  function window_minimise(){
      let window = BrowserWindow.getCurrentWindow();
      window.minimize();
  }

  function window_close(){
      let window = BrowserWindow.getCurrentWindow();
      window.close();
  }

  function initNodeRequire(){
       window.nodeRequire = require;
       delete window.require;
       delete window.exports;
       delete window.module;
  }

未捕获ReferenceError：未定义require（电子）

1 个答案: