版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_28254093/article/details/83068086
第二节:使用HTML创建主页面
效果图
准备
1.在apps 下创建目录 css ,html,images,js
2.使用npm 在当前目录下安装添加 jQuery库
npm install jQuery
具体内容
1.在index.html页面中添加一下内容
<!DOCTYPE html>
<html>
<head>
<title>TGP游戏盒子</title>
<meta charset="utf-8" />
<link href="../apps/css/main.css" rel="stylesheet" type="text/css">
</head>
<body style="margin:0px;padding:0px;">
<div style="-webkit-app-region:no-drag;border-radius: 5px;">
<div class="e-head">
<div class="e-h-left">
<div>
<div class="logo"></div>
<div class="logo-title">Tencent weGame</div>
</div>
<div>
<div class="back" title="后退"></div>
<div class="refresh" title="刷新"></div>
</div>
</div>
<div class="e-h-center">
<div>
<div id="e-h-home">
<div><div class="e-h-home-visited"></div></div>
<div class="e-h-center-bottom e-h-visited"><div></div></div>
</div>
<div id="e-h-shop">
<div><div class="e-h-shop-no-visited"></div></div>
<div class="e-h-center-bottom e-h-no-visited"><div></div></div>
</div>
<div id="e-h-player">
<div><div class="e-h-player-no-visited"></div></div>
<div class="e-h-center-bottom e-h-no-visited"><div></div></div>
</div>
</div>
</div>
<div class="e-h-right">
<div>
<div title="关闭" class="close" id="closeBtn"></div>
<div title="最大化" id="maxBtn" style="-webkit-app-region:no-drag"></div>
<div title="最小化" id="minBtn"></div>
<div title="系统菜单" id="menuBtn"></div>
</div>
<div class="e-h-right-bttom">
<div id="personInfo"></div>
<div title="社交" id="sociality"></div>
<div title="消息盒子" id="msgBox"></div>
</div>
</div>
</div>
<div class="e-centent" id="centent">
<div class="e-c-left">
<div>
<div class="e-c-l-first">
<div class="float"><div class="float">W</div><div class="float">We动态</div></div>
<div class="float">BETA</div>
</div>
</div>
<div class="e-c-game-toolbar">
<div><img src="images/lol_client_logo.png" class="float"/><div class="float">英雄联盟</div></div>
</div>
<div class="e-c-game-toolbar">
<div><img src="images/lol_client_logo.png" class="float"/><div class="float">英雄联盟</div></div>
</div>
<div class="e-c-l-toolbar">
<div></div>
</div>
</div>
<div class="e-c-right"></div>
</div>
</div>
</body>
<script>window.$= window.jQuery = require("jquery");</script>
<script>
$(function(){
const ipc = require('electron').ipcRenderer
init();
function init(){
//调用后台执行最大最小 系统菜单系统事件
$("[title='关闭']").click(function(){
ipc.send('closeForm');
});
$("[title='最大化']").click(function(){
var title=$(this).attr("title");
if(title=="最大化"){
changeContent();
$(this).attr("title","窗口化");
$(this).css({"background":"url('images/mainframe_icon.png') -75px -123px","-webkit-app-region":"no-drag"});
ipc.send('maxForm');
}else{
changeContent();
$(this).attr("title","最大化");
$(this).css({"background":"url('images/mainframe_icon.png') 0px -20px","-webkit-app-region":"no-drag"});
ipc.send('restoreForm');
}
});
//最大窗口化鼠标访问改变图片
$("[title='最大化']").mouseenter(function () {
var title=$(this).attr("title");
if(title=="最大化"){
$(this).css({"background":"url('images/mainframe_icon.png') -23px -20px","-webkit-app-region":"no-drag"});
}else{
$(this).css({"background":"url('images/mainframe_icon.png') -96px -123px","-webkit-app-region":"no-drag"});
}
});
$("[title='最大化']").mouseleave(function () {
var title=$(this).attr("title");
if(title=="最大化"){
$(this).css("background","url('images/mainframe_icon.png') 0px -20px");
}else{
$(this).css("background","url('images/mainframe_icon.png') -75px -123px");
}
});
$("[title='最小化']").click(function(){
ipc.send('minForm');
});
$("[title='系统菜单']").click(function(){
ipc.send('menuForm');
});
//顶部中间按钮样式事件
$(".e-h-center>div>div").click(function(){
$(".e-h-center-bottom").hide();
$(this).find(".e-h-center-bottom").show();
var id=$(this).attr("id");
$("#e-h-home").children().children().attr("class","e-h-home-no-visited");
$("#e-h-shop").children().children().attr("class","e-h-shop-no-visited");
$("#e-h-player").children().children().attr("class","e-h-player-no-visited");
if(id=="e-h-home"){
$("#e-h-home").children().children().attr("class","e-h-home-visited");
}else if(id=="e-h-shop"){
$("#e-h-shop").children().children().attr("class","e-h-shop-visited");
}else if(id=="e-h-player"){
$("#e-h-player").children().children().attr("class","e-h-player-visited");
}
});
}
ipc.on('changeContent', function(event, message) {
changeContent();
});
//窗体大小改变事件
function changeContent(){
var currWin = require('electron').remote.getCurrentWindow();
var size=currWin.getSize();
if($(".e-h-right").find('[title="最大化"]').length>0){
ipc.send('setPosition',[screen.width,screen.height]);
}
}
setTimeout(function(){
changeContent();
},550);
});
</script>
</html>
2.修改main.js
const {ipcMain, app, BrowserWindow } = require('electron'); //此种写反==》ipcMain=require('electron').ipcMain,app=require('electron').app,BrowserWindow=require('electron').BrowserWindow ;即获取对象的属性值
let win = null;
app.on("ready", createForm);
//定义初始化窗口大小
var initW=1280,initH=830;
function createForm() {
win = new BrowserWindow({
width: initW, //宽度
height: initH, //高度
frame: false, //无边框
center:true, //居中
transparent: true, //透明
minWidth: 1100, //最小宽度
minHeight: 560, //最大宽度
});
win.loadURL(__dirname + "/apps/index.html");
win.show();
win.minimize();
win.openDevTools();
}
//监听关闭事件
ipcMain.on('closeForm', ()=>{
win.close();
});
//监听最大化事件
ipcMain.on("maxForm",()=>{
win.webContents.send('changeContent');
win.maximize();
});
//监听窗口化事件
ipcMain.on("restoreForm",()=>{
win.setSize(initW,initH);
win.webContents.send('changeContent');
});
//监听最小化事件
ipcMain.on("minForm",()=>{
win.minimize();
});
//监听设置窗口位置
ipcMain.on("setPosition",(event,args)=>{
win.setPosition((args[0]-1280)/2,(args[1]-830)/2);
});
3.在apps/css目录下添加 main.css样式文件 对于页面切图之类的本人并不擅长
/*定义全局颜色*/
:root{
--color:#aaaaaa;
--hover-color:#ffc800;
--active-color:white;
--link-color:white;
--btn-background-color:white;
--btn-background-hover-color:#484545;
--btn-background-active-color:#484545;
--toolbar-color:black;
--form-border:black;
}
body{overflow: hidden;height: 100vh;border:1px solid var(--form-border);width: 100% ; background: url(../images/e-centent.png) ; border-radius: 5px ; user-select: none ; box-shadow: 0px 1px #c1990f8c ; background-size: 100% 100%;}
.float{float:left}
.e-head{color: var(--color); height: 80px ; width: 100% ; background: url(../images/e-head.png) ; user-select: none ; box-shadow: 0px 1px #c1990f8c ; background-size: 100% 80px;
-webkit-app-region: drag; /* 移动 */
}
.e-head>div{float:left;}
.e-head>.e-h-left{width:190px;height: 100%;}
.e-head>.e-h-center{width:calc(100% - 190px - 200px);height: 100%;}
.e-head>.e-h-center>div{width: 300px; height: 100px; margin: 0px auto;}
.e-head>.e-h-center>div>div{width: 100px; height: 90px; float:left;}
.e-head>.e-h-center>div>div>div:nth-child(1){height: 50px;}
.e-head>.e-h-center>div>div>div:nth-child(1)>div{height: 60px; width: 40px; margin: 0px auto; padding-top: 20px; -webkit-app-region:no-drag;}
#e-h-home>div:nth-child(1)>div{ height: 43px; width: 50px; margin: 0px auto}
#e-h-home>div:nth-child(1)>div:hover{background: url(../images/nav_icon.png) -84px -1px; height: 43px; width: 50px; margin: 0px auto}
#e-h-home>div:nth-child(1)>div:active{background: url(../images/nav_icon.png) -164px -1px; height: 43px; width: 50px; margin: 0px auto}
#e-h-shop>div:nth-child(1)>div{ height: 43px; width: 50px; margin: 0px auto}
#e-h-shop>div:nth-child(1)>div:hover{background: url(../images/nav_icon.png) -84px -56px; height: 43px; width: 50px; margin: 0px auto}
#e-h-shop>div:nth-child(1)>div:active{background: url(../images/nav_icon.png) -164px -56px; height: 43px; width: 50px; margin: 0px auto}
#e-h-player>div:nth-child(1)>div{ height: 43px; width: 50px; margin: 0px auto}
#e-h-player>div:nth-child(1)>div:hover{background: url(../images/nav_icon.png) -84px -111px; height: 43px; width: 50px; margin: 0px auto}
#e-h-player>div:nth-child(1)>div:active{background: url(../images/nav_icon.png) -166px -111px; height: 43px; width: 50px; margin: 0px auto}
/**----------start--------控制头部中央主按钮点击后处理的样式*/
.e-h-no-visited{display: none;}
.e-h-visited{display: block;}
.e-h-home-no-visited{background: url(../images/nav_icon.png) -17px -1px;}
.e-h-home-visited{background: url(../images/nav_icon.png) -164px -1px;}
.e-h-shop-no-visited{background: url(../images/nav_icon.png) -17px -56px;}
.e-h-shop-visited{background: url(../images/nav_icon.png) -164px -56px; }
.e-h-player-no-visited{background: url(../images/nav_icon.png) -17px -111px;}
.e-h-player-visited{background: url(../images/nav_icon.png) -166px -111px; }
/*----------end--------控制头部中央主按钮点击后处理的样式*/
.e-h-center-bottom{overflow: hidden;}
.e-head>.e-h-center>div>div>div:nth-child(2){overflow: hidden;height: 20px;}
.e-head>.e-h-center>div>div>div:nth-child(2)>div{width: 80px; height: 45px;border-bottom-right-radius: 100%;border-bottom-left-radius: 100%; background-color: #101010; margin: 0 auto;margin-top: -40px; background: url(../images/e-head.png);}
.e-h-center>div>div>div{overflow: hidden;height: 60px;padding: 10px 0px;}
.e-head>.e-h-right{width:200px;height: 100%;}
.e-h-left>div:nth-child(1){ height:30px;}
.e-h-left>div:nth-child(2){ height:calc(100% - 30px);padding:0px 20px;}
.e-h-left>div:nth-child(2)>div:nth-child(1){ -webkit-app-region:no-drag; margin:0px 20px;width: 34px; height: 34px; background: url(../images/left-head-btn.png) 2px 3px; background-size: 96px;}
.e-h-left>div:nth-child(2)>div:nth-child(1):hover{ -webkit-app-region:no-drag;width: 34px; height: 34px; background: url(../images/left-head-btn.png) -25px 3px; background-size: 96px;}
.e-h-left>div:nth-child(2)>div:nth-child(2){ -webkit-app-region:no-drag;width: 33px; height: 34px; background: url(../images/left-head-btn.png) 2px 34px; background-size: 96px;}
.e-h-left>div:nth-child(2)>div:nth-child(2):hover{ -webkit-app-region:no-drag;width: 33px; height: 34px; background: url(../images/left-head-btn.png) -26px 34px; background-size: 96px;}
.e-h-right>div:nth-child(1){ height:25px;}
.e-h-right>div:nth-child(2){ height:calc(100% - 25px);}
.e-h-left>div>div{float:left;}
.e-h-right>div:nth-child(1)>div{width:25px;height:25px;float:right;cursor: pointer;}
/*顶部右侧功能按钮*/
#closeBtn{ -webkit-app-region:no-drag; background: url('../images/mainframe_icon.png') -2px -40px;}
#closeBtn:hover{ -webkit-app-region:no-drag; background: url('../images/mainframe_icon.png') -25px -40px;}
#maxBtn{-webkit-app-region:no-drag; background: url('../images/mainframe_icon.png') 0px -20px;}
#maxBtn:hover{ background: url('../images/mainframe_icon.png') -23px -20px;}
#minBtn{ -webkit-app-region:no-drag; background: url('../images/mainframe_icon.png') 0px 0px;}
#minBtn:hover{ background: url('../images/mainframe_icon.png') -22px -1px;}
#menuBtn{ -webkit-app-region:no-drag; background: url('../images/mainframe_icon.png') -75px -94px;}
#menuBtn:hover{ background: url('../images/mainframe_icon.png') -95px -95px;}
/**顶部右下侧按钮*/
.e-h-right-bttom{margin-right: 35px;}
.e-h-right-bttom>div{ width: 35px; height: 35px; float: left; margin: 0 8px; margin-top: 10px; -webkit-app-region: no-drag; }
#personInfo{-webkit-app-region:no-drag;width: 25px; height: 25px; background: url('../images/photo.png') ;border-radius: 50%;border:2px solid orange;background-size: 100%;}
#sociality{-webkit-app-region:no-drag; background: url('../images/e-h-r-btn.png') -2px -31px;}
#sociality:hover{-webkit-app-region:no-drag; background: url('../images/e-h-r-btn.png') -38px -31px;}
#msgBox{-webkit-app-region:no-drag; background: url('../images/e-h-r-btn.png') -2px -3px;}
#msgBox:hover{-webkit-app-region:no-drag; background: url('../images/e-h-r-btn.png') -38px -3px;}
.logo{margin:10px 2px 0px 10px; width:20px; height:20px;background: url(../images/logo.png) no-repeat;}
.logo-title{padding-top: 8px;font-style: oblique;}
/*中部内容区域*/
.e-centent{width: 100%; height: 99.9vh;}
.e-centent>div{float: left;}
.e-centent>.e-c-left{ width: 190px;height: 100%; background:url('../images/left_bg.png');background-size: 303% 100%;}
.e-centent>.e-c-right{height :100%;width: calc(100% - 190px);}
/*e-c-left*/
.e-c-left>div:hover{background:var(--btn-background-hover-color);}
.e-c-left>div:active{background:var(--btn-background-hover-color);}
.e-c-left>div:nth-child(1){border-bottom: 1px solid #3a3a3a;margin-bottom: 12px;}
.e-c-l-first{height: 40px;text-align: center;padding-left: 20px;padding-top: 20px;color:white;}
.e-c-l-first{height: 40px;text-align: center;padding-left: 20px;padding-top: 20px;color:white;}
.e-c-l-first>div:nth-child(1)>div:nth-child(1){background-color: #484341; font-size: 9px; opacity: 0.6; text-shadow: 1px 1px #000000; outline: none; box-shadow: 1px 1px 1px #3b4646; text-decoration: dashed; font-style: oblique; padding: 3px 9px 3px 3px; transform: scaleX(-1); color: orange; font-weight: 700; border: 1px solid #4c4c4c; border-radius: 50%;}
.e-c-l-first>div:nth-child(2){background-color: #636363; padding: 1px 4px; font-size: 12px; transform: scale(0.6); width: 38px; border-radius: 7px;margin-top: 4px;}
/*e-c-right*/
.e-c-game-toolbar{padding-left: 20px; color: white; padding-top: 10px; height: 36px;}
.e-c-game-toolbar:hover{padding-left: 20px; color: white; padding-top: 10px; height: 36px;color: var(--hover-color);}
.e-c-game-toolbar>div>img{width: 28px;}
.e-c-game-toolbar>div>div{font-size: 14px;padding: 5px;}
.e-c-game-toolbar>div>div:hover{font-size: 14px;padding: 5px;color: var(--hover-color);}
/*e-c-l-toolbar*/
.e-c-l-toolbar{ position: absolute; width: 190px; height: 28px;bottom: 0px; left: 0px; background: #2b2a2a82;border-top: 1px solid #292828;}
.e-c-l-toolbar:hover{position: absolute;width: 190px;height: 28px;}
.e-c-l-toolbar>div{width: 28px; height: 27px; margin:1px auto; background:url(../images/mainframe_icon.png) -95px -95px;}
4.在vscode 调试终端输入 electron 项目文件目录,查看最终效果
electron E:\项目文件\ElectronToWindow\electron_tgp\
图片资源文件
补充
关闭无边框透明窗体的鼠标事件
在使用无边框和透明窗体时,需要移动窗体,那么会在html或者样式文件中加入-webkit-app-region: drag;那么你所设置的元素及子元素会受鼠标穿透影响,导致这一区域内的鼠标事件鼠标移动效果全部失效,你需要在 在需要鼠标事件的区域元素上加入 -webkit-app-region:no-drag; 取消鼠标穿透带来的影响。这个问题刚开始捣鼓了半天~_~!
目录结构