前言概述
本文介绍使用Electron来实现桌面日历示例,该桌面日历可切换年份和月份的数据,可显示假期的数据等不同功能;
开发环境:node12.14.1+electron10.1.5
示例效果:
实现过程
一、新建项目
参考前面文章《Electron桌面应用程序从创建项目、启动项目到打包程序的详细过程》;
二、实现日历内容
可自己实现日历功能或者网上搜索示例,然后嵌套进Electron里面;如果需要本例效果,可到链接“https://pan.baidu.com/s/1HFfTyo8YvlhqOxgDXk_VEQ”下载(提取码“m4it”);
三、实现Electron功能
main.js修改:
1. 设置外框:
- Menu.setApplicationMenu(null)隐藏菜单栏;
- frame: false设置无边框;
- mainWindow.setAlwaysOnTop(true, 'screen-saver', 2)边框置顶;
2. 窗口定位:
-
x: width,y: 50:width等于屏幕宽度减去窗口的宽度,所以最终效果定位于屏幕的右上角;
3. 设置透明效果:
-
transparent: true,devTools: false:一般设置这两个即可,但如果嵌套的网页有背景色,也需要去掉才能有效果;
index.html修改:
由于隐藏了菜单和无边框,导致没办法直接关闭,所以在页面上增加右键菜单,并包括“关闭窗口”功能,代码如下:
总结
该实例到此就已经介绍完毕,大家可在此基础上增加更多优化的功能。