使用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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
vue.js实现二级菜单效果
Oct 19 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反弹shell实现代码
2009/04/22 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
详解如何修改python中字典的键和值
2020/09/29 Python
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
简单英文演讲稿
2014/01/01 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
百年校庆节目主持词
2014/03/27 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
感谢信模板大全
2015/01/23 职场文书
2015大学迎新标语
2015/07/16 职场文书
MySQL 数据类型详情
2021/11/11 MySQL
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB