react + electron 构建应用

最近折腾上了react和electron,一切只是刚开始,记录下一点过程。

最普遍的需求就是,隐藏原本略丑的工具栏。

const BrowserWindow = require('electron').BrowserWindow
var win = new BrowserWindow({ width: 800, height: 600, frame: false })

效果是实现了,但是你拖不动应用了,所以需要在应用的顶部div加上 -webkit-app-region: drag 同时在有按钮的元素上取消拖拽 -webkit-app-region: no-drag
但是这样做还是有问题,普通的程序顶部是可以缩放的,而这样操作的话就不可以了。刚开始想到title div的包裹层使用padding-top撑开,但是碰到布局有背景色的就略尴尬。。后来想到使用一个div position定位 height设置为5px,本质上就是代替padding出来的那段白色区域,height设置为5px是因为我在windows上对比了其他应用程序,这样的热区容易让鼠标识别到,太宽或太窄的就本上很难一次性就被识别进行伸缩。