electron 设置界面右下角打开

功能需求场景

写一个可以下载各种平台的小工具,需要右下角打开方便做其它事情

实现基础

要在屏幕的右下角设置窗口,可以调整mainWindow的创建参数,特别是通过使用xy坐标来定位窗口 ; 需要获取屏幕的尺寸,并据此计算出窗口的位置

代码示例

javascript 复制代码
const { screen } = require('electron');

function createWindow() {
  const { width, height } = screen.getPrimaryDisplay().workAreaSize
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 350,
    height: 68,
    show: false,
    x: width - 350, // 屏幕宽度减去窗口宽度,确保窗口靠右
    y: height - 68, // 屏幕高度减去窗口高度,确保窗口靠下
    ...
  })
}

需要注意

javascript 复制代码
const { width, height } = screen.getPrimaryDisplay().workAreaSize

这行代码只能写在electron初始化完成之后 , 如代码示例 , 写在开头导入资源中 必报错

相关推荐
集成显卡7 小时前
Bun v1.3.6 发布:内置 Tarball 归档支持、JSONC 解析、Bundle 分析增强等重磅更新!
javascript·新版本·bun.js
奔跑的web.8 小时前
TypeScript Enum 类型入门:从基础到实战
前端·javascript·typescript
盐真卿8 小时前
python2
java·前端·javascript
梦梦代码精8 小时前
BuildingAI vs Dify vs 扣子:三大开源智能体平台架构风格对比
开发语言·前端·数据库·后端·架构·开源·推荐算法
seabirdssss9 小时前
《bootstrap is not defined 导致“获取配置详情失败”?一次前端踩坑实录》
前端·bootstrap·html
kgduu9 小时前
js之表单
开发语言·前端·javascript
摘星编程10 小时前
React Native for OpenHarmony 实战:Picker 选择器组件详解
javascript·react native·react.js
摘星编程11 小时前
React Native for OpenHarmony 实战:VirtualizedList 虚拟化列表
javascript·react native·react.js
谢尔登11 小时前
Vue3 响应式系统——computed 和 watch
前端·架构
愚公移码11 小时前
蓝凌EKP产品:主文档权限机制浅析
java·前端·数据库·蓝凌