Electron / Angular项目Onload将图像显示为飞溅

Question

我有一个 Angular / Electron 应用程序。

应用程序加载的内容我需要将图像显示为启动画面，然后在完成加载后消失。

在我的 index.html 中有：

<app-root>Loading ...</app-root>

但我从来没有看到它...我需要一个正在加载...的图像，并让它停留几秒钟然后消失。

例如：

<app-root><div id="splash"><img src="assets/splash.png" /></div></app-root>

我一直在谷歌上搜索，但找不到任何东西，这就是为什么我没有任何代码可显示。

我该怎么做？

Answer 1

我不了解 Angular，但我有一个带有闪屏的电子应用程序

您需要为启动画面创建一个单独的窗口，先显示它，然后在您的应用程序准备好时关闭它

结构如下：

splash.js

const path = require('path')

const StandardWindow = require('./StandardWindow')
const loadCss = require('./loadCss')

function splash () {
  const splashScreen = new StandardWindow({
    file: 'splash.html',
    width: 450,
    height: 200,
    frame: false,
    resizable: false,
    backgroundColor: '#fff'
  }) // building the splashscreen window

  splashScreen.show() // showing it immediately

  splashScreen.onDidFinishLoad = function () {
    loadCss(this, path.join(__dirname, 'splash.css'))
  } // loading the splash css after html loading

  return splashScreen
}

module.exports = splash

加载Css.js

const fs = require('fs')

function loadCss (elWindow, cssPath) {
  fs.readFile(
    cssPath,
    'utf-8',
    (error, data) => {
      if (error) throw error
      const css = data.replace(/\s{2,10}/g, ' ').trim()
      elWindow.webContents.insertCSS(css)
      console.log('loaded css :' + css.substring(0, 20) + '...')
    }
  )
}

module.exports = loadCss

标准窗口.js

const { BrowserWindow } = require('electron')
const path = require('path')

const loadCss = require('./loadCss')

// default window settings
const defaultProps = {
  width: 500,
  height: 800,
  show: false,

  // update for electron V5+
  webPreferences: {
    nodeIntegration: true
  }
}

class StandardWindow extends BrowserWindow {
  constructor ({
    file,
    devTools,
    onDidFinishLoad,
    onReadyToShow,
    ...windowSettings
  }) {
    console.log('creating StandardWindow ...')
    // calls new BrowserWindow with these props
    super({ ...defaultProps, ...windowSettings })

    this.loadFile(file)

    if (devTools) this.webContents.openDevTools()

    this.webContents.on('did-finish-load', () => {
      loadCss(this, path.join(__dirname, '/shared.css'))
      if (onDidFinishLoad) onDidFinishLoad()
      if (this.onDidFinishLoad) this.onDidFinishLoad()
    })

    // gracefully show when ready to prevent flickering
    this.once('ready-to-show', () => {
      this.show()
      if (onReadyToShow) onReadyToShow()
      if (this.onReadyToShow) this.onReadyToShow()
    })

    console.log('...StandardWindow created')
  }
}

module.exports = StandardWindow

然后在你的 main.js 中

const { app } = require('electron')

const splash = require('./splash/splash')
const StandardWindow = require('./StandardWindow')


app.on('ready', function () {
  let splashscreen = splash()

  //then just create your main window and start your processes
  let mainWindow = new StandardWindow({
    devTools: true,
    file: 'main.html',
    width: 800,
    height: 600,
    webPreferences: {
      // preload: path.join(__dirname, 'preload.js')
    },
    onDidFinishLoad: _ => {
      splashScreen.close()
      splashScreen = null
      // close your splashscreen when window ready !
    }
  })
})


app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

那么您只需创建“splash.html”和“splash.js”来为您的主窗口编写启动画面和“main.html”...

希望能有所帮助