电子窗口显示屏幕截图答案

【问题标题】：Electron window shows a screenshot of the screen电子窗口显示屏幕截图
【发布时间】：2018-11-12 10:20:13
【问题描述】：

所以我有一个名为main.js 的电子应用程序，我以npm start 开头。我已经将 package.json 中的启动脚本设置为 electron main.js 并且还尝试了 electron .。运行npm start 时，一切都开始时没有任何错误，但电子窗口仅显示我启动时屏幕上的内容的快照。我试过刷新它，但似乎没有任何效果。这是它的外观： Image 它应该查看localhost:3001，但它没有。我也尝试直接在终端中运行electron .，但这给了我electron: command not found。运行./node_modules/electron/dist/electron . 时，它会按原样启动，但会出现同样的问题。这里是main.js：

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const core = require('./app');

let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: { webSecurity: false },
        nodeIntegration: false,
    })

    mainWindow.loadURL('http://localhost:3001');

    // mainWindow.setFullScreen(true)

    // mainWindow.setMenu(null);

    mainWindow.webContents.openDevTools()

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

    console.log('Electron window ready')
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
    app.quit()
})

core.start()

【问题讨论】：

标签： javascript node.js npm electron

【解决方案1】：

您似乎没有全局安装 Electron，因为您需要运行 npm install -g Electron

将mainWindow.loadURL('http://localhost:3001'); 替换为：

mainWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, "index.html"),
    protocol: "file:",
    slashes: true
  })
);

【讨论】：

【解决方案2】：

你还没有分享你的package.json 文件，但我猜你没有在终端中运行npm install --save electron。

还有，而不是：

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

你想这样写：

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

我会审查 ES6 解构，除非您没有与我们共享代码，否则您应该通过确保 app 对象已准备好并像这样加载您的文件来启动您的电子项目：

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({});
  mainWindow.loadURL(`file://${__dirname}/main.html`);
});

您会注意到我声明了一个空的 mainWindow 变量来处理您可能遇到的任何范围问题，因为您可能还必须在其他函数中使用 mainWindow。

【讨论】：