2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享(上)

时间 2019-11-05

标签 electron+vue+ant electron vue ant design 网易音乐 windows 客户端实战分享栏目自动化构建繁體版

原文原文链接

特色

拖拽播放
桌面歌词
mini模式
自定义托盘右键菜单
任务栏缩略图，歌曲操做
音频可视化
自动/手动检查更新
Nedb数据库持久化
自定义安装路径，安装界面美化
浏览器中启动客户端
Travis CL，AppVeyor自动构建
换肤，下载，本地歌曲匹配，网络变化桌面通知，分享歌曲/歌单/MV/视频等到QQ空间
登陆，私人Fm，歌单，专辑，歌手，排行榜，MV，视频，评论，搜索，用户，动态，粉丝，关注，云盘，收藏...
心动模式，歌词微调，下一首播放，追加播放，单曲循环，随机播放，列表循环
路由导向，局部刷新，首页栏目调整并持久化...
...

下载 && 运行

项目地址html

点击下载应用。vue

macOS用户请下载dmg文件，windows用户请下载exe文件，linux用户请下载AppImage文件。linux

项目当前依赖NeteaseCloudMusicApi，感谢NeteaseCloudMusicApi的做者。git

当前只为windows作了适配。github

基于draggabilly封装一个可拖动的对话框

拖动对话框的身影在项目中仍是挺常见的，如首页中的栏目调整对话框，收藏歌单等。web

然而Ant Design Vue提供的对话框组件并无提供拖拽的功能，但这一功能在项目中又是不可缺乏的，因此只好本身动手丰衣足食。vuex

封装一个drop-modal主要分三步:数据库

让drop-modal拥有拥有a-modal的API
在drop-modal上实现v-model
modal首次显示后实例化Draggabilly

`$attrs，$slots，$listeners`

实现前两步的目的在于让书写drop-modal的语法和a-modal保持基本一致，其中第一步较为简单，新建drop-modal，其模板以下：npm

<template>
  <a-modal
    v-bind="{...$attrs,...$slots}"
    v-on="$listeners"
  >
    <slot></slot>
  </a-modal>
</template>
复制代码

实现v-model

一般咱们在a-modal上经过v-model绑定一个值，经过修改该值来控制对话框的显示隐藏，就像这样json

<a-modal v-model="visible">
  <p>contents</p>
</a-modal>
复制代码

因此咱们也应该在drop-modal上实现v-model。若是了解自定义组件的v-model是:value和@input的语法糖，实现起来也不难。

首先定义一个props value。
为了保持单向数据流，再定义一个计算属性 currentValue，在其get方法中返回value，在set方法中触发自定义事件
最后将currentValue绑定在a-modal上便可。核心代码以下：

<a-modal ... v-model="currentValue">
   ...
</a-modal>

computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
}
复制代码

实例化Draggabilly

最后一步也是最重要的一步，经过watch监听 value ，当值为true时实例一个Draggabilly让modal变成可拖动。这一步须要注意4点：

确保在nextTick中实例化Draggabilly
仅在首次显示时实例化Draggabilly
肯定可拖动的dom
modal的嵌套状况

至此封装的drop-modal知足当前项目的全部需求，固然也有不足。

总结

封装drop-modal所涉及的vue核心知识点——$attrs，$slots，$listeners，自定义组件的v-model的还原，计算属性保持数据单向，$nextTick。最终代码 drop-modal**

Vue中优雅“操做”dom之调整栏目顺序

动态组件

核心思路在于：动态组件，经过操做数组navs的元素位置来控制栏目顺序。

navs中每一个对象的key即componentName，hideMore来控制标题的右侧是否显示更多的连接。

navs: [
    {
      name: '独家放送',
      key: 'privateContent',
      hideMore: true
    },
    {
      name: '最新音乐',
      key: 'newSong'
    },
    {
      name: '推荐歌单',
      key: 'playlist'
    },
    {
      name: '推荐MV',
      key: 'mv'
    },
    {
      name: '主播电台',
      key: 'dj'
    }
  ]
复制代码

<div v-for="nav in navs">
    <component :is="nav.key" />
