在上一篇文章中写出了第一个heX桌面软件，并且让它显示出了Hello World。
这个插件是之前我用C#写的。现在开始来使用heX编写一个桌面插件，上面显示着当前时间和日期，后续再调用第三方接口实现获取天气等功能。
时钟插件
首先在目录下创建新的文件夹，命名为clock_widget作为工程目录，然后分别创建html、css、js文件夹，后面用来存放对应的html、css、js文件。这样做可以使目录清晰，项目工程量大的时候维护会更方便。这个插件的代码量比较小，不过为了养成良好习惯还是创建好目录结构。
clock_widget
目录结构
在对应文件夹下创建好html、css、js文件，我的命名分别为index.html、style.css、main.js；然后完成html文件的基本结构和资源引入。
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock Widget</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<script src="../js/main.js"></script>
</body>
</html>
这个时候还需要修改一下manifest.json文件中的first_page，将首页修改为clock_widget下html文件夹中的index.html。
"first_page": "$(AppDir)clock_widget/html/index.html",
现在开始编写时钟。在html文件中添加一个div，id为container；在container中添加一个h2，id设为time。
<div id="container">
<h2 id="time"></h2>
</div>
main.js中，首先获取time元素，然后设定一个定时器，间隔为1000ms，获取当前时间对象并且将时和分赋值给time元素。（实际写代码过程中发现ES6语法是不被heX支持的。）
var timeLabel = document.getElementById('time');
var inter = setInterval(function(){
var now = new Date();
timeLabel.innerText = now.getHours() + ':' + now.getMinutes();
},1000);
此时运行hexclient.exe，可以看到时间已经成功赋值给time元素。
时间正确赋值给time标签
到这里就算是实现时钟显示的基本功能了，不过离我们预想的插件效果还相差甚远。首先我们分析一下，完成的插件不会有白色的背景，这个背景对插件来说比较不美观；插件不会显示右上角的最小化、关闭等按钮，也不会在桌面任务栏上显示正在运行的任务。
任务图标
打开官网指南中manifest文件的说明，其中有对form对象的详细说明。
form
首先是style属性，将它设置为desktop_widget后，我们编写的界面就作为桌面widget窗口，会固定在桌面上，也不会显示在任务栏中。
style: desktop_widget
此时任务栏已经没有hexclient运行的图标了，而这个窗口也是不能被拖动的。
然后是透明的问题，transmission_color属性是穿透颜色，简单点说就是transmission_color设置为a颜色（rgb值或者#颜色代码），窗口上这个颜色的地方就会变成透明，并且鼠标响应时间不会发生（大概可以等于不存在）。窗口背景是白色，我们设置transmission_color为rgb(255,255,255)或者#FFF，注意此时plain属性应该设置为true;窗口背景就会变成透明的。
"plain": true,
"transmission_color": "#FFF",
窗口透明
这里分小于10的时候只显示个位，在分钟前拼接一个'0'然后对其取后面两位。main.js修改如下：
var timeLabel = document.getElementById('time');
timeLabel.ondblclick = function(){
hex.close();
}
var inter = setInterval(function(){
var now = new Date();
var hour = ('0' + now.getHours()).slice(-2);
var min = ('0' + now.getMinutes()).slice(-2);
timeLabel.innerText = hour + ':' + min;
},1000);
格式化时间
修改字体样式、大小、颜色（注意不要是跟transimission_color一样的颜色值），我这里修改为rgb(255,255,254)。
*{
margin: 0;
padding: 0;
color: rgb(255,255,254);
font-family: Bahnschrift;
font-weight: 100;
}
#time{
font-size: 100px;
}
修改后的效果
字体有毛边这个是应该是穿透颜色透明的影响，这个在用C#写的时候也有这个问题，暂时没看到什么好的解决方案。
接下来就是完成日期、星期的功能，这里不详细写了，直接贴出代码。
完成后的效果
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock Widget</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="container">
<h2 id="time"></h2>
<h2 id="date"></h2>
<h2 id="week"></h2>
</div>
<script src="../js/main.js"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
color: rgb(255,255,254);
font-family: Bahnschrift;
font-weight: 100;
}
#time{
font-size: 100px;
}
#date{
font-size: 60px;
}
#week{
font-size: 60px;
}
main.js
var monthList = ['Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'];
var weekList = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var timeLabel = document.getElementById('time');
var dateLabel = document.getElementById('date');
var weekLabel = document.getElementById('week');
timeLabel.ondblclick = function(){
hex.close();
}
var inter = setInterval(function(){
var now = new Date();
var hour = ('0' + now.getHours()).slice(-2);
var min = ('0' + now.getMinutes()).slice(-2);
var month = now.getMonth();
var date = ('0' + now.getDate()).slice(-2);
timeLabel.innerText = hour + ':' + min;
dateLabel.innerText = monthList[month] + ' ' + date;
weekLabel.innerText = weekList[now.getDay()];
},1000);
到这里插件的基本功能和样式已经实现了。
网友评论