电子加载动画

Question

有人可以帮我实施我的Electron应用程序的加载动画吗？ 我正在学习这项新技术，理解正确的方法是很好的。

我的想法是这样的：

app.on('ready',() => { 
    // show main content 
}) 

app.on('not-ready',() => { 
    // show loading animation 
}) 

Answer 1

据我所知，应该没有从app发出事件之前ready（唯一的例外是will-finish-launching仅适用于Mac系统）。

此外，在app为ready之前，您无法打开任何BrowserWindow，因此您应该等待它。

但是，如果您的主应用程序窗口加载速度很慢，您仍然可以在此之前打开一个“加载窗口”，并在您的主窗口准备就绪时切换它们。

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

app.on('ready',() => { 
    let main = null 
    let loading = new BrowserWindow({show: false, frame: false}) 

    loading.once('show',() => { 
    main = new BrowserWindow({show: false}) 
    main.webContents.once('dom-ready',() => { 
     console.log('main loaded') 
     main.show() 
     loading.hide() 
     loading.close() 
    }) 
    // long loading html 
    main.loadURL('http://spacecrafts3d.org') 
    }) 
    loading.loadURL('loding.html') 
    loading.show() 
}) 

---

window.open()

如果你想为BrowserWindow通过window.open()在渲染过程中打开做同样的，你可以使用new-window事件webContents如果nativeWindowOpen是true

main = new BrowserWindow({ 
    webPreferences: { 
    nativeWindowOpen: true 
    } 
}) 
main.webContents.on('new-window', (event, url) => { 
    // there are more args not used here 
    event.preventDefault() 
    const win = new BrowserWindow({show: false}) 
    win.webContents.once('dom-ready',() => { 
    win.show() 
    loading.hide() // don't destroy in this case 
    }) 
    win.loadURL(url) 
    loading.show() 
    event.newGuest = win 
})