</div>
复制代码

h5的拖拽api

接下来就是如何操做数组navs的问题了~ 经过h5的拖拽api改变元素位置并将新位置newNavs持久化保存，在页面初始化时使用newNavs渲染栏目组件便可。

此外还结合了 transition-group 组件，让栏目顺序变化有一个过渡效果，而这一过渡效果也很好的诠释了动画的重要意义--“解释刚刚发生了什么”

核心代码以下：

<div
    v-for="nav in navs"
    :key="nav.key"
    draggable="true"
    @dragstart="dragstart(nav)"
    @dragenter="dragenter(nav)"
>
    <span>{{nav.name}}</span>
    <z-icon type="drag"></z-icon>
</div>

data () {
    return {
        oldNav: 0,
          newNav: 0,
    }
}

methods: {
    dragstart (nav) {
      this.oldNav = nav
    },
    dragenter (nav) {
        this.newNav = nav
        if (this.oldNav.name !== this.newNav.name) {
          let oldIndex = this.navs.findIndex(nav => nav.name == this.oldNav.name)
          let newIndex = this.navs.findIndex(nav => nav.name == this.newNav.name)
          let newItems = [...this.navs]
          newItems.splice(oldIndex, 1)
          newItems.splice(newIndex, 0, this.oldNav)
          this.navs = [...newItems]
          window.localStorage.setItem('nav', JSON.stringify(this.navs))
      }
    }
}

复制代码

最终实现的效果以下：

其余

项目中优雅操做dom的地方还不少，原理大同小异，即数据驱动。好比进度条组件 <div class="buffered" ref="buffered" :style = "{width :${bufferedOffsetWidth}px}"></div> 经过操做变量bufferedOffsetWidth来控制缓冲条的width

又好比私人fm的歌曲卡片切换，篇幅有限不作过多介绍，详情请移步fm源码查看

音频可视化

AudioContext

音频可视化生动点长这样,仍是挺炫酷的！！！

项目结合了二者实现了以下效果:射线和动态粒子，区别在于个人射线较细较短较密集(固然这些都是可控的)，以及粒子是向圆内波动

音频的可视化要点在于使用canvas绘制基于AudioContext获取到频谱数据。

首先获取频谱数据

// 获取API
    let context = new AudioContext;
    // 加载audio，能够是dom也能够是一个Audio的实例
    let audio = new Audio("1.mp3");
    // 建立节点
    let source = context.createMediaElementSource(audio);
    let analyser = context.createAnalyser();
    // 链接：source → analyser → destination
    source.connect(analyser);
    analyser.connect(context.destination);
    // 建立数据
    let output = new Uint8Array(460);
    // 获取频域数据
    analyser.getByteFrequencyData(output)
复制代码

打印output，它长这样：

使用canvas绘制

首先绘制静态的外射线，注意观察每条射线

const { width, height } = document.getElementById('canvas')
  const du = 3 // 圆心到两条射线距离所成的角度,即射线的间隙
  const potInt = { x: width / 2, y: height / 2 } // 起始坐标，即画布中心
  const R = 150 // 半径
  const W = 4 // 射线的宽度
  const L = 32 // 射线的长度
复制代码

圆角：cxt.lineCap = 'round'
渐变：cxt.createLinearGradient(x1,y1,x2,y2)
起始点：(Math.sin(((i * du) / 180) * Math.PI) * R + potInt.y,-Math.cos(((i * du) / 180) * Math.PI) * R + potInt.x)
结束点：(Math.sin(((i * du) / 180) * Math.PI) * (R + L) + potInt.y, -Math.cos(((i * du) / 180) * Math.PI) * (R + L) + potInt.x)

其中i为循环360度的索引。肯定了每条射线的起始点和结束点，也就肯定了渐变的起始点和结束点。经过moveTo,lineTo绘制

紧接着将半径R扩大 let Rv = R + value ，先写死1再绘制一层纯色层叠加在渐变层之上。以后在requestAnimationFrame的执行函数中根据频谱数据动态改变value便可实现动画效果，但要注意渐变层的射线应该老是大于纯色层射线L的长度。

