使用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数组遍历for与for in区别详解
Dec 04 Javascript
Javascript的比较汇总
Jul 25 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
JavaScript实现简单计算器功能
Dec 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无限遍历文件夹示例分享
2014/03/04 PHP
分享3个php获取日历的函数
2015/09/25 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python中psutil的介绍与用法
2019/05/02 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
服装机修工岗位职责
2013/12/26 职场文书
给同学的道歉信
2014/01/16 职场文书
高中美术教学反思
2014/01/19 职场文书
法人授权委托书格式
2014/04/08 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python