跳转到主文档

打开窗口

补充信息

以下示例中，窗口均采用：关闭 Node方式进行开发。

新增一个窗口配置

electron/main.ts
const baseOptions = {
  options: {
      webPreferences: {
        preload: PRELOAD_JS,
        enableRemoteModule: true,
      },
    },
}
export const windowsConfig: WindowConfig[] = [
  {
    name: 'main',
    ...baseOptions,
  },
  {
    name: 'demo',
    ...baseOptions
  },

补充信息

在 Modern.js 中，默认不用配置窗口的加载路径，默认加载对应入口在打包前后的路径，比如上述窗口：demo。
- dev 时加载的路径为：http://localhost:8080/demo。
- prod 时加载的路径为：file://xx/xx/html/demo/index.html。
关于如何新建一个入口，请参考：【开发中后台】。

打开窗口

一般，我们的窗口管理都是在主进程中。因此，打开窗口也是需要先在主进程中定义打开窗口服务。我们新增方法：

electron/services/index.ts（主进程）
// 主进程
import { winService } from '@modern-js/runtime/electron-main';
export const openWindow = (winName: string) => {
  return winService.createWindow({
    name: winName
  })
}

electron/preload/index.ts
// preloadJs 中
export const apis = {
  ...,
  openWindow: (winName: string) => {
    return callMain('openWindow', winName);
  },
}

exposeInMainWorld(apis);

xx/xx.tsx
import bridge from '@modern-js/runtime/electron-bridge';
bridge.openWindow('demo');

新增一个窗口配置
打开窗口