4

利用空余时间自己学习electron,再加上决定对vue多加深入学习,使用了electron-vue脚手架弄些小东西练习。

技术栈

electron,vue,vuex,vue-route,element-ui。

工具说明

原本目的是做一个备忘录,故起名为never-gorget。
目前实现情况,

  1. 实现了简单的记录功能。
  2. 实现了类似于眼保的功能。
  3. 缩小到托盘的功能,这个应该不算功能吧。。。

还有其他很多方面待完善,

功能简单介绍

备忘录

界面如下,

图片描述

简单的三列布局,最左侧是任务的新增,中间是未完成的任务,最右侧是已经完成的任务。

眼保

其实就是个简单的计时器,当时间到了,弹出新的遮挡框(可以用esc键退出)。

图片描述

计时器是使用web worker计算的,不过,这儿如果使用node的子线程去倒计时的话,又会有什么样的区别呢?

设置

设置的话,只有一个简单的最小化到托盘的功能。用到了electron中的Tray功能:

const Menu = electron.Menu;
const Tray = electron.Tray;
//系统托盘右键菜单
let trayMenuTemplate = [{//系统托盘图标目录
    label: '退出',
    click: function () {
        app.quit();
}];
// 当前目录下的app.ico图标
let iconPath = path.join(__dirname, 'app.png');
appTray = new Tray(iconPath);
//图标的上下文菜单
const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);

待更新

原本以为这些小工具没啥好弄的,也是有或多可玩的,而且弄完美的话,对我来说还是得花点时间。

现有的调整,

  1. 将inndexeddb替代原有的localstorage,因为浏览器对后者有大小的限制。
  2. 前一天未完成的任务可以自动转变为后一天需要完成的任务。
  3. 增加一些报表来显示对应的统计。
  4. 眼保可以修改黑屏时间。
  5. 等等。

新加的功能,

  1. 增加图灵机器人,可以简单的查询一些东西。
  2. app检测升级功能。
  3. 崩溃日志收集等等。
  4. 安装时选路径,进度等功能。
项目地址:https://github.com/2fps/never...
个人博客地址:https://www.zhuyuntao.cn/

欢迎指点,谢谢!


2FPS
173 声望4 粉丝