electron创建窗口常用配置参数

最新推荐文章于 2025-11-04 04:55:25 发布

转载最新推荐文章于 2025-11-04 04:55:25 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luzhanshi/p/11315936.html

本文详细介绍了Electron应用中浏览器窗口的各种配置参数，包括窗口尺寸、位置、标题、显示模式等，提供了丰富的设置选项，帮助开发者更好地控制和优化窗口表现。

{
  "width": 800,//指定窗口的宽度，单位: 像素值. 默认是 800
  "height":600,//指定窗口的高度，单位: 像素值,. 默认是 600
  "minWidth":400,//窗口的最小宽度，单位: 像素值,
  "minHeight":300,//窗口的最小高度，单位: 像素值,
  "title":"测试窗口",//窗口的默认标题
  "center":true,//窗口是否在屏幕居中；true or false
  "resizable":true,//窗口的大小是否可以；true or false，默认值为true
  "movable":true,//窗口能否可以被移动；true or false，默认值为 true
  "frame":true,//值为true或false, 表示是否创建无边框窗口，默认的程序窗口是带外壳的(标题栏，工具栏，边框等)
  "show": true , //是否显示窗口
  "kiosk": false,//是否使用kiosk模式。如果使用kiosk模式，应用程序将全屏显示，并且阻止用户离开应用。true or false
}

下面几个网站可以作为参考补充：

https://wizardforcel.gitbooks.io/electron-doc/content/api/browser-window.html

https://segmentfault.com/a/1190000008459541

https://www.jianshu.com/p/4b2c69ed10b8

官方文档：https://electronjs.org/docs/api/browser-window

转载于:https://www.cnblogs.com/luzhanshi/p/11315936.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30756499

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Electron窗口配置技巧

m0_62153576的博客

08-18

本文介绍了在Electron应用中拦截和自定义新窗口打开的方法。通过setWindowOpenHandler可以覆盖默认设置，指定新窗口的尺寸、边框、透明度等属性。示例展示了如何为主窗口配置特定参数的新窗口，并提到可通过details.disposition实现更精细的控制。该方法能有效统一应用体验，满足不同场景的窗口管理需求。

Electron开发-第2篇：Electron 项目结构与基础配置

无

05-21

475

本文介绍了Electron项目的基本结构与配置。Electron应用由主进程和渲染进程组成，主进程负责创建窗口、管理应用生命周期，通常通过main.js文件实现；渲染进程则负责用户界面展示，通过HTML、CSS和JavaScript文件构建。项目中的资源文件（如图片、样式表）和配置文件（如package.json）也至关重要。package.json文件用于管理项目依赖和脚本命令，而主进程和渲染进程的配置则通过BrowserWindow选项和ipcRenderer模块实现进程间通信。合理配置这些部分，可以确

参与评论您还未登录，请先登录后发表或查看评论

electron属性

豪先生的博客

08-15

1874

之后，会有一个background.js文件,里面有下面这些属性（部分，还有一些建议去官方查看）vue项目添加使用electron打包工具。

Electron.NET 启动参数处理：实现应用的灵活配置

最新发布

gitblog_00487的博客

11-04

873

在桌面应用开发中，启动参数是实现灵活配置的关键机制。Electron.NET作为.NET与Electron的桥梁，提供了完整的启动参数处理方案，允许开发者通过命令行参数控制应用行为。本文将深入解析Electron.NET的启动参数处理机制，从API使用到实际场景应用，帮助开发者构建可灵活配置的桌面应用。 ## 核心API解析 Electron.NET的启动参数处理主要通过CommandLine...

electron教程（三）窗口设置

i-cat的博客

09-29

3910

electron创建窗口时的一些属性设置

electron学习2 --- 窗口设置

wodecanmeng的博客

05-30

2645

这次想要记录的问题是electron的窗口设置，首先用到的配置是frame和titleBarStyle这两个配置项。我想要实现的效果是一个透明的窗口来展示我每天的ri

