电子加载动画

Question

有人可以帮我为我的Electron应用程序实现加载动画吗？我正在学习这项新技术,了解正确的方法是很好的.

我想的是:

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

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

Answer 1

据我所知,app之前没有发出事件ready(只有异常will-finish-launching仅在macOS上可用).

此外,您不能打开任何BrowserWindow以前app就是ready,所以你应该等待它.

但是,如果您的主应用程序窗口加载速度很慢,您仍然可以在此之前打开"加载窗口"并在主窗口准备好时切换它们.

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

^{如果你想消除视觉闪光(但失去一些速度),你可以使用win.on('ready-to-show')而不是win.webContents.on('dom-ready')到处}

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