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