电子反应样板闪屏

Question

我有一个使用electron-react-boilerplate实例化的 electron 应用程序。 我想添加一个启动画面。 即，我有以下代码：

splash = new BrowserWindow({
        icon: getAssetPath("icon.png"),
        transparent: true,
        alwaysOnTop: true,
        frame: false,
        height: 600,
        width: 800,
    });

splash.loadURL(resolveHtmlPath("splash.html"));

其中resolveHtmlPath由以下代码定义：

let resolveHtmlPath: (htmlFileName: string) => string;

if (process.env.NODE_ENV === "development") {
    const port = process.env.PORT || 1212;
    resolveHtmlPath = (htmlFileName: string) => {
        const htmlUrl = new URL(`http://localhost:${port}`);
        htmlUrl.pathname = htmlFileName;
        return htmlUrl.href;
    };
} else {
    resolveHtmlPath = (htmlFileName: string) => {
        const myurl = url.format({
            pathname: path.resolve(__dirname, "../renderer/", htmlFileName),
            protocol: "file:",
            slashes: true,
        });
        return myurl;
    };
}

我知道electron-react-boilerplate在打包期间构建反应应用程序并创建一个 html index.html文件，该文件提供给渲染器进程。 现在，我想创建一个类似的东西，但是对于一个名为splash.html的启动页面

Answer 1

如果你使用电子生成器，你可以像我一样做这个。

在package.json文件中，我添加了这样extra-ressources ：

  "build": {
    "productName": "exemple",
    ... 
    "extraResources": [
      "./assets/**",
      "./splash/**",
    ]
  },
...

打包应用程序时，所有extra-ressources文件夹都可以在ressources文件夹中使用。 文档

在main.ts中，我使用三元运算符来验证我的应用程序是否已打包，之后，我将获得启动屏幕的路径。

const splash = new BrowserWindow({
    width: 1024,
    height: 728,
    movable: true,
    center: true,
    icon: getAssetPath('icon.png'),
    transparent: true,
    frame: false,
  });

  const splashScreenSrc = app.isPackaged
    ? path.join(process.resourcesPath, 'splash', 'splash.html')
    : path.join(__dirname, '../../splash', 'splash.html');

  splash.loadFile(splashScreenSrc);