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 小时前
[ VUE ] 封装通用数组校验组件,el-input内使用
前端·javascript·vue.js
弓.长.11 小时前
React Native 鸿蒙跨平台开发:实现一个多功能单位转换器
javascript·react native·react.js
南半球与北海道#11 小时前
前端打印(三联纸票据打印)
前端·vue.js·打印
摘星编程11 小时前
React Native for OpenHarmony 实战:ToggleSwitch 切换开关详解
javascript·react native·react.js
董世昌4111 小时前
深入浅出 JavaScript 常用事件:从原理到实战的全维度解析
前端
满栀58511 小时前
分页插件制作
开发语言·前端·javascript·jquery
qq_4061761412 小时前
深入剖析JavaScript原型与原型链:从底层机制到实战应用
开发语言·前端·javascript·原型模式
弓.长.12 小时前
React Native 鸿蒙跨平台开发:BottomSheet 底部面板详解
javascript·react native·react.js
开开心心_Every12 小时前
免费窗口置顶小工具:支持多窗口置顶操作
服务器·前端·学习·macos·edge·powerpoint·phpstorm
摘星编程12 小时前
React Native for OpenHarmony 实战:Permissions 权限管理详解
javascript·react native·react.js