背景

Electron是通过Chromium和Node.js集成来达到这一开发体验的, 我们可以用React / Vue 很轻松的搭建一个桌面应用程序。应用启动时就避免不了短暂的白屏或者需要启动时加载基础数据。

那么怎样解决这一问题呢?

有APP开发经验的同学肯定立马就想到了 启动动画(开屏广告)。

思路

  1. 应用启动额外创建 Loading窗口 ,并且主窗口默认隐藏
  2. 主窗口加载完毕通过 ipcRenderer 通知主窗口显示, Loading窗口关闭

实现

  • 准备开屏动画

  • 配置主进程main.js文件

1
2
3
4
5
6
7
const createWindow = async () => {
  mainWindow = new BrowserWindow({
    minHeight: 600,
    minWidth: 1024, width: 1280, height: 720, titleBarStyle: 'hidden', frame: false, show: false
  });
    ……
};
  • 创建loading窗口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// loading
const createLoadingWindow = async () => {   
  loadingWindow = new BrowserWindow({
    height: 260,
    width: 650,
    show: true,
    transparent: true,  // 透明窗口
    maximizable: false,  //禁止双击放大
    frame: false   // 去掉顶部操作栏
  })

  loadingWindow.loadURL(url.format({
    // loading.html 加载动画
    pathname: path.join(__dirname, './lib/loading/loading.html'),
    protocol: 'file:',
    slashes: true
  }))
    ……
}
  • 动画展示隐藏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { ipcRenderer } from "electron";
const ipcMain = require('electron').ipcMain;

// 页面加载完毕时调用 通知关闭loading
ipcRenderer.send("close-loading-window");

app.on('ready', () => {
  // 创建加载动画 
  createLoadingWindow();
  // 创建主窗口
  createWindow();
  // 监听页面加载完毕事件
  ipcMain.on('close-loading-window', () => {
    
    if(loadingWindow) {
      loadingWindow.close();
    }
    mainWindow.show();
  })

});

完成

animation

不足

transparent: true, // 透明窗口

在win7下不起作用

解决方案: 禁用硬件加速(未尝试)

1
2
3
4
5
6
7
8
9
app.disableHardwareAcceleration();

app.on('ready', () => {
  setTimeout(() => {
    createWindow();
    autoUpdater.checkForUpdatesAndNotify();
    createMenu();
  }, 50);
});