使用electron实现百度网盘悬浮窗口功能的示例代码

相关依赖

里面使用了vuex vue vue-route storeJs

storeJs 用来持久化vuex状态

展示
相关依赖

里面使用了vuex vue vue-route storeJs

storeJs 用来持久化vuex状态

展示

介绍说明

没有使用electron内置的-webkit-app-region: drag 因为使用他那个有很多问题

比如事件无法使用右键无法使用以及不能使用手型等!

安装

安装的时候没有截图所以就参考下我其他的文章吧

storeJs 安装

npm install storejs

准备写代码
配置路由文件

export default new Router({routes: [{path: '/', name: 'home', component: ()=> import('@/view//home')},{path: '/suspension', name: 'suspension', component: ()=> import('@/view/components/suspension')}]
})

写悬浮窗页面

页面路径 /src/renderer/view/components/suspension.vue

<template><div id="suspension"><div class="logo"></div><div class="content_body"><div class="upload">拖拽上传</div></div></div>
</template><script>export default {name: "suspension",mounted() {let win = this.$electron.remote.getCurrentWindow();let biasX = 0;let biasY = 0;let that = this;document.addEventListener('mousedown', function (e) {switch (e.button) {case 0:biasX = e.x;biasY = e.y;document.addEventListener('mousemove', moveEvent);break;case 2:that.$electron.ipcRenderer.send('createSuspensionMenu');break;}});document.addEventListener('mouseup', function () {biasX = 0;biasY = 0;document.removeEventListener('mousemove', moveEvent)});function moveEvent(e) {win.setPosition(e.screenX - biasX, e.screenY - biasY)}}}
</script><style>* {padding: 0;margin: 0;}.upload {height: 25px;line-height: 25px;font-size: 12px;text-align: center;color: #74A1FA;}.logo {width: 40px;background: #5B9BFE url("../../assets/img/logo@2x.png") no-repeat 2px 3px;background-size: 80%;}.content_body {background-color: #EEF4FE;width: 100%;}#suspension {-webkit-user-select: none;cursor: pointer;overflow: hidden;}#suspension {cursor: pointer !important;height: 25px;border-radius: 4px;display: flex;border: 1px solid #3388FE;}
</style>
//前端全栈学习交流圈：866109386
//面向1-3经验年前端开发人员
//帮助突破技术瓶颈，提升思维能力

主进程创建悬浮窗页面代码

路径: /src/main/window.js

import {BrowserWindow, ipcMain, screen, Menu, shell, app, webContents} from 'electron'var win = null;
const window = BrowserWindow.fromWebContents(webContents.getFocusedWebContents());
const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/suspension` : `file://${__dirname}/index.html/#/suspension`;
ipcMain.on('showSuspensionWindow', () => {if (win) {if (win.isVisible()) {createSuspensionWindow();} else {win.showInactive();}} else {createSuspensionWindow();}});ipcMain.on('createSuspensionMenu', (e) => {const rightM = Menu.buildFromTemplate([{label: '开始全部任务', enabled: false},{label: '暂停全部任务', enabled: false},{label: '本次传输完自动关机'},{type: 'separator'},{label: '隐藏悬浮窗',click: () => {window.webContents.send('hideSuspension', false);win.hide()}},{type: 'separator'},{label: '加入qq群',click: () => {shell.openExternal('tencent://groupwpa/?subcmd=all¶m=7B2267726F757055696E223A3831343237303636392C2274696D655374616D70223A313533393531303138387D0A');}},{label: 'GitHub地址',click: () => {shell.openExternal('https://github.com/lihaotian0607/auth');}},{label: '退出软件',click: () => {app.quit();}},]);rightM.popup({});
});function createSuspensionWindow() {win = new BrowserWindow({width: 107, //悬浮窗口的宽度 比实际DIV的宽度要多2px 因为有1px的边框height: 27, //悬浮窗口的高度 比实际DIV的高度要多2px 因为有1px的边框type: 'toolbar',  //创建的窗口类型为工具栏窗口frame: false,  //要创建无边框窗口resizable: false, //禁止窗口大小缩放show: false,  //先不让窗口显示webPreferences: {devTools: false //关闭调试工具},transparent: true, //设置透明alwaysOnTop: true, //窗口是否总是显示在其他窗口之前});const size = screen.getPrimaryDisplay().workAreaSize;  //获取显示器的宽高const winSize = win.getSize(); //获取窗口宽高//设置窗口的位置 注意x轴要桌面的宽度 - 窗口的宽度win.setPosition(size.width - winSize[0], 100);win.loadURL(winURL);win.once('ready-to-show', () => {win.show()});win.on('close', () => {win = null;})
}ipcMain.on('hideSuspensionWindow', () => {if (win) {win.hide();}
});

store文件

路径: /src/renderer/store/modules/suspension.js

import storejs from 'storejs'const state = {show: storejs.get('showSuspension')
};const actions = {showSuspension: function ({state, commit}) {let status = true;storejs.set('showSuspension', status);state.show = status;},hideSuspension: function ({state, commit}) {let status = false;storejs.set('showSuspension', status);state.show = status;},
};export default ({state,actions
});

遗留问题

在软件关闭之后重启会导致悬浮窗口的位置重置也曾尝试在主进程中使用store.js 但是不能用!
如果想解决这个问题可以在渲染进程中将拖动的最后坐标保存到storejs中
在渲染进程给主进程发送异步消息的时候将坐标携带进去也可以使用nedb在主进程中存储坐标!

使用electron实现百度网盘悬浮窗口功能的示例代码相关推荐

使用electron实现百度网盘悬浮窗口功能!
相关依赖里面使用了vuex vue vue-route storeJs storeJs 用来持久化vuex状态展示介绍说明没有使用electron内置的-webkit-app-region: ...
百度云盘可以与计算机硬盘,百度网盘上线“工作空间”功能
今日,百度网盘上线"工作空间"功能. 据了解,百度网盘工作空间是一款文件同步的产品,支持电脑本地与云端之间文件的同步,多设备间文件自动保持同步.支持查看文件每次都修改的历史版本. ...
5分钟实现一个百度网盘资源搜索引擎，不用写代码...
点击蓝色"涛哥学Python"关注我丫加个"星标",每天一起快乐的学习作者:msay 来源:https://urlify.cn/AjE7fu 本文主要介绍如 ...
electron仿百度网盘-UI搭建思路
前言 https://juejin.im/editor/posts/5c167c2ff265da6167203868 实例展示代码库求赞鸭: https://github.com/sparkxxx ...
电脑文件夹备份到百度网盘，可以实现自动备份
电脑文件夹怎么备份到百度网盘?我们经常需要将电脑上的重要文件进行备份,备份可以保证数据安全,以减轻因为文件丢失而带来的顺出.百度网盘是一种非常不错的文件云存储介质,所以很多小伙伴希望能将电脑文件备份到 ...
如何将本地文件自动备份到百度网盘？
如何将本地文件自动备份到百度网盘?说到网盘的使用,大家第一个想到的肯定是百度网盘,百度网盘第一个提出网盘这个概念,相信很多小伙伴都是百度网盘的忠实用户,大家也非常喜欢使用百度网盘来存储文件.为什么百度 ...
电脑文件自动上传百度网盘，自动备份
如何将电脑文件自动上传百度网盘?作为一名上班族,每天都需要用电脑处理各种工作,时间久了电脑里就会保存大量的重要文件,如果这些重要文件丢失了,那可能会造成无法预估的代价,所以小编在这里建议大家要经常的将 ...
将电脑文件备份到百度网盘，并实现自动备份
如何将电脑文件备份到百度网盘,并且定时自动备份?大家都有相同的习惯,平时我们都喜欢用百度网盘来存储文件,因为百度网盘属于线上存储器,文件备份到百度网盘之后,不管我人在哪里,只要登录账号,就能下载自己需 ...
百度网盘可以自动备份电脑文件吗？
百度网盘可以自动备份电脑文件吗?大家应该对百度网盘都很熟悉吧,百度网盘是一种线上的云存储设备,大部分的小伙伴都已开通百度网盘,用户可以将自己的文件上传到网盘上,并可跨终端随时随地查看和分享.所以我们都 ...

使用electron实现百度网盘悬浮窗口功能的示例代码

使用electron实现百度网盘悬浮窗口功能的示例代码相关推荐

最新文章

热门文章