使用electron实现百度网盘的悬浮窗功能！

相关依赖使用vuexvuevue-routestoreJsstoreJs持久化vuex状态显示。介绍中显示electron内置的-webkit-app-region:drag没有使用，因为使用起来有很多问题。手型等等！安装过程中没有截图，请参考我的其他文章。storeJsinstallnpminstallstorejs准备写代码配置路由文件。exportdefaultnewRouter({routes:[{path:'/',name:'home',component:()=>import('@/view//home')},{path:'/suspension',name:'suspension',component:()=>import('@/view/components/suspension')}]})写入悬浮窗页面的页面路径/src/renderer/view/components/suspension.vue主进程创建悬浮窗口界面代码路径：/src/main/window.jsimport{BrowserWindow,ipcMain,screen,Menu,shell,app,webContents}from'electron'varwin=null;constwindow=BrowserWindow.fromWebContents(webContents.getFocusedWebContents());constwinURL=process.env.NODE_ENV==='开发'?`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)=>{constrightM=Menu.buildFromTemplate([{label:'开始所有任务',enabled:false},{label:'暂停所有任务',enabled:false},{label:'传输后自动关闭'},{type:'separator'},{label:'HideSuspension',click:()=>{window.webContents.send('hideSuspension',false);win.hide()}},{type:'separator'},{label:'加入qq群',点击:()=>{shell.openExternal('tencent://groupwpa/?subcmd=all¶m=7B2267726F757055696E223A3831343237303636392C2274696D655374616D70223A313533393531303138387D0A');}},{label:'GitHub地址',点击:()=>{shell.openExternal('https://github.com/lihaotian0607/auth');}},{label:'退出软件',点击:()=>{app.quit();}},]);rightM.popup({});});functioncreateSuspensionWindow(){win=newBrowserWindow({width:107,//悬浮窗的宽度比DIV的实际宽度多2px，因为有1px的边框height:27,//浮窗的高度比实际DIV的高度多了2px，因为有1px的边框type:'toolbar',//创建的窗口类型是toolbarwindowframe:false,//创建无边框窗口resizable:false,//禁止窗口大小缩放show:false,//不让窗口先显示webPreferences:{devTools:false//关闭调试工具},transparent:true,//设置透明度alwaysOnTop:true,//该窗口是否一直显示在其他窗口之前});constsize=screen.getPrimaryDisplay().workAreaSize;//获取显示的宽高constwinSize=win.getSize();//获取窗口的宽高//设置窗口的位置注意x轴上桌面的宽度-窗口的宽度win.setPosition(size.width-winSize[0],100);win.loadURL(winURL);win.once('准备展示',()=>{win.show()});win.on('close',()=>{win=null;})}ipcMain.on('hideSuspensionWindow',()=>{if(win){win.hide();}});存储文件路径：/src/renderer/store/modules/suspension.jsimportstorejsfrom'storejs'conststate={show:storejs.get('showSuspension')};constactions={showSuspension:function({state,commit}){让状态=真；storejs.set('showSuspension',status);state.show=状态；},hideSuspension:function({state,commit}){letstatus=false;storejs.set('showSuspension',status);state.show=状态；},};导出默认值（{状态，动作}）；版权声明中使用的百度图标和UI仅供学习使用，请勿用于商业用途！遗留问题，软件关闭后重启会导致浮窗的位置重新设置坐标保存在storejs中，渲染进程向主进程发送异步消息时携带坐标。也可以在主进程中使用nedb存储坐标！github地址使用electron制作百度网盘客户端：https://github.com/lihaotian0...使用electron制作百度网盘悬浮窗：https://github.com/lihaotian0...目前这个开源代码里没有悬浮窗，有空我会加上！！！