electron仿製qq(2) 主界面製做

製做從頭開始 最後會將寫好的組件放到一塊兒的!
以前寫了好幾天的純css 有點累 本章中將使用sass
若是代碼太長 會分兩個或多個章節寫
代碼中會有詳細的註釋 以便於你們閱讀and理解
界面可能會有部分誤差 比較是仿製的

---

官方界面尺寸

默認寬度: 280px (大約 我以前拉伸過 被記錄了 因此無法準確的測量)
默認高度: 652px (也是大約值)
最小高度: 528px
最小寬度: 280px
最大高度: 1041px (可能不太準確 有多是根據分辨率來顯示的)
最大寬度: 605px
頂部頭像區域高度: 140px
底部選項區域高度: 40px
搜索框高度: 30px
頭像直徑/高度: 50px
右鍵菜單寬度: 180px

下載安裝

安裝electron-vue

這幾天不知道什麼狀況 總是下載很慢 若是太慢就掛代理吧!

#cd F:\electron
vue init simulatedgreg/electron-vue qq_main
cd qq_main 
npm install
npm run dev

開始製做

建立路由和界面

路由:

export default new Router({
    routes: [
        {path: '/', name: 'main', component: () => import('@/components/LandingPage')},
        {path: '/main', name: 'main', component: () => import('@/view/main/index')},
        {path: '*', redirect: '/'}
    ]
})

建立的第一個窗口 主窗口 不能使用窗口透明 這也就意味着咱們不能使用圓角 因此咱們要本身再建立一個窗口 讓窗口邊透明!
將主窗口 show:false 暫時不讓顯示
以後再建立一個main.js 讓他來建立咱們要作的窗口!

import {BrowserWindow} from 'electron'

let main = null;

function createMainWindow() {
    main = new BrowserWindow({
        width: 280, //窗口建立的默認寬度
        height: 652,    //默認高度
        minWidth: 280,  //最小寬度
        minHeight: 528, //最小高度
        maxHeight: 1041,    //最大高度
        maxWidth: 605,  //最大寬度
        alwaysOnTop: true,  //窗口置頂
        useContentSize: true,   //使用web網頁size, 這意味着實際窗口的size應該包括窗口框架的size，稍微會大一點，默認
        frame: false,   //去掉頂部
        transparent: true,  //透明窗口
         type: 'toolbar',    //工具欄窗口
        webPreferences: {
            devTools: false,    //關閉調試工具
        }
    });
}

createMainWindow();

頁面文件和樣式文件

<template>
    <div id="main">
        <header>
            <div class="toolbar-header"></div>
            <div class="search-box"></div>
        </header>
        <footer></footer>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style lang="sass">
    #main
        position: absolute
        width: 100%
        height: 100%
        background-color: red
        border-radius: 4px
    header
        position: relative
        border-radius: 4px 4px 0 0
        height: 140px
        background-color: blue
        width: 100%
        .toolbar-header
            position: absolute
            top: 0
            height: 33px
            width: 100%
            background-color: yellow
        .search-box
            position: absolute
            bottom: 0
            width: 100%
            height: 32px
            background-color: black
    footer
        border-radius: 0 0 4px 4px
        height: 40px
        background-color: black
        position: absolute
        bottom: 0
        width: 100%
</style>

效果

頂部

因爲圖標有點難找 因此找了幾個相似的

頂部按鈕組

界面代碼:

<header>
            <div class="toolbar-header">
                <i class="logo iconfont icon-qq"></i>
                <div class="buttons">
                    <span class="iconfont icon-xunzhang"></span>
                    <span class="iconfont icon-yifu"></span>
                    <span class="iconfont icon-Group-"></span>
                    <span class="iconfont icon-qqkongjian"></span>
                    <span class="iconfont icon-winfo-icon-zuixiaohua"></span>
                    <span class="iconfont icon-close close"></span>
                </div>
            </div>
            <div class="search-box"></div>
        </header>

css代碼

header
            position: relative
            -webkit-app-region: drag
            height: 140px
            background: url("../../assets/img/bg.png") no-repeat
            background-size: 100% 100%
            width: 100%
            border-radius: 4px 4px 0 0
            .toolbar-header
                position: absolute
                border-radius: 4px 4px 0 0
                top: 0
                height: 33px
                width: 100%
                line-height: 33px
                background-color: rgba(255, 255, 255, 0)
                display: flex
                .logo
                    color: #808080
                    margin-left: 10px
                    width: 30px
                .buttons
                    margin-left: auto
                    color: #FFFFFF
                    -webkit-app-region: no-drag
                    span
                        display: inline-block
                        height: 30px
                        text-align: center
                        width: 30px
                        border-radius: 3px
                        &:hover
                            background-color: rgba(255, 255, 255, 0.3)
                    .close:hover
                        background-color: red
                        border-radius: 0 4px 0 0

搜索框

界面代碼

<div class="search-box">
                <div class="search">
                    <i class="iconfont icon-sousuo"></i>
                    <input type="text" class="search-input" placeholder="搜索">
                </div>
</div>

css代碼

.search-box
                position: absolute
                bottom: 0
                width: 100%
                height: 32px
                background-color: rgba(255, 255, 255, 0.2)
                -webkit-app-region: no-drag
                cursor: text
                color: #FFFFFF
                line-height: 32px
                .search
                    i
                        position: absolute
                        left: 10px
                        top: 3px
                .search-input
                    width: 100%
                    background-color: rgba(255, 255, 255, 0)
                    height: 32px
                    outline: none
                    text-indent: 2rem
                    border: none
                    color: #FFFFFF
                    &::placeholder
                        color: #FFFFFF

底部

界面代碼

<footer>
            <div class="left_menu">
                <span class="iconfont icon-menu3caidan3"></span>
                <span class="iconfont icon-tianjiahaoyou"></span>
                <span class="iconfont icon-wendang"></span>
            </div>
            <div class="pull-right">
                <span class="iconfont icon-live_icon"></span>
                <span class="iconfont icon-shipin1"></span>
                <span class="iconfont icon-yinle"></span>
                <span class="iconfont icon-anquan"></span>
                <span class="iconfont icon-tubiaozhizuomobanyihuifu-"></span>
            </div>
        </footer>

css代碼

footer
            border-radius: 0 0 4px 4px
            height: 40px
            line-height: 40px
            position: absolute
            bottom: 0
            width: 100%
            display: flex
            color: #333
            border-top: 1px solid #BDD0DB
            .pull-right
                margin-left: auto
            span
                display: inline-block
                width: 30px
                height: 40px
                text-align: center
                font-size: 18px
                &:hover
                    background-color: #BDD0DB

最後效果

比對qq

給main 加一個背景就差很少了 其實qq主界面的背景色是一整個圖 然而咱們並無採起這種方式

版權聲明

本文只學習electron使用 不作任何商業用途,文章中使用的騰訊qq相關圖片和相關Logo都做爲學習使用,若是侵犯了騰訊的相關權益,請聯繫做者刪除!