小程序项目实战—仿照网易云音乐制作音乐微信小程序

目录

  • 一、功能
  • 二、使用的第三方工具
  • 三、代码实现
  • 四、效果图


一、功能

  • 音乐播放、切换、收藏
  • 每日推荐音乐
  • 播放视频,视频分类
  • 搜索功能、搜索历史
  • 登录(使用网易云音乐的登录接口,需要真实的账号密码)
  • 最近播放记录
  • 收藏音乐

二、使用的第三方工具

  • 使用的API
    • 网易云音乐API
    • 我搞到了自己的阿里云服务器上,可通过 http://8.131.68.141:9300/xxx 访问,如http://8.131.68.141:9300/banner
    • 如果小程序要上线,需要使用https的服务
  • pubsub-js
    • 用于不同页面之间的通信
    • 先订阅再发布
    • 在音乐播放器页面(songDetail),判断是点击上一首还是下一首时,需要将操作类型传递到每日推荐页面(recommendDetail),因为在这个页面才有全部的数据。找出上/下一首的音乐id后再回传到songDetail
  • momentjs
    • 用于日期时间的格式化
    • 在音乐播放器页面将音频总的播放时间(单位:ms)转成“mm:ss”(分钟:秒)的形式
  • iconfont

三、代码实现

https://github.com/ChangYanwei/hiMusic

小程序没有上线,需要本地运行,具体操作流程请点击上方链接查看。

四、效果图

小程序项目实战—仿照网易云音乐制作音乐微信小程序_第1张图片
小程序项目实战—仿照网易云音乐制作音乐微信小程序_第2张图片
小程序项目实战—仿照网易云音乐制作音乐微信小程序_第3张图片
小程序项目实战—仿照网易云音乐制作音乐微信小程序_第4张图片
小程序项目实战—仿照网易云音乐制作音乐微信小程序_第5张图片
小程序项目实战—仿照网易云音乐制作音乐微信小程序_第6张图片
小程序项目实战—仿照网易云音乐制作音乐微信小程序_第7张图片
小程序项目实战—仿照网易云音乐制作音乐微信小程序_第8张图片
小程序项目实战—仿照网易云音乐制作音乐微信小程序_第9张图片

你可能感兴趣的:(前端,微信小程序,音乐,API,前端)