小編給大家分享一下使用electronrh 實(shí)現(xiàn)網(wǎng)盤(pán)的懸浮窗口，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司于2013年開(kāi)始，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元瑪多做網(wǎng)站,已為上家服務(wù),為瑪多各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

相關(guān)依賴

里面使用了vuex  vue  vue-route storeJs

storeJs 用來(lái)持久化vuex狀態(tài)

展示

介紹說(shuō)明

沒(méi)有使用electron內(nèi)置的-webkit-app-region: drag 因?yàn)槭褂盟莻€(gè)有很多問(wèn)題
比如事件無(wú)法使用 右鍵無(wú)法使用 以及不能使用手型等!

安裝

安裝的時(shí)候沒(méi)有截圖 所以就參考下其他的文章吧
storeJs 安裝

npm install storejs

準(zhǔn)備寫(xiě)代碼

配置路由文件

export default new Router({
    routes: [
        {path: '/', name: 'home', component: ()=> import('@/view//home')},
        {path: '/suspension', name: 'suspension', component: ()=> import('@/view/components/suspension')}
    ]
})

寫(xiě)懸浮窗頁(yè)面

頁(yè)面路徑 /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>

主進(jìn)程創(chuàng)建懸浮窗頁(yè)面代碼

路徑: /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: '開(kāi)始全部任務(wù)', enabled: false},
        {label: '暫停全部任務(wù)', enabled: false},
        {label: '本次傳輸完自動(dòng)關(guān)機(jī)'},
        {type: 'separator'},
        {
            label: '隱藏懸浮窗',
            click: () => {
               window.webContents.send('hideSuspension', false);
               win.hide()
            }
        },
        {type: 'separator'},
        {
            label: '加入qq群',
            click: () => {
                shell.openExternal('tencent://groupwpa/?subcmd=all&param=7B2267726F757055696E223A3831343237303636392C2274696D655374616D70223A313533393531303138387D0A');
            }
        },
        {
            label: 'GitHub地址',
            click: () => {
                shell.openExternal('https://github.com/lihaotian0607/auth');
            }
        },
        {
            label: '退出軟件',
            click: () => {
                app.quit();
            }
        },
    ]);
    rightM.popup({});
});

function createSuspensionWindow() {
   win = new BrowserWindow({
       width: 107, //懸浮窗口的寬度 比實(shí)際p的寬度要多2px 因?yàn)橛?px的邊框
        height: 27, //懸浮窗口的高度 比實(shí)際p的高度要多2px 因?yàn)橛?px的邊框
        type: 'toolbar',    //創(chuàng)建的窗口類(lèi)型為工具欄窗口
        frame: false,   //要?jiǎng)?chuàng)建無(wú)邊框窗口
        resizable: false, //禁止窗口大小縮放
        show: false,    //先不讓窗口顯示
       webPreferences: {
            devTools: false //關(guān)閉調(diào)試工具
        },
        transparent: true,  //設(shè)置透明
        alwaysOnTop: true,  //窗口是否總是顯示在其他窗口之前
    });
    const size = screen.getPrimaryDisplay().workAreaSize;   //獲取顯示器的寬高
    const winSize = win.getSize();  //獲取窗口寬高

    //設(shè)置窗口的位置 注意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
});

版權(quán)說(shuō)明

里面使用的百度的圖標(biāo)以及UI作為學(xué)習(xí)使用,請(qǐng)不要作為商業(yè)用途!

遺留問(wèn)題

在軟件關(guān)閉之后重啟會(huì)導(dǎo)致懸浮窗口的位置重置 也曾嘗試在主進(jìn)程中使用store.js  但是不能用!
如果想解決這個(gè)問(wèn)題 可以在渲染進(jìn)程中將拖動(dòng)的最后坐標(biāo)保存到storejs中
在渲染進(jìn)程給主進(jìn)程發(fā)送異步消息的時(shí)候?qū)⒆鴺?biāo)攜帶進(jìn)去  也可以使用nedb在主進(jìn)程中存儲(chǔ)坐標(biāo)!

github地址

使用electron制作百度網(wǎng)盤(pán)客戶端: https://github.com/lihaotian0...
使用electron制作百度網(wǎng)盤(pán)懸浮窗: https://github.com/lihaotian0...

以上是使用electronrh 實(shí)現(xiàn)網(wǎng)盤(pán)的懸浮窗口的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站欄目：使用electronrh實(shí)現(xiàn)網(wǎng)盤(pán)的懸浮窗口-創(chuàng)新互聯(lián)
當(dāng)前地址：http://chinadenli.net/article14/hdhde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)