FLAV0R，仿Decent Icons的Electron项目

前言

前一段时间玩桌面，发现了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