微信小程序之硅谷云音乐

简介: 微信小程序之硅谷云音乐

主页效果展示:

轮播图+每日推荐+进行推荐+排行榜
点击每日推荐可到达该页面

0e8efa7692ca46a1ba9131c3decead8e.png


登录界面以及个人中心界面展示

  • 使用网易云的账号可进行登录.只有时登录状态才可进行进行视频页的观看以及每日推荐功能.
  • 个人中心页面显示个人信息以及播放的历史记录

60fc4731d0024ab4875d090c41113844.png

a61a2a0560ce4d92a5432695fcd7e453.png

视频页面展示

  • 上方导航栏显示视频的分类信息
  • 每类视频可进行下拉刷新+触底加载更多…
  • 当该视频播放时点开另外一个视频,之前视频停止.每一时刻只允许播放一个视频. 但回到之前播放的视频,会续着之前的进度继续播放.

bb3012f87e504145a40cd87d93bb9f41.png

搜索页面展示

  • 搜索框中无内容时,显示历史记录以及热搜榜.有内容时按照关键字进行搜索.
  • 可对历史记录进行清空操作

f1458cb47b3743e4a4a1626a51d32801.png

5b54431c18b746388136dc45ce2102e5.png


每日推荐页面

点击首页的每日推荐,进入该页面.上面显示日期,下面显示歌曲的信息.

73d63b7ffcce4439a6f9bcd08cc14dad.png

歌曲播放页面

点击每日推荐页面里面的歌曲,可进入歌曲详情页面


显示歌曲的信息以及播放状态.通过点击进度条可以进行歌曲进度的前进和后退;

播放模式:顺序播放,随机播放,循环播放.

歌曲的前进和后退按钮,可实现上一首和下一首歌曲的切换.

歌曲播放完毕后可自动根据播放模式进行下一首的播放.


79836d66c6a74503b1b6ec8245bf71eb.png



相关文章
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的音乐播放器附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的音乐播放器附带文章和源代码设计说明文档ppt
51 3
|
6月前
|
JavaScript Java 测试技术
原创音乐小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
原创音乐小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
37 1
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的音乐播放器小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的音乐播放器小程序附带文章源码部署视频讲解等
28 1
|
5月前
|
小程序 前端开发 JavaScript
微信小程序|音乐播放器小程序设计与实现
微信小程序|音乐播放器小程序设计与实现
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的在线音乐网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的在线音乐网站附带文章和源代码部署视频讲解等
39 7
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的音乐管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的音乐管理系统附带文章和源代码部署视频讲解等
43 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的音乐播放器小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的音乐播放器小程序附带文章源码部署视频讲解等
30 0
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的音乐播放器的设计和实现附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的音乐播放器的设计和实现附带文章和源代码部署视频讲解等
34 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的音乐播放器的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的音乐播放器的详细设计和实现
48 0
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的在线云音乐系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的在线云音乐系统附带文章和源代码部署视频讲解等
35 0
下一篇
无影云桌面