Electron 仿制WeGame（二）

其他 2018-10-24 15:52:39 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 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&nbsp;&nbsp;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\

图片资源文件

Electron仿制weGame第二节图片资源

补充

关闭无边框透明窗体的鼠标事件

         在使用无边框和透明窗体时，需要移动窗体，那么会在html或者样式文件中加入-webkit-app-region: drag;那么你所设置的元素及子元素会受鼠标穿透影响，导致这一区域内的鼠标事件鼠标移动效果全部失效，你需要在 在需要鼠标事件的区域元素上加入 -webkit-app-region:no-drag; 取消鼠标穿透带来的影响。这个问题刚开始捣鼓了半天~_~!

目录结构

       

==============回主目录===============

猜你喜欢

转载自blog.csdn.net/qq_28254093/article/details/83068086
今日推荐
技术解析 GPT-4o：即时语音交互的突破与 GenAI 发展策略
开源大模型与闭源大模型
微信小程序授权登录获取用户的openid
亿级流量系统架构设计与实战
人工智能时代的程序设计教学与课程设计
纽交所技术问题致伯克希尔 (BRK.A) 显示跌近 100%
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
周排行
事务隔离级及脏读、幻读和不可重复读
rtos：zephyr同步信号量
把对象转换为JSON格式的数据
iOS Dev (56) iTunes Store 销售日报更新时间
Failed to start mongod.service: Unit not found;mongodb in unbuntu
Upgrading PHP on CentOS 6.5 (Final)
（四）王道机试指南___排版问题
TensorFlow之手写体识别
xcode xib报错 Safe Area Layout Guide Before IOS 9.0
【LeetCode】76. Minimum Window Substring（C++）
每日归档
更多
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)
2024-05-28(2)
2024-05-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022