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

相关推荐
恋猫de小郭16 分钟前
Flutter 多窗口支持类型和 API 介绍
android·前端·flutter
必须会一定会20 分钟前
AI 前端项目验收:Playwright 截图、响应式视口、控制台错误与交互回归
前端·人工智能·gpt·交互·ai编程
Java搬码工22 分钟前
VUE3使用教程
前端·javascript·vue.js
小白勇闯网安圈24 分钟前
Vue 3 核心进阶:组合式 API、响应式系统与 <script setup>
前端·javascript·vue.js
张风捷特烈26 分钟前
当 AI 遇见 Flutter | 打造 500+ Widget 专属Logo
android·前端·flutter
雪芽蓝域zzs30 分钟前
Vue3 + JS + pnpm 创建项目
开发语言·javascript·ecmascript
蜡台42 分钟前
Uniapp 开发H5 页面跳转拦截
前端·javascript·uni-app
IT爱学堂1 小时前
Three.js可视化企业实战WEBGL课,2023年全新WEB 3D THREEJS技术
前端·javascript·webgl
网安蟹佬霸1 小时前
WebAssembly安全攻防实战:从WASM逆向到漏洞利用
前端·安全·自动化·区块链·智能合约·wasm