使用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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
php生成N个不重复的随机数实例
2013/11/12 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
js实现密码强度检验
2017/01/15 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python实现二分查找算法
2017/09/21 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
解决python 上传图片限制格式问题
2019/10/30 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
公司道歉信范文
2014/01/09 职场文书
2014年教务处工作总结
2014/12/03 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技