当前位置:   article > 正文

electron模板【lectron-react-boilerplate】多窗口配置【HtmlWebpackPlugin】多页面配置_electron react 单例 多窗口

electron react 单例 多窗口

如果您正在使用electron-react-boilerplate进行快速的Electron应用程序开发,您可能会遇到想要在桌面应用程序中拥有多个原生窗口的情况。

MacOS窗口图像

MacOS窗口图像由OpenClipart-Vectors提供,来源Pixabay

开始之前需要提及的事情!

  1. Electron有一个主进程和渲染进程的模式。可以有多个渲染进程,但只有一个主进程。
  2. 对于Electron IPC(进程间通信),我们需要一个预加载器。我们可以通过启用节点集成来实现,但这是一个安全隐患。
  3. webpack插件HtmlWebpackPlugin为每个入口(块)创建一个html文件。

如果您不想了解如何操作的细节,您可以直接克隆这个仓库并从中学习https://github.com/alielmajdaoui/electron-react-boilerplate-multiple-windows

开发环境设置

./src文件夹内,创建两个文件夹,settings-main用于主进程文件,settings-renderer用于渲染进程文件。

打开文件.erb/configs/webpack.paths.ts,在以下行之后

const srcRendererPath = path.join(srcPath, 'renderer');
  • 1

添加

const srcSettingsMainPath = path.join(srcPath, 'settings-main');
const srcSettingsRendererPath = path.join(srcPath, 'settings-renderer');
  • 1
  • 2

在同一文件中,导出新变量。

文件.erb/configs/webpack.paths.ts应该看起来像

./erb/configs/webpack.paths.ts

创建设置窗口渲染进程

settings-renderer文件夹内,创建一个新文件index.ejs

./src/settings-renderer/index.ejs

在同一文件夹settings-renderer内,创建一个新文件index.tsx

./src/settings-renderer/index.tsx

将新的渲染入口添加到Webpack

打开.erb/configs/webpack.config.renderer.dev.ts,并找到以下代码块

  entry: [
    `web
  • 1
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/936048
推荐阅读
相关标签
  

闽ICP备14008679号