共计 4216 个字符，预计需要花费 11 分钟才能阅读完成。
制作从头开始 最后会将写好的组件放到一起的! 之前写了好几天的纯 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 都作为学习使用, 如果侵犯了腾讯的相关权益, 请联系作者删除!