Electron踩坑记之透明桌面小程序

介绍

Electron 是基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用

Electron 兼容 Mac, Windows 和 Linux， 它构建的应用可在这三个操作系统上面运行

入坑准备

安装 Node.js

安装 Electron

安装 Git

开始入坑

第一步：

执行 git clone https://github.com/electron/electron-quick-start 获取一个可以快速开始的源码程序

执行 cd electron-quick-start  到项目文件夹

执行 npm install 安装相关依赖（可能需要很长时间，也可以切换到淘宝镜像）执行成功后的界面示意图

再 npm install 执行成功后，执行 npm start 成功后的界面如下

第二步：

查看 main.js 代码 createWindow() 方法里面的代码如图所示：

第三步：

对 createWindow() 方法进行修改；这里就不详细阐述createWindow()方法里面的代码了。我们详细看需要修改的地方，如图所示。

transparent 值为 true 时 ，窗体为透明，反之则不透明

frame 值为false 时，窗体没有边框，反之则有边框

第四步：

有一个非常重要的设置就是鼠标穿透窗体，换而言之就是取消窗体的鼠标事件（慎用哦~）只有这样才能达到真正的桌面程序透明的效果。代码如图所示：

mainWindow.setIgnoreMouseEvents(true) 作用就是让窗体的鼠标事件不起作用来达到鼠标穿透窗体的小果果。