Question

在我的电子应用程序中，我只有一个窗口。在浏览我的应用程序的不同“表单”时，我用来调用mainWindow.loadURL('file://...') - 函数。不幸的是，这会导致闪烁效果，因为浏览器窗口会清除其内容而不是加载新的HTML文件。这将导致非常不自然的感觉。此外，我已经在实例化窗口时检查了“backgroundColor” - 选项，如

mainWindow = new BrowserWindow({
        width: 1000,
        height: 600,
        backgroundColor: '#2e2c29'});

但是这也会失败（在切换网址时，应用的背景将始终为白色，持续一秒或更长时间。

有没有办法避免这种情况？

Answer 1

我发现electron-api-demos有一个加载不同“形式”的有趣例子。回购中的演示通常会加载所有表单，但只能使其中一个能够一次查看，具体取决于用户点击的内容。

另外，Pluralsight的“电子剧本”课程采用了使用Handlebars或Jade以及jQuery制作“视图引擎”的方法。其基本思想是每个“表单”都是一个Handlebars模板，模板可以呈现，然后附加到index.html中的div。结果允许在单个窗口电子应用程序中存在多个表单。

Answer 2

这建立在其他人已经提到过的基础上，但是在一个非常小的例子中：

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

function createWindow(){
    let newWindow = new BrowserWindow({
        width: 1000,
        height: 600,
        backgroundColor: '#2e2c29'
        show: false
    });

    newWindow.loadURL(`file://${__dirname}/views/index.html`);

    newWindow.once('ready-to-show', function (){
        newWindow.show();
    });

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

app.on('ready', function(){
    createWindow();
});

这是最常用的方法，虽然我确信您可以通过创建新窗口或使用超时功能找到其他方法，直到窗口准备好显示。

Answer 3

这是我已经遇到很长一段时间的问题。但是，随着电子2.0.0的发布，您现在可以设置亲和力以包含某些BrowserWindows中的所有页面加载。这对我自己的CPU使用率也有很大帮助，因为它会在一个进程中加载所有这些项目。

https://github.com/electron/electron/blob/master/docs/api/browser-window.md

电子：使用'loadURL'切换URL时避免闪烁

3 个答案: