三、写一个桌面时钟插件

在上一篇文章中写出了第一个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文件 Clock Widget

这个时候还需要修改一下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。

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

Clock Widget

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);

到这里插件的基本功能和样式已经实现了。