Electron 启动白屏-CFANZ编程社区

Electron 启动白屏

白屏原因：窗口显示到页面渲染完成之间的时间差

Electron 启动白屏_electron

解决方案：采用新建view去遮罩内容的显示，等待显示完成加载出来，再关闭遮罩

Electron 启动白屏_electron_02

background.js

function createWindow() {
  win = new BrowserWindow({
    // 隐藏窗口
    show: false,
    // 背景透明
    transparent: true,
    // mac标题栏
    titleBarStyle: 'hiddenInset',
    // 隐藏标题栏
    frame: false,
    fullscreen: true, // 设置全屏显示
  })
  // 创建View遮罩
  const view = new BrowserView({})
  var viewSize = win.getSize()
  view.setBounds({
    x: 0,
    y: 0,
    width: viewSize[0],
    height: viewSize[1],
  })
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    view.webContents.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '/loading.html')
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    view.webContents.loadURL('app://./loading.html')
    win.loadURL('app://./index.html')
  }
  // 显示窗口
  view.webContents.on('dom-ready', () => {
    console.log('dom-ready', new Date())
    win.show()
  })
  // 关闭遮罩
  ipcMain.on('stop-loading-main', () => {
    win.removeBrowserView(view)
  })
}

loadding.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>加载中</title>
    <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      background:rgb(237,237,237);
    }
    </style>
  </head>
  <body>
  <div style="text-align:center;">    
    <h1>加载中。。。</h1>
  </div>
  </body>
</html>

App.vue

<template>
  <div class="main">.........Hello World............</div>
</template>

<script setup lang="jsx">
import { onMounted } from 'vue'
import { ipcRenderer } from 'electron'

onMounted(() => {
  ipcRenderer.send('stop-loading-main')
})
</script>