跳到主要内容

控制渲染进程样式

1、通过css控制
2、BrowserWindow配置项
- transparent: true
  - 设置透明
- frame:false
  - 设置无框、无标题栏
  - frame用于设置窗口外壳
3、BrowserWindow方法，内置了操作窗口的样式方法
- win.setAspectRatio 控制窗口比例
- win.setSize 控制窗口大小
- .....

使用css控制拖拽

默认情况下, 无边框窗口是不可拖拽的。应用程序需要在 CSS 中指定 -webkit-app-region: drag

需在 BrowserWindow 的构造中将 frame 参数设置为 false, 设置为无框窗口，才能让body拖动
- 设置了frame表示窗口为无框、无标题栏，无法使用标题栏来拖动，只能通过body
注意有些组件需要设置不能拖动，否则原有的一些事件无法触发

javascript
// js
const win = new BrowserWindow({ frame: false })

css控制

css
body {
  -webkit-app-region: drag; // 使该区域能拖拽
}

// 注意有些组件需要设置不能拖动，否则原有的一些事件无法触发
textarea,button {
  -webkit-app-region: no-drag;
}

body {
  width: 100vw;
  height: 100vh;
}

渲染进程使用Node模块

Electron为了安全性的考虑，是渲染子进程不能使用node.js模块的，如果要在渲染进程中使用node.js模块，需要在创建主进程时进行设置

1、配置webPreferences的 nodeIntegration设置为true, 【启用node模块】
2、设置contextIsolation: false 【控制渲染进程是否为沙箱模式】
- 控制渲染进程中是否启用沙箱模式。如果设置为 true，则渲染进程中的 JavaScript 代码将运行

使用css控制拖拽
渲染进程使用Node模块