共计 1870 个字符，预计需要花费 5 分钟才能阅读完成。
歌曲来源：QQ 音乐
说明
因为个人开发者无法发布在线音乐播放小程序，所以开发该小程序目的只为学习小程序开发；
小程序涉及到到所有歌曲资源都来源于 QQ 音乐，部分 API 由本人对 QQ 音乐接口进行了二次封装（我会另外再写一篇文章专门用来分享 API，敬请期待）
编辑器效果展示
因为要压缩为 GIF 格式，所以加快了播放速度并且画质有点差
真机截图
推荐页面
歌手列表
各大排行榜
搜索页面
歌手详情页
歌单（排行榜）详情页
播放器页面
分享页面
目前实现的功能
歌单
电台
歌曲播放
MV 播放（最近发现 QQ 音乐的接口不返回 MV 数据了，所以这个功能暂时无法展示）
歌手列表
排行榜
歌曲歌手搜索（支持模糊查询）
最近搜索记录
热门搜索词条
歌手详情页
歌单详情页
歌曲分享
查看评论
歌词滚动
最近播放歌曲
接下来准备实现的功能
用户登录
私人 FM
增加点赞，评论功能
歌曲播放方式（随机，单曲，循环）
收藏
全局播放器组件
项目目录
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 () { …}
})
欢迎 StarGitHub 博客
