使用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控制图片等比例缩放的示例代码
Dec 24 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
layui前端时间戳转化实例
Nov 15 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
python中的句柄操作的方法示例
2019/06/20 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python sorted函数原理解析及练习
2020/02/10 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
python实现画图工具
2020/08/27 Python
python两种注释用法的示例
2020/10/09 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
2015年教研组工作总结
2015/05/04 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python