第二节：使用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="data:images/lol_client_logo.png" class="float"/><div class="float">英雄联盟</div></div></div><div class="e-c-game-toolbar"><div><img src="data: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').ipcRendererinit();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; 取消鼠标穿透带来的影响。这个问题刚开始捣鼓了半天~_~!

目录结构

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

Electron 仿制WeGame（二）相关推荐

  1. Electron 仿制WeGame游戏盒子

    目录 1. Electron 仿制WeGame(一) 启动程序,确认环境配置是否正常 具体安装参考 Electron安装 2. Electron 仿制WeGame(二) wegGame大致样子设计 3 ...

  2. Electron教程（二）启动过程：主进程，渲染进程是什么

    Electron教程(二)启动过程:主进程,渲染进程是什么 Electron教程(一)什么是 Electron,由来.适用场景 和 Electron 的环境搭建 Electron教程(二)启动过程:主 ...

  3. 大概是全网最详细的Electron ipc 讲解(二)——渲染进程与渲染进程的搭桥牵线

    希沃ENOW大前端 公司官网:CVTE(广州视源股份)[1] 团队:CVTE旗下未来教育希沃软件平台中心enow团队 「本文作者:」 image.png 前言 你盼世界,我盼望你无 bug .Hell ...

  4. electron创建菜单

    2019独角兽企业重金招聘Python工程师标准>>> 在桌面应用开发通常有二种菜单,一种是位于顶部的菜单栏和上下文菜单(通过右击呼出菜单).现在我们学习这二种菜单的使用. 在ele ...

  5. Electron 入门，主进程向渲染进程发送事件，渲染进程向主进程发送事件

    Electron 入门,主进程向渲染进程发送事件,渲染进程向主进程发送事件 相关教程: Electron教程(二)启动过程:主进程,渲染进程是什么 刚入门 electon ,整 electon + v ...

  6. Electron教程（七）结语

    Electron教程(七)结语 Electron教程(一)什么是 Electron,由来.适用场景 和 Electron 的环境搭建 Electron教程(二)启动过程:主进程,渲染进程是什么 Ele ...

  7. Vue+Electron学习系列 (三) -- 自动更新

    Vue+Electron学习系列 ​​​​​​​1️⃣Vue+Electron学习系列 (一) -- 初识​​​​​​​ 2️⃣ Vue+Electron学习系列 (二) -- 打包发布 3️⃣ Vu ...

  8. （1/7）Electron教程（一）什么是 Electron，由来、适用场景 和 Electron 的环境搭建（1/7）

    (1/7)Electron教程(一)什么是 Electron,由来.适用场景 和 Electron 的环境搭建 Electron教程(一)什么是 Electron,由来.适用场景 和 Electron ...

  9. Electron教程（三）如何打包 electron 程序：electron-forge 的使用教程

    Electron教程(三)如何打包 electron 程序:electron-forge 的使用教程 Electron教程(一)什么是 Electron,由来.适用场景 和 Electron 的环境搭 ...

  10. Electron教程（五）读取本地文件内容， icpMain icpRenderer 之间的交互

    Electron教程(五)读取本地文件内容, ipcMain ipcRenderer 之间的交互 Electron教程(一)什么是 Electron,由来.适用场景 和 Electron 的环境搭建 ...

最新文章

  1. 为什么2100万个BTC发行总量少了0.0231？
  2. 实体-关系图的基本组成
  3. 雷林鹏分享：PHP 简介
  4. 关于Taptic Engine震动反馈
  5. linux 内核调试前准备(简单记录，以后补充)
  6. 面试题: mysql数据库 已看1 简单的sql练习
  7. 结对第2次作业——WordCount进阶需求
  8. UVA - 10615 Rooks
  9. Python 求最大子集的递归实现
  10. python 关于排序的问题
  11. VTK：几何对象之Vertex
  12. ubuntu下的jdk进行升级_如何在ubuntu上更新jdk版本
  13. java平移变换_java移位运算符：（左移）、（带符号右移）和（无符号右移）。...
  14. 字典、集合与字符串——Python基础语法
  15. Redis 彻底禁用RDB持久化
  16. DevOps: 一例高负载多并发服务器连接池满的异常排解过程
  17. 购入计算机主机怎么入账,出纳记账软件更换主机电脑时如何备份附件资料？
  18. 生鲜APP软件功能开发
  19. 你知道ISO27000信息安全管理标准族有多少？
  20. 非均匀采样重建 matlab,对非均匀采样信号进行重采样

热门文章

  1. 已解决：ORA-00932:数据类型不一致:应为-,但却获得CLOB
  2. RouterOS PPTP和L2TP的配置
  3. matlab 脉冲频域压缩,大作业-雷达线性调频脉冲压缩的原理及其MATLAB仿真.doc
  4. php中清除文本框,php如何清除文本框
  5. 2018 蓝桥杯 C++ A组 1-7
  6. CSDN（Markdown编辑）怎样打出各种表情符号和文章目录【图文】
  7. 计算机无法备份,iTunes无法备份是怎么回事？iTunes无法备份怎么解决？
  8. SSL2812 2017年10月30日提高组T2 凤凰院凶真（dp，LCIS）
  9. 博弈论(五)——#10247. 「一本通 6.7 练习 4」S-Nim
  10. 数据时代的大数据思维特征，主要有哪些？