Question

我正在关注Electron quick start guide，它可以正常工作，但输出结果与文档中描述的不一样，带有document.write的版本将不会显示在输出中。

这是我的输出：

Hello World!

We are using node , Chrome , and Electron .

我的预期输出将包括相应的版本号。

我已经检查了该应用程序的GitHub页面，还是一样，尝试了各种StackOverflow答案，但没有一个适合我。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node) </script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron) </script>.
</body>
</html>

package.json

{
    "name": "electronapp",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",
    "scripts": {
       "start": "electron ."
    },
    "author": "harsh",
    "license": "ISC",
    "devDependencies": {
        "electron": "^5.0.2"
    }
}

main.js

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

function createWindow () {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    mainWindow.loadFile('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()
})

我已全局安装Node，Chrome与Electron打包在一起了，对吗？

Answer 1

经过大量搜索，我找到了这个：

mainWindow = new BrowserWindow({
      webPreferences: {
          nodeIntegration: true,
          contextIsolation: false
     }
});

请注意，在 2021 年 2 月发布的 Electron 12 之前，contextIsolation 默认为 false。

Answer 2

如果激活开发人员工具，则应该在控制台中看到如下错误消息：

Uncaught ReferenceError: process is not defined
    at index.html:11

您需要激活BrowserWindow中的nodeIntegration，以便允许在BrowserWindow中运行的进程（“渲染器进程”）访问Node的process对象。

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: true
    }
})

Answer 3

这是您要更正的文件

const {app, BrowserWindow} = require('electron')
const path = require('path')
let mainWindow
function createWindow () {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // I think you don't need this line
            // preload: path.join(__dirname, 'preload.js') 
            nodeIntegration: true
        }
    })
    mainWindow.loadFile('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()
})

Answer 4

您最多会这样更改代码

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

运行“第一电子应用”不会显示版本吗？

4 个答案: