电子反应-样板飞溅屏

Question

我有一个电子应用程序是用electron-react-boilerplate实例化的。我想加入一个飞溅的屏幕。也就是说，我有以下代码：

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在打包过程中构建了react应用程序，并创建了一个html index.html文件，该文件提供给呈现程序过程。现在，我想创建一个类似的东西，但是创建一个名为splash.html的splash页面。

Answer 1

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

在package.json文件中，我添加如下extra-ressources：

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

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

在main.ts中，我使用tenary操作符来验证我的应用程序是否已经打包，然后，我得到了我的启动屏幕的路径。

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);