node-ddk,electron 组件, 打开新窗口

node-ddk 打开新窗口

https://blog.csdn.net/eli960/article/details/146207062

也可以下载demo直接演示

http://linuxmail.cn/go#node-ddk

本文讲解如何在渲染进程发起创建新窗口, 包括 window.open

在主进程定义窗口类型

import main, { NODEDDK } from "node-ddk/main"
// 设置窗口类型, 一般情况,不用调用此函数
main.window.setWindowTypes([
  {
    type: "main",   // 唯一的, main, 本主窗口自动创建,且不应该销毁
    menu: true,
    devTools: true,
    autoDevTools: true,
    windowStateType: "123",
  },
  {
    type: "noframe_test", // 都是自定义类型
    frame: false,
  },
  {
    type: "minWidthHeight",
    minWidth: 500,
    minHeight: 300,
  },
  {
    type: "menu_test123",
    minWidth: 500,
    minHeight: 300,
    menu: true,
  },
  {
    type: "test456",
    minWidth: 500,
    minHeight: 300,
    // 如果需要记住窗口状态, 按不同的类型记住不同窗口状态
    windowStateType: "test_type"
  },
  {
    type: "一般window.open666",
  },
])

在渲染进程(既web端)创建窗口

import renderer, { NODEDDK } from "node-ddk/renderer"
//
renderer.window.create({ type: "noframe_test" })
//
renderer.window.create({ type: "minWidthHeight" })
//
renderer.window.create({ type: "test456",
    // args 是传递给新窗口的数据
    args: {...}
})

在渲染进程(既web端)打开模态窗 window.open

let www = renderer.window.openModal({
    type: "menu_test123",
    "onClose": () => {
        debugShow("模态窗关闭了")
    },
})
// 这个 wwww 就是 window.open() 的返回值

在渲染进程(既web端), 新窗口启动后

获取参数

//
renderer.window.getInfo()
// 结果形如:
{
    "webContentsId": 1,
    "appName": "node-ddk-demo",
    "appVersion": "0.1.1",
    "devMode": true,
    "type": "main",
    "uniqueId": "main",
    // args 就是 create 传入的 args
    "args": {...},
    "minWidth": 100,
    "minHeight": 100,
    "menu": true,
    "devTools": true,
    "autoDevTools": true,
    "windowStateType": "123"
}

窗口类型参数

    // @ 渲染进程启动参数
    export type WindowType = {
        type: string,
        minWidth?: number,
        minHeight?: number,
        resizable?: boolean,
        minimizable?: boolean,
        minimize?: boolean,
        maximizable?: boolean,
        maximize?: boolean,
        transparent?: boolean,
        fullscreenable?: boolean,
        fullscreen?: boolean,
        alwaysOnTop?: boolean,
        frame?: boolean,
        menu?: boolean,
        skipTaskbar?: boolean,
        kiosk?: boolean,
        focus?: boolean,
        needCenter?: boolean,
        x?: number,
        y?: number,
        width?: number,
        height?: number,
        hide?: boolean,
        backgroundColor?: string,
        navigate?: boolean,
        zoomFactor?: number,
        hasShadow?: boolean,
        windowStateType?: string,
        devTools?: boolean,
        autoDevTools?: boolean,
    }