最近参加了一个微信小程序开发大赛，其中用到了音乐播放功能。于是在小程序官方文档和插件库中逛了一圈，但是官方没有提供对QQ音乐的搜索和获取播放链接等支持，插件库中的插件寥寥无几，并不好用。无奈之下只好自己写一个关于QQ音乐的插件，来完成相应的搜索，获取播放链接等功能。
在开始介绍插件功能之前，特别感谢简书tisa提供了QQ音乐相应的api。这个插件就是基于这些api进行的封装。
这一篇文章本来是用markdown编写的，但是无法设置为公开文章，因此没有代码块，代码部分显得比较难看。
下面正式开始介绍插件使用方法：
1. 前往下载页面，下载最新的v0.1版本，将下载的文件解压放在小程序utils文件夹中，解压后的文件目录结构如下图所示：
QQMusicPlugin文件夹在utils目录之下
2. 前往微信公众平台->开发->开发设置->服务器域名。添加以下request合法域名，该域名用于音乐的搜索等
https://c.y.qq.com
添加request合法域名步骤
3. 在小程序页面js文件中引用qqMusicTools.js，注意相对路径，这里演示的页面路径为"/pages/index/"
const musicTool = require("../../utils/QQMusicPlugin/qqMusicTools.js")
在需要用到接口的页面js文件中引用插件
4. 搜索音乐接口searchMusic。（使用PromiseJS语法）
接口参数说明：
page：搜索页码
number：每页搜索记录数量
keyword：搜索关键字
musicTool.searchMusic(1, 10, "墙纸").then(function(searchRes) {
console.log(searchRes)
})
搜索接果如下图：
搜索音乐返回结果
5. 获取播放音乐链接接口playMusic接受1个参数：filename。表示要播放的音乐的文件名，文件名来自searchMusic结果中的"songmid"。（使用PeomiseJS语法）
接口参数说明：
filename：要播放的音乐的文件名，文件名来自searchMusic结果中的"songmid"
musicTool.playMusic("0021rBlZ1gQiLy").then(function(playRes) {
console.log(playRes)
})
返回结果如下图：
返回了音乐的播放链接
6. 获取音乐专辑图片接口getAlbumImage。（使用Promise语法）（在v0.1版本中，搜索音乐接口已经集成了该接口，专辑图片字段名为"albumImg"）
参数说明：
albumId：该参数来自searchMusic结果中的"albumId"。
musicTool.getAlbumImage(6271293).then(function(res) {
console.log(res)
})
返回结果如下图：
返回了专辑图片链接
7. 播放音乐，这里使用BackgroundAudioManager演示
const bgAudioManager = wx.getBackgroundAudioManager()
bgAudioManager.title = 'Music'
bgAudioManager.src = playRes
8. 代码整合到一块，整个使用流程如下。（需要注意异步问题）：
const bgAudioManager = wx.getBackgroundAudioManager();
musicTool.searchMusic(1, 10, "绿色").then(function(searchRes) {
console.log(searchRes)
})
musicTool.playMusic("0021rBlZ1gQiLy").then(function(playRes) {
console.log(playRes)
bgAudioManager.title = 'Music'
bgAudioManager.src = playRes
})
musicTool.getAlbumImage(6271293).then(function(res) {
console.log(res)
})
9. 特别说明:
1. 当要播放的音乐属于收费音乐时无法播放
2. 请求过程中需要注意js中的异步问题
3. 微信小程序的BackgroundAudioManager存在部分链接无法播放的问题，详细原因参见JabinGP的简书
网友评论