使用electronrh实现网盘的悬浮窗口

小编给大家分享一下使用electronrh 实现网盘的悬浮窗口，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及成都混凝土泵车等，在重庆网站建设公司、营销型网站建设、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。

相关依赖

里面使用了vuex  vue  vue-route storeJs

storeJs 用来持久化vuex状态

展示

介绍说明

没有使用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

主进程创建悬浮窗页面代码

路径: /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, //悬浮窗口的宽度 比实际p的宽度要多2px 因为有1px的边框
        height: 27, //悬浮窗口的高度 比实际p的高度要多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
});

版权说明

里面使用的百度的图标以及UI作为学习使用,请不要作为商业用途!

遗留问题

在软件关闭之后重启会导致悬浮窗口的位置重置 也曾尝试在主进程中使用store.js  但是不能用!
如果想解决这个问题 可以在渲染进程中将拖动的最后坐标保存到storejs中
在渲染进程给主进程发送异步消息的时候将坐标携带进去  也可以使用nedb在主进程中存储坐标!

github地址

使用electron制作百度网盘客户端: https://github.com/lihaotian0...
使用electron制作百度网盘悬浮窗: https://github.com/lihaotian0...

以上是使用electronrh 实现网盘的悬浮窗口的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！