electron仿制qq 主界面制作

Posted 2020-11-30 jlfw

制作从头开始 最后会将写好的组件放到一起的!
之前写了好几天的纯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都作为学习使用,如果侵犯了腾讯的相关权益,请联系作者删除!