Electron-窗口

qq_45903181的博客

12-23

2121

在新版本的 Electron 中，渲染进程无法直接操作窗口的放大、缩小和关闭功能。正确的做法是通过与主进程进行通信，在主进程中执行这些操作。// 渲染进程代码 (renderer.js)// 获取按钮元素// 绑定按钮点击事件});});});在上述代码中，我们使用对象来进行与主进程的通信。通过调用方法，我们向主进程发送指定的消息（‘window-action’），并传递相应的操作命令（‘maximize’、‘minimize’、‘close’）作为参数。

Electron 如何创建模态窗口？

编程实战派-李工，专注编程领域

05-21

4183

模态框是一种常用的交互元素，无论是在 Web 网站、桌面应用还是移动 APP 中，都有其应用场景。

electron窗口管理封装和页面通讯

weixin_47017648的博客

08-08

563

本文介绍了Electron多窗口应用的管理方案，通过封装WinTools工具类实现窗口的统一管理。主要内容包括：1.封装窗口创建、显示/隐藏、最大化/最小化等操作的API；2.实现主进程与渲染进程间的IPC通信机制；3.主进程初始化配置，包括主窗口创建、托盘菜单、开机自启动等功能；4.通过preload脚本安全暴露API给渲染进程，避免直接访问Node.js带来的安全隐患。该方案解决了Electron多窗口应用中窗口管理混乱、通信复杂等问题，提高了代码的模块化和可维护性。

electron+vue3全家桶+vite项目搭建【27】封装窗口工具类【1】雏形

个人网站：https://www.longzipeng.online

02-25

1625

electron+vue3+vite项目，封装一个窗口工具类，更方便的管理窗口中的内容

【Electron】Electron学习笔记

墨苒孤的博客

08-27

2320

Electron是一个跨平台桌面应用开发框架，开发者可以利用HTMLCSSJavaScript等Web技术来构建桌面应用程序。它本质上是结合了Chromium和Node.js，目前广泛用于桌面应用程序开发。例如，许多桌面应用都采用了Electron技术。Electron官网以下这些都是使用了Electron: 一个流行的开源代码编辑器，由Microsoft开发。GitHub官方提供的桌面客户端，用于管理Git代码仓库。1Password: 一个密码管理工具，提供安全的密码保存和管理功能。新版QQ。

Electron配置

沃德天，倪维胜么，捺莫帅？

03-07

771

创建简单创建 //首先在一个空的文件内，创建package.json文件 { "name": "electronl", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": ".\\node_modules\\.bin\\electron .", "start": "chcp 65001 && npm test" }, "author": "ha

第2章：Electron的安装与配置

一名全栈开发工程师

06-27

3615

本文介绍了Electron的安装和配置

electron 获取命令行参数

程序员Link

10-23

8618

