如何为 node-webkit 创建加载屏幕？

Question

我创建了一个node-webkit 桌面应用程序，但在我单击.exe 后加载需要很长时间。有没有办法显示加载屏幕。我正在为此寻找解决方案，但没有找到。

Answer 1

这可能是您正在寻找的：

这是一个小型库，用于在主应用程序加载之前显示启动画面。

初始屏幕将在单独的进程中运行，因此任何动画 应用加载时会流畅播放。

https://github.com/nwutils/nw-splasher

Answer 2

要在加载主应用程序屏幕时显示加载屏幕或启动屏幕，请考虑以下步骤：

1. 在主窗口设置为隐藏的情况下启动您的应用程序。
2. 由于您的主窗口已隐藏，请打开另一个窗口，该窗口将用作启动屏幕或加载屏幕。
3. 当您的主应用程序完全加载并准备就绪时，关闭初始屏幕窗口并显示您隐藏的主窗口。

---

第 1 步在隐藏主窗口的情况下启动您的应用程序：

在 manifest 中设置 Window 属性的 show: false

{
  "main": "index.html",
  "name": "nw-demo",
  "description": "demo app of node-webkit",
  "version": "0.1.0",
  "keywords": [ "demo", "node-webkit" ],
  "window": {
    "title": "node-webkit demo",
    "icon": "link.png",
    "show": false,
    "toolbar": false,
    "width": 800,
    "height": 500,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200
  }
}

"show": false 属性不会在您的应用程序启动时显示主窗口。

第 2 步打开加载或启动窗口：

在您的 index.html 中编写一个脚本，该脚本将打开另一个用作启动屏幕的窗口。

var guiWin = require('nw.gui');   
this.splashScreen = guiWin.open('path/to/splash.html', {
                "transparent": true,
                'frame': false,
                "icon": "path/to/icon.png",
                'position': 'center',
                'always-on-top': true,
                "width": 475,
                "height": 250,
                "resizable": false,
                "toolbar": false,
                "fullscreen": false
            });

第 3 步。应用准备就绪时关闭启动画面并显示主窗口：

当您的主应用程序完全加载后，您可以通过调用此方法关闭启动窗口并显示主窗口。

function hideSplash() {
    this._splashScreen.close(true);
    guiWin.get().show();            // get the current window and show
    this.splashScreen = null;            
}