- 歌曲来源：QQ音乐
说明
- 目前只有体验版，如果有兴趣的同学可以私聊我，我帮您加入，名额有限。
- 因为个人开发者无法发布在线音乐播放小程序，所以开发该小程序目的只为学习小程序开发；
- 小程序涉及到到所有歌曲资源都来源于QQ音乐，部分API由本人对QQ音乐接口进行了二次封装（我会另外再写一篇文章专门用来分享API，敬请期待）
编辑器效果展示
- 因为要压缩为GIF格式，所以加快了播放速度并且画质有点差
真机截图
- 推荐页面
- 各大排行榜
- 搜索页面
- 歌手详情页
- 歌单（排行榜）详情页
- 播放器页面
- 分享页面
目前实现的功能
- 歌单
- 电台
- 歌曲播放
- MV播放（最近发现QQ音乐的接口不返回MV数据了，所以这个功能暂时无法展示）
- 歌手列表
- 排行榜
- 歌曲歌手搜索（支持模糊查询）
- 最近搜索记录
- 热门搜索词条
- 歌手详情页
- 歌单详情页
- 歌曲分享
- 查看评论
- 歌词滚动
- 最近播放歌曲
接下来准备实现的功能
- 用户登录
- 私人FM
- 增加点赞，评论功能
- 歌曲播放方式（随机，单曲，循环）
- 收藏
- 全局播放器组件
项目目录
![图片描述][14]
- comment--自定义组件（播放器组件，开发中）
- img--存放图片
- gedan--歌单页
- index--首页
- logs--歌手列表页
- playSong--播放器页
- rank--排行榜页
- search--搜索页
- share--分享页
- singer--歌手详情页
- top--歌单详情页
- app.js--应用程序逻辑
- app.json--应用程序配置
- app.wxss--应用程序公共样式
app.json 应用程序配置文件
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/rank/rank",
"pages/search/search",
"pages/gedan/gedan",
"pages/playSong/playSong",
"pages/singer/singer",
"pages/top/top",
"pages/share/share"
],//页面路径列表
"requiredBackgroundModes": [
"audio"
],//需要在后台使用的能力，这里我们使用到了【音乐播放】
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "HMusic",
"navigationBarTextStyle": "black"
},//全局到默认窗口表现
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "推荐"
},
{
"pagePath": "pages/logs/logs",
"text": "歌手"
},
{
"pagePath": "pages/rank/rank",
"text": "排行榜"
},
{
"pagePath": "pages/playSong/playSong",
"text": "播放器"
}
],
"position": "top"
}//tab栏到表现，默认是放在底部，根据position，我们将其设置为顶部显示
}
复制代码每个页面都有各自到配置页面，可以对各自页面进行单独对配置 [pageName].json用于指定页面工作时，window的设置：
{
// 导航条背景色
"navigationBarBackgroundColor": "#fff",
// 导航条前景色（只能是white/black）
"navigationBarTextStyle": "black",
// 导航条文本
"navigationBarTitleText": "HMusic",
// 窗口背景颜色
"backgroundColor": "#fff",
// 窗口前景色
"backgroundTextStyle": "dark",
// 是否开启下拉刷新
"enablePullDownRefresh": false
}
复制代码app.js应用程序逻辑
// App函数是一个全局函数，用于创建应用程序对象
App({
// ========== 全局数据对象（可以整个应用程序共享） ==========
globalData: { ... },
// ========== 应用程序全局方法 ==========
method1 (p1, p2) { ... },
method2 (p1, p2) { ... },
// ========== 生命周期方法 ==========
// 应用程序启动时触发一次
onLaunch () { ... },
// 当应用程序进入前台显示状态时触发
onShow () { ... },
// 当应用程序进入后台状态时触发
onHide () { ... }
})
复制代码