一实现最近要做一个小工具，基于electron的独立进程，从平台中双击图标，能够启动electron，并且要携带一些必要的命令行参数。以为是个很简单的实现，但发现electron的文档中并没有说明。最后在atom的讨论网站中找到了一个答案，如下： 1 假如你传的参数为arg1 arg2 2 在electron的主进程中 global.sharedObject = {prop1: pr...

electron BrowserWindow options 参数

qq_40945903的博客

10-24

806

Vue+Electron：常用配置

sw7662504的专栏

10-23

4186

一. 构建配置 electron的相关配置和vue共用一个文件vue.config.js，注意，这个文件如果不存在，需要自己新建一个。下面是配置所在位置 // vue.config.js module.exports = { pluginOptions: { electronBuilder: { builderOptions: { // 用户自己的构建配置放在这里 // 在这里的配置将会和默认配置合并，

Electron使用自签名证书

前进者

04-07

4238

1、问题表述： xhr.js?b50d:160 POST https://47.107.171.214:10016/consultation/getMeetingData net::ERR_CERT_AUTHORITY_INVALID createError.js?2d83:16 Uncaught (in promise) Error: Network Error 2、解决方案：...

linux添加dio扩展,Aardio内嵌Electron浏览框怎么正确添加启动参数?

weixin_32349561的博客

05-04

874

import win.ui;/*DSG{{*/var winform = win.form(text="aardio form";right=1299;bottom=729)winform.add()/*}}*/winform.show();import electron.runtime; // 如果希望自动安装electron到系统目录,请先导入electron.runtimeimport el...

electron获取命令行携带参数以及主程序跟页面通信

qq_35411656的博客

04-18

9603

** 学习及记录 ** 任务清单: 1.命令行打开exe 获取其中携带参数 2. 主程序跟页面之间的通信一、命令行打开exe 获取其中携带参数 main.js 在主进程上修改 app.on('ready', function () { createWindow() // 打印命令行携带参数 console.log(process.argv) }) 加入代码之后 cmd...

如何正确配置Electron窗口的webPreferences属性？

07-20

在 Electron 中，`webPreferences` 是 `BrowserWindow` 构造函数的一个配置项，用于定义渲染进程的行为和功能。通过设置不同的属性，可以控制窗口的安全性、性能、功能等。 ### 配置 `webPreferences` 的基本方法创建 `BrowserWindow` 时，可以通过传入的配置对象中的 `webPreferences` 属性来设置相关参数。例如： ```javascript const { BrowserWindow } = require('electron'); let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true, devTools: true } }); ``` ### 常用 `webPreferences` 属性说明 - **`nodeIntegration`** 控制是否在渲染进程中启用 Node.js 集成。若设置为 `true`，则可以在渲染进程中直接使用 Node.js 的模块，如 `require('fs')`。 ```javascript nodeIntegration: true ``` 注意：启用此功能可能会带来安全风险，特别是在加载远程内容时 [^4]。 - **`contextIsolation`** 控制是否启用上下文隔离。上下文隔离可以防止网页中的脚本访问 Node.js 的 API，提高安全性。 ```javascript contextIsolation: true ``` 如果启用上下文隔离，则需要结合 `preload` 脚本来安全地暴露部分 Node.js 功能 [^5]。 - **`enableRemoteModule`** 控制是否启用 `remote` 模块，该模块允许在渲染进程中调用主进程的方法。 ```javascript enableRemoteModule: true ``` 若未启用此选项，使用 `remote` 模块时会出现 `remote is undefined` 的错误 [^3]。 - **`devTools`** 控制是否允许打开开发者工具。 ```javascript devTools: true ``` 在生产环境中建议关闭此功能以提升性能和安全性 [^4]。 - **`preload`** 指定一个预加载脚本，在渲染进程加载之前执行。该脚本可以安全地访问 Node.js API，并可以通过 `contextBridge` 暴露有限的接口给渲染进程。 ```javascript preload: path.join(__dirname, 'preload.js') ``` 这是推荐的安全方式来在渲染进程中使用 Node.js 功能 [^5]。 ### 完整示例以下是一个完整的 `BrowserWindow` 创建示例，包含常见的 `webPreferences` 配置： ```javascript const { app, BrowserWindow } = require('electron'); const path = require('path'); function createWindow() { const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: true, enableRemoteModule: true, devTools: true, preload: path.join(__dirname, 'preload.js') } }); mainWindow.loadURL('http://localhost:3000'); } app.on('ready', createWindow); ``` ### 安全建议 - **启用上下文隔离**：为了提高安全性，建议始终启用 `contextIsolation`，并结合 `preload` 脚本暴露必要的功能。 - **避免直接暴露 Node.js API**：在渲染进程中应避免直接使用 Node.js 的模块，而是通过 `preload` 和 `contextBridge` 安全地暴露接口 [^5]。 - **限制 `nodeIntegration` 的使用场景**：如果应用不需要在渲染进程中使用 Node.js 功能，建议将 `nodeIntegration` 设置为 `false` [^4]。