微信小程序-仿QQ音乐

Faremax 发布于2019-07-01 11:15 / 674人阅读

摘要：歌曲来源音乐说明目前只有体验版，如果有兴趣的同学可以私聊我，我帮您加入，名额有限。

歌曲来源：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 博客

云服务器 GPU云服务器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/30028.html

微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
指尖一点歌声来--微信小程序之仿网易云音乐心得

摘要：为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。查文档发现，小程序中图片加载完成后，有一个加载完成事件。前者在微信客户端版本就不开始维护了，后者低版本需做兼容处理。目前还有一些功能暂未实现，会在以后继续完善项目，继续学习。为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。期间踩过了大把的坑，bug出现的难受和解决bug欢喜，一直是伴随我阶段性学习这个项目的心情。初步完成...

KitorinZero 2019-08-22 11:18 评论0 收藏0
在微信小程序使用音乐api的方法，以及微信小程序播放背景音乐失败的解决方案汇总

摘要：下一步准备使用网易云代替音乐。已经开发新的网易云代替音乐了，需要的可以看看这篇文章为微信小程序开发的网易云音乐库项目要做一个可以为日记添加音乐的小程序，所以要用到音乐api，参考了一些文章后我们封装了一个qq音乐api库（完成了动态token获取，音乐搜索，音乐专辑图片，音乐名称，歌手名称，播放），有需要的可以到Github自提。小程序qq音乐api库Gihub地址https://...

Sleepy 2019-08-23 17:16 评论0 收藏0
微信小程序实战（一）之仿美丽说

摘要：被美丽说少女粉吸引，就想着自己也写一个来练练手，正好最近在学习微信小程序。微信小程序的组件真的很强大，以前写图片切换功能都好麻烦，小圆点的切换都要自己写。被美丽说少女粉吸引，就想着自己也写一个来练练手，正好最近在学习微信小程序。接下来让我们分享一下我的学习历程吧！选题其实纠结了好久该仿什么，看到别人都写的差不多了，自己却还没有动手，很着急，那两天一直在思考在查找，弄得自己特别烦躁...

wangdai 2019-08-02 16:00 评论0 收藏0