electron仿QQ音乐学习笔记：搭建框架+去掉边框+可拖拽区
一、搭建框架
文档：electron.md
1、安装node.js，npm设置淘宝镜像
2、安装Electron
npm init -y
npm i —save-dev electron
如果npm太慢或无法安装，可以尝试用cnpm安装
npm install -g cnpm —registry=https://registry.npm.taobao.org
cnpm i —save-dev electron
3、创建主脚本，main.js
4、创建网页index.html
5、修改package.json文件 “scripts”: { “start”: “electron .” }
6、运行应用程序 npm start
二、去掉边框：
BrowserWindow，使用Frameless Window 的API
http://www.electronjs.org/docs/api/frameless-window
/main.js
const win = new BrowserWindow({ width: 800, height: 600, frame: false })
三、可拖拽区
http://www.electronjs.org/docs/api/frameless-window
默认情况下, 无边框窗口是不可拖拽的。
应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的（如操作系统的标准标题栏），
在可拖拽区域内部使用 -webkit-app-region: no-drag 则可以将其中部分区域排除。 请注意, 当前只支持矩形形状。
.main .top-menu { position: relative;-webkit-app-region: drag;}
设置不可拖拽区
如果您使整个窗口都可拖拽，则必须将其中的按钮标记为不可拖拽，否则用户将无法点击它们：
style=”-webkit-app-region: no-drag”
四、效果展示
