微信小程序-仿QQ音乐
2019-01-24 21:33 阅读(342)

说明

编辑器效果展示

图片描述

真机截图

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

目前实现的功能

  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. 全局播放器组件

项目目录

图片描述

  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 博客