electron仿QQ音乐学习笔记：搭建框架+去掉边框+可拖拽区

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”

四、效果展示

electron

一、搭建框架

二、去掉边框：

三、可拖拽区

四、效果展示

更多相关文章

随机推荐