電子加載動畫

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 
})