這篇文章將為大家詳細(xì)講解有關(guān)怎么使用electron實(shí)現(xiàn)百度網(wǎng)盤(pán)懸浮窗口功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出洛龍免費(fèi)做網(wǎng)站回饋大家。

相關(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)備寫(xiě)代碼

配置路由文件

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

寫(xiě)懸浮窗頁(yè)面

頁(yè)面路徑 /src/renderer/view/components/suspension.vue

主進(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: '開(kāi)始全部任務(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)盤(pán)懸浮窗口功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。