国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

使用electron實現(xiàn)百度網(wǎng)盤懸浮窗口功能的示例代碼

2019-11-19 12:38:27
字體:
供稿:網(wǎng)友

相關(guān)依賴

里面使用了vuex vue vue-route storeJs

storeJs 用來持久化vuex狀態(tài)

展示


介紹說明

沒有使用electron內(nèi)置的-webkit-app-region: drag 因為使用他那個有很多問題

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

安裝

安裝的時候沒有截圖 所以就參考下我其他的文章吧

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')}  ]})

寫懸浮窗頁面

頁面路徑 /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)建懸浮窗頁面代碼

路徑: /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: '本次傳輸完自動關(guān)機'},    {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',  //創(chuàng)建的窗口類型為工具欄窗口    frame: false,  //要創(chuàng)建無邊框窗口    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});

遺留問題

  • 在軟件關(guān)閉之后重啟會導(dǎo)致懸浮窗口的位置重置 也曾嘗試在主進(jìn)程中使用store.js 但是不能用!
  • 如果想解決這個問題 可以在渲染進(jìn)程中將拖動的最后坐標(biāo)保存到storejs中
  • 在渲染進(jìn)程給主進(jìn)程發(fā)送異步消息的時候?qū)⒆鴺?biāo)攜帶進(jìn)去 也可以使用nedb在主進(jìn)程中存儲坐標(biāo)!

github地址

使用electron制作百度網(wǎng)盤客戶端: https://github.com/lihaotian0607/baidupan
使用electron制作百度網(wǎng)盤懸浮窗: https://github.com/lihaotian0607/electron-suspension

目前這個開源代碼中沒有懸浮窗 有時間了會加上去!!!

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 温州市| 永泰县| 佳木斯市| 涡阳县| 桐梓县| 景宁| 浮山县| 大名县| 荣成市| 游戏| 平和县| 民丰县| 陈巴尔虎旗| 玛纳斯县| 无为县| 夏邑县| 东宁县| 潼关县| 类乌齐县| 阿图什市| 色达县| 武义县| 巨野县| 阿坝| 灵寿县| 瑞昌市| 长白| 望江县| 开封市| 绍兴县| 普兰店市| 安福县| 海城市| 苏尼特右旗| 宜良县| 凤山县| 隆化县| 民县| 阿荣旗| 宁津县| 龙海市|