使用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 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 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生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python3 操作符重载方法示例
2017/11/23 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
python用Configobj模块读取配置文件
2020/09/26 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
高中毕业自我鉴定
2013/12/19 职场文书
上课迟到检讨书
2014/01/19 职场文书
单位授权委托书范文
2014/08/02 职场文书
课外小组活动总结
2014/08/27 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
体育部部长竞选稿
2015/11/21 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
jQuery实现影院选座订座效果
2021/04/13 jQuery
SQL Server实现分页方法介绍
2022/03/16 SQL Server
MySQL创建管理LIST分区
2022/04/13 MySQL