使用electron实现百度网盘悬浮窗口功能的示例代码

相关依赖

里面使用了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/[e-mail]") 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>

主进程创建悬浮窗页面代码

路径: /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&param=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在主进程中存储坐标!

github地址

使用electron制作百度网盘客户端:
使用electron制作百度网盘悬浮窗:

目前这个开源代码中没有悬浮窗 有时间了会加上去!!!