FLAV0R,仿Decent Icons的Electron项目

FLAV0R,仿Decent Icons的Electron项目_第1张图片

前言

前一段时间玩桌面,发现了decent icons这个软件,结果是STEAM上面的收费软件,看了一眼同花顺的账户,默默关掉了STEAM。。。
但是怎么调整桌面,都发现就是缺一个这样的启动器,于是萌生了自己仿一个想法。

分析了一下,决定用electron写,毕竟HTML/CSS写的很顺手,然后也学习一下electron。

截图


( CYBERPUNK 壁纸 + Flav0r + BitDock启动栏)

为了更直观,我录了一个演示视频

https://player.bilibili.com/player.html?aid=83630807

flav0r演示视频

概述

实现这个效果并不复杂,就是一个HTML展示页面加上JS的条目管理控制。
管理部分大概有:鼠标拖入、拖动的监听,用于接收拖入的图片、程序,调整图片的显示位置、大小。鼠标按键的监听,用于实现项目的删除、启动项目。这些都是碎活儿,没啥技术难度。
至于ELECTRON,没啥学习难度,基本功能都能从文档上找到,找不到的就多想想办法,我这个例子中需要实现程序嵌入桌面,从而用户按Win + D时不会隐藏,这个功能ELECTRON就没有,我加入了第三方的程序来控制。
下面写几个费了点功夫的功能。

花时间的几个地方

拖入项目的鼠标移入监听

将程序拖动进入项目主体时,会产生dragenter事件,我的设想是,拖动要添加的程序扔到项目主体时,在主体显示一个添加示意框,表示要新增一个启动条目了,如果想取消此次拖入,原路返回,拖拽出主体时会产生一个dragleave事件,这时删除掉添加示意框。但是,dragenter和mouseenter这个事件表现不太一样。mouseenter mouseleave如果绑定在主体上时,移入移出时才产生,dragenter在遇到主体内的其他DIV时,会立刻产生dragleave事件,然后移出DIV时产生新的dragenter。
这样一来,表现出来的效果就是如果拖拽时遇到其他已经存在的条目,就会产生一堆添加示意框,这样就乱套了。
经过摸索,需要给dragenter事件加上一个判断条件lastenter = e.target;,lastenter是个全局变量,用来记录初次拖拽进入主体时的元素。
dragenter先于dragleave事件发生,并且dragenter的元素,是新进入的元素,dragleave的元素是离开的元素,这两个元素是不同的。
dragleave加上一个判断离开时的元素必须和dragenter进入时的元素一致才执行删除添加示意框
当时给我绕糊涂了,当然不用这么麻烦,在dragleave写死离开时的元素必须是项目主体就可以。

设置自启动

因为需要用到第三方程序来实现嵌入桌面,最初的构想是写一个electron的启动器,这样启动项就该是启动器,涉及到自定义exe名。各种尝试后auto-lanchu很好用。
折腾了半天最后还是用原生的启动设置,打包好的electron根目录路径为process.cwd()

下载

WIN7暂时不支持,背景透明那里用胶水语言写不好,查了一下用QT或者C++可以,但还不会。

源码: github.com/html50/flav0r

WIN 32
百度云: https://pan.baidu.com/s/1EbtJhiMnya4jvbtss1SS0A 提取码: 2byt
蓝奏: https://www.lanzous.com/i8q0oyh 提取码:2byt

你可能感兴趣的:(ELECTRON,前端自习室,JS/CSS/HTML)