canvas动画固然是少不了 cxt.clearRect(0, 0, width, height) 和 requestAnimationFrame 啦！动画及粒子向内的波动实现请参考musicView源码

除此以外还实现了另外一种相似熔浆喷发的效果，也很nice。

渲染进程之间的即时通信

项目一大重点难点是如何将store中歌词，播放状态等数据实时的在各窗体中共享。一开始想经过主进程来作中转，但主进程微笑而不失礼貌地婉拒了：“渲染进程能处理的事就不要拿来骚扰我啦，我很忙的！”。最后把目光投向了localstorage。

// 监听storage改变时触发更新state
window.addEventListener('storage', () => {
    initState()
})

// 订阅mutation改变storage
store.subscribe((mutation, state) => {
    localStorage.setItem(STOREKEY, JSON.stringify(getState(state)))
})
复制代码

其原理在于订阅mutation改变storage，监听storage触发更新state,经过书写一个vuex插件来实现这一功能，详情请查看 keep-state.js

usage：

在store入口文件引入keep-state，keep-state插件是一个函数，传入须要监听模块mudules执行函数，在初始化stroe时将函数的执行结果赋予plugins。

import persistStatePlugin from './plugins/keep-state'
const myPlugin = persistStatePlugin(['User', 'play', 'Localsong', 'Setting', 'Update'])
const store = new Vuex.Store({
  ...
  plugins: [myPlugin]
})
复制代码

electron实战之桌面歌词

实现桌面歌词须要注意如下几点：

透明窗体
窗口在别的窗口上面
可锁定(锁定后忽略窗口内的全部鼠标事件)
出如今屏幕的位置如何肯定

经过设置transparent:true，alwaysOnTop: true可分别实现窗体透明和窗体置顶，其中透明窗体要注意html,body,#app等不能设置非透明的背景色。

经过 setignoremouseeventsignore api可切换锁定窗体。

至于窗体初始时的位置，默认是屏幕中央。我想让他水平居中，垂直在任务栏偏上一点，这就须要获取屏幕的高来作点文章了 const { height } = electron.screen.getPrimaryDisplay().workAreaSize。

最终窗体初始化的核心代码以下：

const options = {
    frame: false,
    x: 0,
    y: height - 150,
    fullscreenable: false,
    minimizable: false,
    maximizable: false,
    transparent: true,
    alwaysOnTop: true,
    skipTaskbar: true, // 任务栏中不显示窗口面板
    closable: false
}

const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080/#desktop-lyric`
  : `file://${__dirname}/index.html#desktop-lyric`

let lyricWindow = new BrowserWindow(options)
lyricWindow.loadURL(winURL)
复制代码

electron实战之mini模式

mini模式主要分为两部分：

主面板
当前播放列表面板

其中主面板又分三个面板：

歌曲缩略图，按住可拖动
歌曲信息及工具栏
相关操做面板

实现要点在于隐藏主窗体，显示mini窗体(320*50)。经过win.setBounds()在切换下拉列表时动态改变窗体大小

electron实战之自定义托盘菜单

经过electron Tray模块的实例的setContextMenu方法建立的菜单是真的丑不忍睹..

如何自定义一个托盘菜单呢？就像这样：

答案之一就是经过一个窗体来模拟。经过监听托盘的右键点击事件切换菜单的显示隐藏便可，其中须要实时计算出每次菜单出现的位置及边界状况。

electron实战之自定义任务栏的缩略图工具栏

任务栏工具栏？长这样，包含标题缩略图，及歌曲的相关操做。

幸运的，electron提供相关API实现这一功能缩略图工具栏

electron实战之拖拽播放

介绍

拖拽播放分三种：

将文件拖到主窗体内实现播放
将文件拖动到桌面上的快捷方式图标打开客户端并播放
客户端已经打开，将文件拖动到桌面上的快捷方式图标实现播放（不会打开第二个实例）

禁用默认行为

在实现以前请先看看默认将文件拖动到客户端会发生什么？是的，默认和将文件拖动到Chrome浏览器是同样的，就像这样...

