使用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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
js密码强度检测
Jan 07 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 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
PHP 日期加减的类,很不错
2009/10/10 PHP
php获取参数的几种方法总结
2014/02/18 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
Javascript typeof 用法
2008/12/28 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
vue登录注册实例详解
2019/09/14 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
python私有属性和方法实例分析
2015/01/15 Python
python中的格式化输出用法总结
2016/07/28 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
python3个性签名设计实现代码
2018/06/19 Python
解析python的局部变量和全局变量
2019/08/15 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
总经理办公室主任岗位职责
2013/11/12 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android