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初始化完成之后 , 如代码示例 , 写在开头导入资源中 必报错

相关推荐
桂月二二15 分钟前
Vue3服务端渲染深度实战:SSR架构优化与企业级应用
前端·vue.js·架构
萌萌哒草头将军16 分钟前
🚀🚀🚀 这六个事半功倍的 Pinia 库,你一定要知道!
前端·javascript·vue.js
_一条咸鱼_17 分钟前
深入剖析 Vue 状态管理模块原理(七)
前端·javascript·面试
rocky19127 分钟前
谷歌浏览器插件 录制动态 DOM 元素
前端
谁还不是一个打工人30 分钟前
css解决边框四个角有颜色
前端·css
海晨忆1 小时前
【Vue】v-if和v-show的区别
前端·javascript·vue.js·v-show·v-if
JiangJiang2 小时前
🚀 Vue人看React useRef:它不只是替代 ref
javascript·react.js·面试
1024小神2 小时前
在GitHub action中使用添加项目中配置文件的值为环境变量
前端·javascript
龙骑utr2 小时前
qiankun微应用动态设置静态资源访问路径
javascript
Jasmin Tin Wei2 小时前
css易混淆的知识点
开发语言·javascript·ecmascript