就猜到会是这样了...!

因此咱们第一步就是要禁用掉这些默认行为：

window.ondragenter = (event) => {
      event.preventDefault()
  }
  window.ondragover = (event) => {
      event.preventDefault()
  }
复制代码

将文件拖到主窗体内实现播放

经过监听window的drop事件来实现咱们的打开文件操做。这只是实现了拖拽播放中的第一种状况。

window.ondrop = openFilesOndrop
复制代码

其余两种状况在windows平台上须要在process.argv上动动手脚。

将文件拖动到桌面上的快捷方式图标打开客户端并播放

先说说第二种状况，在主进程的appready的事件回调中将process.argv赋予全局变量global global.argv = process.argv，在渲染进程中经过electron的remote模块的getGlobal方法获取到argv。process.argv初始化长这样：["E:\electron-vue-cloud-music\网易云音乐.exe"] 即客户端的可执行文件的路径。因此在执行handleWillOpenFiles方法前判断一下数组长度。在handleWillOpenFiles方法过滤出.mp3文件进行相关解析播放等操做。详情移步 createdInit

import { remote } from 'electron'
const startArgv = remote.getGlobal('argv')
  if (startArgv.length > 1) {
      handleWillOpenFiles(startArgv)
  }
复制代码

客户端已经打开，将文件拖动到桌面上的快捷方式图标实现播放

至于第三种状况和第二种大同小异，区别在于argv的参数的获取以及渲染进程如何拿到argv。对于argv的获取，在主进程的app的second-instance监听回调中获取，经过自定义事件分发，渲染进程监听该自定义事件来接受。

// 主进程
app.on('second-instance', (event, argv, workingDirectory) => {
    if (mainWindow) {
        mainWindow.webContents.send('open-files', {argv})
    }
})
// 渲染进程
import { ipcRenderer} from 'electron'
ipcRenderer.on('open-files', async (event, args) => {
    let { argv } = args
    handleWillOpenFiles(argv)
})
复制代码

electron实战之自动/手动检查更新

当前自动更新已移除，简单说说如何实现手动检查更新，具体流程是这样的：

开发，commit
npm version patch && git push origin master && git push origin --tags
Travis CL，AppVeyor监测到master变化自动构建
github上编辑发布远程版本
用户/客户端触发检查更新
客户端调用github API获取最新的远程版本号与本地版本号对比
如若须要更新显示更新窗体引导下载安装

下载完成后关闭窗体并打开下载文件进行安装

electron实战之Nedb数据库持久化

Nedb数据库主要用来存储下载的歌曲列表及歌词。盗用官网介绍就是：

Embedded persistent or in memory database for Node.js, nw.js, Electron and browsers, 100% JavaScript, no binary dependency. API is a subset of MongoDB's and it's plenty fast.

本人4级水平简短白话翻译是为Electron而生，无依赖，快，使用和mongoDb差很少

electron实战之打包自定义安装路径，安装界面美化

自定义安装路径较为简单在package.json中找到build字段加入如下代码便可

"nsis": {
  "oneClick": false, // 是否一键安装
  "allowToChangeInstallationDirectory": true // 是否容许修改安装路径
}
复制代码

自定义安装界面可经过一些开源工具来快捷实现如 NSIS-UI 简单实现了一下，效果还能够：

electron实战之自定义协议实现浏览器中启动客户端

经过app.setAsDefaultProtocolClient可实现自定义协议在浏览器中唤起客户端，若是安装过了可尝试打开electron云音乐

electron实战之离线/在线侦测与桌面通知

经过window的online和offline可监听网络状态。

经过navigator.onLine可判断当前网络状态.

经过h5的Notification可实现桌面通知，在window平台中使用请确保设置appId

Travis CL，AppVeyor自动构建

分享一篇阮一峰的一篇文章便可持续集成

结语

当前项目只对window平台进行测试。

至此electron云音乐实战分享基本结束，项目中有趣的地方还有不少，但篇幅有限，不能面面俱到。第一次写文章，感谢各位看客老爷看到这里，谢谢。

最后唠叨一句：“以为不错给我一个赞~”