微信小程序-仿QQ音乐

• 歌曲来源：QQ音乐

说明

• 目前只有体验版，若是有兴趣的同窗能够私聊我，我帮您加入，名额有限。
• 由于我的开发者没法发布在线音乐播放小程序，因此开发该小程序目的只为学习小程序开发；
• 小程序涉及到到全部歌曲资源都来源于QQ音乐，部分API由本人对QQ音乐接口进行了二次封装（我会另外再写一篇文章专门用来分享API，敬请期待）

编辑器效果展现

• 由于要压缩为GIF格式，因此加快了播放速度而且画质有点差

真机截图

操做视频

• 推荐页面

• 歌手列表

• 各大排行榜

• 搜索页面

• 歌手详情页

• 歌单（排行榜）详情页

• 播放器页面

• 分享页面

目前实现的功能

1. 歌单
2. 电台
3. 歌曲播放
4. MV播放（最近发现QQ音乐的接口不返回MV数据了，因此这个功能暂时没法展现）
5. 歌手列表
6. 排行榜
7. 歌曲歌手搜索（支持模糊查询）
8. 最近搜索记录
9. 热门搜索词条
10. 歌手详情页
11. 歌单详情页
12. 歌曲分享
13. 查看评论
14. 歌词滚动
15. 最近播放歌曲

接下来准备实现的功能

1. 用户登陆
2. 私人FM
3. 增长点赞，评论功能
4. 歌曲播放方式（随机，单曲，循环）
5. 收藏
6. 全局播放器组件

项目目录

![图片描述][14]

1. comment--自定义组件（播放器组件，开发中）
2. img--存放图片
3. gedan--歌单页
4. index--首页
5. logs--歌手列表页
6. playSong--播放器页
7. rank--排行榜页
8. search--搜索页
9. share--分享页
10. singer--歌手详情页
11. top--歌单详情页
12. app.js--应用程序逻辑
13. app.json--应用程序配置
14. 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 博客