使用electron實現百度網盤懸浮視窗功能的示例程式碼
阿新 • • 發佈:2018-11-25
相關依賴
裡面使用了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/
[email protected]") 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在主程序中儲存座標!