# electron-vue 尝试做个网易云音乐
当跑起来electron第一刻 我发现这个浏览器头是不是有点丑
是不是可以隐藏起来呢,答案当然是可以的
src/main/index.js
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
webPreferences: {webSecurity: false}, // 可实现跨域
frame: false // 去掉浏览器头
})
关闭后我发现不能关闭了,然后就解决一下
src/main/index.js
// 退出
ipcMain.on('window-all-closed', () => {
app.quit()
})
// 小化
ipcMain.on('hide-window', () => {
mainWindow.minimize()
})
// 最大化
ipcMain.on('show-window', () => {
mainWindow.maximize()
})
// 还原
ipcMain.on('orignal-window', () => {
mainWindow.unmaximize()
})
自己定义了一些控制按钮的样式
<div class="tools">
<span class="tool-icon min"><i class="iconfont icon-zuixiaohua"></i></span>
<span class="tool-icon max"><i class="iconfont icon-zuidahua"></i></span>
<span class="tool-icon close"><i class="iconfont icon-guanbi"></i></span>
</div>
然后操作这些按钮,绑定对应事件
import $ from 'jquery'
var ipcRenderer = require('electron').ipcRenderer
var isBig = true // 窗口放大还原标示
// 关闭窗口
$(document).on('click', '.close', function () {
console.log(1)
ipcRenderer.send('window-all-closed')
})
// 最大化
$(document).on('click', '.max', function () {
if (isBig) {
ipcRenderer.send('show-window')
} else {
ipcRenderer.send('orignal-window')
}
isBig = !isBig
})
// 最小化
$(document).on('click', '.min', function () {
ipcRenderer.send('hide-window')
})
最后我希望点击头部可以拖拽(只需要给头部加上对应的样式)
-webkit-user-select: none;
-webkit-app-region: drag;
头部不想拖拽的部分
-webkit-app-region: no-drag;
关闭后托盘没有小图标 等一系列的问题
const url = path.join(__dirname, '../../static/img/on.ico')
// 系统托盘图标
let tray = new Tray(url)
// 鼠标放到系统托盘图标上时的tips;
tray.setToolTip('圣诞音乐')
// 图标的上下文菜单
const contextMenu = Menu.buildFromTemplate(trayMenuTemplate)
// 设置此图标的上下文菜单
tray.setContextMenu(contextMenu)
// 双击图片显示窗口
tray.on('double-click', () => {
mainWindow.show()
mainWindow.focus()
})
初步尝试的效果如下 (马上圣诞节了...)
有兴趣的朋友欢迎star和fork继续完善 https://github.com/artiely/electron-music
相关资料
electronjs文档
electron-vue文档
网易云api
# electron-vue 尝试做个网易云音乐的更多相关文章
- 用VUEJS做一个网易云音乐
前言:自己学习VUEJS也一段时间,但一直没有做出来一东西.我自己一直喜欢用网易云音乐app,于是乎就做了这个app. 项目截图 技术栈 vue全家桶 (vue vue-router vuex) ax ...
- iOS 开发仿网易云音乐歌词海报
使用网易云音乐也是一个巧合,我之前一直使用QQ音乐听歌,前几天下 app 手机内存告急.于是就把QQ音乐给卸载掉了,正好晚上朋友圈里有一个朋友用网易云音乐分享了一首歌曲,于是我也就尝试下载了网易云音乐 ...
- 用vuejs仿网易云音乐(实现听歌以及搜索功能)
前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用 ...
- 【java+selenium】网易云音乐刷累计听歌数
背景应该是在去年的时候,刷知乎看到一个问题,大概是说怎么刷网易云音乐个人累计听歌数,然后有一个高赞回答,贴了一段js代码,直接在浏览器console执行就可以了.当时试了下,直接一下子刷了有好几万.悲 ...
- python爬取网易云音乐歌曲评论信息
网易云音乐是广大网友喜闻乐见的音乐平台,区别于别的音乐平台的最大特点,除了“它比我还懂我的音乐喜好”.“小清新的界面设计”就是它独有的评论区了——————各种故事汇,各种金句频出.我们可以透过歌曲的评 ...
- 由 UWP 版网易云音乐闪退引发的博文
今天,不知怎么的.网易云音乐出现了一打开就闪退的情况.百度了好些时候未果,就直接 Windows + i 打开 Windows 设置 > 应用 在应用和功能列表中找到网易云音乐,在展开的 高级选 ...
- 网易云音乐 歌词制作软件 BesLyric (最新版本下载)
导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 哈哈,喜欢网易云音乐,又愁于制作歌词的童鞋有福啦!Beslyric 为你排忧解难! 本文 ...
- python爬虫+词云图,爬取网易云音乐评论
又到了清明时节,用python爬取了网易云音乐<清明雨上>的评论,统计词频和绘制词云图,记录过程中遇到一些问题 爬取网易云音乐的评论 一开始是按照常规思路,分析网页ajax的传参情况.看到 ...
- Java爬取网易云音乐民谣并导入Excel分析
前言 考虑到这里有很多人没有接触过Java网络爬虫,所以我会从很基础的Jsoup分析HttpClient获取的网页讲起.了解这些东西可以直接看后面的"正式进入案例",跳过前面这些基 ...
随机推荐
- Let's Encrypt,站点加密之旅
HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTTP下加入 ...
- 新概念英语(1-141)Sally's first train ride
Lesson 141 Sally's first train ride 萨莉第一交乘火车旅行 Listen to the tape then answer this question. Why was ...
- 解决编写的 html 乱码问题
- kafka HA
1. replication 如图.1所示,同一个 partition 可能会有多个 replica(对应 server.properties 配置中的 default.replication.fac ...
- intelj idea 创建聚合项目(典型web项目,包括子项目util、dao、service)
需求:第三方提供了http api接口,我们需要将其数据全部取回来,存放到本地Mysql数据库. 开发工具是intelj idea,准备基于maven创建聚合项目,util作为工具包,单独作为一个工程 ...
- 织云Lite发布:详解包管理核心能力
本文由 织云平台团队 发布于 腾讯云云+社区 织云Lite发布 腾讯织云自动化运维体系经过10年技术积淀,维护近万个业务模块,超过20万节点.鉴于业界朋友的呼声,我们将织云的核心功能独立抽象出来,凝结 ...
- 毕业回馈--89C51keil工程的创建
声明:毕业回馈类博客均为大学毕业前夕同同学共享内容.为了给大学做一个总结,报答母校的栽培,才发起这样一个活动. ******************************************** ...
- jQuery中的事件监听小记
一,一个事件监听的简便写法 最近发现一个jQuery中事件监听的简洁写法,感觉方便好多.同时也深感自己基础薄弱,好多东西竟然都模棱两可.因此,记录的同时,也对jQuery事件监听做个小的总结 原文链接 ...
- [SDOI 2015]约数个数和
Description 设d(x)为x的约数个数,给定N.M,求 $\sum^N_{i=1}\sum^M_{j=1}d(ij)$ Input 输入文件包含多组测试数据. 第一行,一个整数T,表示测试 ...
- [POJ 3487]The Stable Marriage Problem
Description The stable marriage problem consists of matching members of two different sets according ...