您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)怎么使用electron實(shí)現(xiàn)百度網(wǎng)盤懸浮窗口功能,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
相關(guān)依賴
里面使用了vuex vue vue-route storeJs
storeJs 用來(lái)持久化vuex狀態(tài)
展示
介紹說(shuō)明
沒(méi)有使用electron內(nèi)置的-webkit-app-region: drag
因?yàn)槭褂盟莻€(gè)有很多問(wèn)題
比如事件無(wú)法使用 右鍵無(wú)法使用 以及不能使用手型等!
安裝
安裝的時(shí)候沒(méi)有截圖 所以就參考下我其他的文章吧
storeJs 安裝
npm install storejs
準(zhǔn)備寫代碼
配置路由文件
export default new Router({ routes: [ {path: '/', name: 'home', component: ()=> import('@/view//home')}, {path: '/suspension', name: 'suspension', component: ()=> import('@/view/components/suspension')} ] })
寫懸浮窗頁(yè)面
頁(yè)面路徑 /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>
主進(jìn)程創(chuàng)建懸浮窗頁(yè)面代碼
路徑: /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: '開始全部任務(wù)', enabled: false}, {label: '暫停全部任務(wù)', enabled: false}, {label: '本次傳輸完自動(dòng)關(guān)機(jī)'}, {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, //懸浮窗口的寬度 比實(shí)際DIV的寬度要多2px 因?yàn)橛?px的邊框 height: 27, //懸浮窗口的高度 比實(shí)際DIV的高度要多2px 因?yàn)橛?px的邊框 type: 'toolbar', //創(chuàng)建的窗口類型為工具欄窗口 frame: false, //要?jiǎng)?chuàng)建無(wú)邊框窗口 resizable: false, //禁止窗口大小縮放 show: false, //先不讓窗口顯示 webPreferences: { devTools: false //關(guān)閉調(diào)試工具 }, transparent: true, //設(shè)置透明 alwaysOnTop: true, //窗口是否總是顯示在其他窗口之前 }); const size = screen.getPrimaryDisplay().workAreaSize; //獲取顯示器的寬高 const winSize = win.getSize(); //獲取窗口寬高 //設(shè)置窗口的位置 注意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 });
遺留問(wèn)題
在軟件關(guān)閉之后重啟會(huì)導(dǎo)致懸浮窗口的位置重置 也曾嘗試在主進(jìn)程中使用store.js 但是不能用!
如果想解決這個(gè)問(wèn)題 可以在渲染進(jìn)程中將拖動(dòng)的最后坐標(biāo)保存到storejs中
在渲染進(jìn)程給主進(jìn)程發(fā)送異步消息的時(shí)候?qū)⒆鴺?biāo)攜帶進(jìn)去 也可以使用nedb在主進(jìn)程中存儲(chǔ)坐標(biāo)!
關(guān)于“怎么使用electron實(shí)現(xiàn)百度網(wǎng)盤懸浮窗口功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。