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


Posted in Javascript onOctober 24, 2018

相关依赖

里面使用了vuex vue vue-route storeJs

storeJs 用来持久化vuex状态

展示

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

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

介绍说明

没有使用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/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>

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

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

github地址

使用electron制作百度网盘客户端: https://github.com/lihaotian0607/baidupan
使用electron制作百度网盘悬浮窗: https://github.com/lihaotian0607/electron-suspension

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

Javascript 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 #Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 #Javascript
vue中的router-view组件的使用教程
Oct 23 #Javascript
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 #Javascript
jquery分页插件pagination使用教程
Oct 23 #jQuery
You might like
使用eAccelerator加密PHP程序
2008/10/03 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
axios如何取消重复无用的请求详解
2019/12/15 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
Python中asyncore的用法实例
2014/09/29 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
python仿抖音表白神器
2019/04/08 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python文件操作的简单方法总结
2019/11/07 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
工作失职检讨书范文
2014/01/16 职场文书
房地产促销活动方案
2014/03/01 职场文书
男女朋友协议书
2014/04/23 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android