在上一篇文章中写出了第一个 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);
到这里插件的基本功能和样式已经实现了.
来源: http://www.jianshu.com/p/1bf8b245f092