微信小程序之网易云音乐(五)- 排行详情页、歌单详情页、播放器组件开发
微信小程序之网易云音乐(五)- 排行详情页、歌单详情页、播放器组件开发
- 一. 排行详情页模块
- 二. 歌单详情页模块
- 三. 播放器组件
微信小程序之网易云音乐导航
一. 排行详情页模块
rank.vue
页面修改(增加参数):
<template><view class="rank"><view class="rank-content"><navigator class="rank-list" v-for="(item,index) in rankList" :key="index":url="'/pages/rank-detail/rank-detail?item=' + encodeURIComponent(JSON.stringify(item))"><view class="icon"><image :src="item.coverImgUrl"></image></view><view class="song-list"><span class="song" v-for="(song,index) in item.rank" :key="index"><span class="index">{{index+1}}</span><span class="name">{{song.name}} - {{song.ar[0].name}}</span></span></view></navigator></view></view>
</template>
新建rank-detail
页面:
rank-detail.vue
文件:
<template><view><view class="bg-image" :style="bgStyle"></view><view class="song-list"><ul><view class="item" v-for="(item,index) in songs.tracks" :key="index"><view class="list"><h2 class="name">{{item.name}}</h2><p class="desc">{{item.ar[0].name}}</p></view></view></ul></view></view>
</template><script>export default {data() {return {songs:[],}},computed: {bgStyle() {return `background-image:url(${this.songs.coverImgUrl})`}},onLoad(option) {const item = JSON.parse(decodeURIComponent(option.item))this.songs = item},}
</script><style>
@import url("rank-detail.css");
</style>
rank-detail.css
文件:
.bg-image {height: 0;padding-top: 70%;transform-origin: top;background-size: cover;width: 100%;z-index: 100;position: fixed;
}.song-list {position: absolute;top: 530rpx;overflow: hidden;width: 90%;margin-left: 30rpx;
}.item {display: flex;align-items: center;box-sizing: border-box;height: 128rpx;font-size: 14px;border-bottom: 1px solid #CCCCCC;
}
.name{color: #2E3030;
}
.desc{color: #757575;margin-top: 8rpx;
}
效果如下:
二. 歌单详情页模块
创建recommend-detail
页面:
index.vue
页面修改:
<!-- 推荐歌单区域 -->
<view class="text">推荐歌单</view>
<view><navigator class="item" v-for="item in recommendList" :key="item.id":url="'/pages/recommend-detail/recommend-detail?item=' + encodeURIComponent(JSON.stringify(item))"><view class="icon"><image :src="item.picUrl"></image></view><view class="desc">{{item.name}}</view></navigator>
</view>
recommend-detail.vue
文件:
<template><view><view class="bg-image" :style="bgStyle"></view><view class="song-list"><ul><view class="item" v-for="(item,index) in songs" :key="index"><view class="list"><h2 class="name">{{item.name}}</h2><p class="desc">{{item.ar[0].name}}</p></view></view></ul></view></view>
</template><script>export default {data() {return {songs: [],list:[],}},computed: {bgStyle() {return `background-image:url(${this.list.picUrl})`}},onLoad(option) {const item = JSON.parse(decodeURIComponent(option.item))this.list=itemvar serverUrl = this.serverUrluni.request({url: serverUrl + `/playlist/detail?id=${item.id}`,method: 'GET',success: (res) => {if (res.data.code === 200) {this.songs = res.data.playlist.tracks}}})},}
</script><style>
@import url("recommend-detail.css");
</style>
recommend-detail.css
文件:(和rank-detail.css
文件内容一致)
页面效果如下:
三. 播放器组件
新建页面player
:
修改singer-detail.vue
文件:(增加路由跳转和传值)
<template><view><image class="bg-image" :style="bgStyle"></image><view class="song-list"><ul><navigator class="item " v-for="(song,index) in hotSongs" :key="index":url="'/pages/player/player?song=' + encodeURIComponent(JSON.stringify(song))"><view class="list"><h2 class="name">{{song.name}}</h2><p class="desc">{{song.ar[0].name}}</p></view></navigator></ul></view></view>
</template>
player.vue
文件:
<template><view><view class="player"><view class="background"><view class="filter"></view><image :src="list.al.picUrl"></image></view><view class="middle"><view class="middle-box"><view class="cd-box"><view class="cd"><image :src="list.al.picUrl"></image></view></view></view></view></view><audio :src="url" controls="" :poster="list.al.picUrl" :name="list.name" :author="list.ar[0].name"></audio></view>
</template><script>export default {data() {return {url: '',list: []}},onLoad(option) {const song = JSON.parse(decodeURIComponent(option.song))this.list = songvar serverUrl = this.serverUrluni.request({url: serverUrl + `/song/url?id=${song.id}`,method: 'GET',success: (res) => {if (res.data.code === 200) {this.url = res.data.data[0].url}}})},}
</script><style >.player {position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 150;background: black;}.background {position: absolute;left: -50%;top: -50%;width: 100%;height: 100%;z-index: -1;opacity: 0.6;filter: blur(60rpx);}.filter {position: absolute;width: 100%;height: 100%;background: #333333;opacity: 0.6;}.middle {display: flex;align-items: center;position: fixed;width: 100%;top: 160rpx;bottom: 240rpx;}.middle-box {display: inline-block;vertical-align: top;position: relative;width: 100%;height: 0;padding-top: 80%;}.cd-box {position: absolute;left: 10%;top: 0;width: 80%;height: 100%;}.cd {width: 100%;height: 100%;box-sizing: border-box;border-radius: 50%;}image {border-radius: 50%;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}audio {position: absolute;bottom: 0;z-index: 151;width: 100%;}
</style>
App.vue
文件,添加样式:
.uni-audio-default {width: 750rpx !important;border: none;display: block;background: rgba(200, 200, 200, .3);
}
.uni-audio-name {font-weight: bold;color: white;font-size: 15px;
}.uni-audio-author {font-size: 13px;color: white;
}.uni-audio-time {color: white;
}
页面效果如下:
微信小程序之网易云音乐(五)- 排行详情页、歌单详情页、播放器组件开发相关推荐
- 微信小程序之网易云音乐导航
微信小程序之网易云音乐导航 微信小程序之网易云音乐(一)- uni-app的基本使用 微信小程序之网易云音乐(二)- uni-app标签的使用 微信小程序之网易云音乐(三)- 主页面底部导航.轮播图. ...
- 微信小程序仿网易云音乐(使用云开发,提供源码)
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
- 微信小程序之网易云音乐(三)- 主页面底部导航、轮播图、歌单及歌曲模块开发
微信小程序之网易云音乐(三)- 主页面底部导航.轮播图.歌单及歌曲模块开发 前言 一. 主页面底部导航 二. 轮播图区域 三. 歌单区域 四. 歌曲区域 微信小程序之网易云音乐导航 前言 创建一个新模 ...
- 微信小程序之网易云音乐(一)- uni-app的基本使用
微信小程序之网易云音乐(一)- uni-app的基本使用 前言 一. uni-app 1.1 利用HBuilder来进行开发: 二. 案例 2.1 案例1:MVC以及数据双向绑定 2.2 案例2:响应 ...
- 微信小程序调用网易云音乐接口
微信小程序调用网易云音乐接口 前段时间QQ音乐的调用接口不能用了,给大家整理了一个网易云音乐的调用接口. 1.API接口: API接口地址 2.访问连接地址: http://neteasecloudm ...
- 微信小程序之网易云音乐(四)- 排行、歌手及歌手详情页模块开发
微信小程序之网易云音乐(四)- 排行.歌手及歌手详情页模块开发 一. 排行模块开发 二. 歌手模块开发 三. 歌手详情页开发 微信小程序之网易云音乐导航 一. 排行模块开发 rank.vue文件: & ...
- 微信小程序之网易云音乐小案例
目录 一.编写对网易云音乐api发起请求的代码 二.编写视频项(组件) 三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现]) 四.编写视频详情页 成品图: 准备工作: --在page ...
- 微信小程序【网易云音乐实战】(第二篇 轮廓图、阿里巴巴的矢量图标、滚动条、前后端交互、列表渲染)
下面通过webStrom来写代码,通过微信开发者工具来调试! 本篇最终效果图: 这里写目录标题 一.轮播图 二. 五个小图标 1. 将阿里巴巴矢量图标转换为本地的 2. 项目使用图标 三.滚动条 sc ...
- 微信小程序【网易云音乐实战】(第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据)
一.转发分享功能 onShareAppMessage(Object object) Button <button open-type="share" class=" ...
最新文章
- 单链表-删除重复节点(递增链表)
- Java实现清屏功能
- ./dmitry -p ip或者域名 -f -b
- 日志分析系统分类有哪些_Java开发日志规范
- php扩展包安装了为啥没加载,已安装PHP扩展但未加载
- 用Python编写日麻牌理查询器
- 组策略设置计算机计划任务,使用组策略配置域中任务计划
- Simulink代码生成应用教程
- loadrunner中没有Mobile App协议,怎么录制App脚本
- dell电脑装双系统linux,戴尔电脑怎么装双系统?戴尔装win7+win10双系统详细教程
- google已经启用www.guge.com(谷歌)域名
- Latex学习之插入编号-实心圆点列表,横杆,数字
- 惠普打印机 HP web 服务打不开
- 文献阅读——金属伪影减少MAR问题
- TX2 外接硬盘,并随启动自动挂载
- 焦作师范高等专科学校计算机,热烈欢迎丨焦作师范高等专科学院计算机与信息工程学院莅临智游...
- 电源管理芯片LDO(Low Dropout Regulator)分析1
- 计算机桌面可装在其它盘吗,教大家如何把桌面保存到C盘以外的其他盘里,让电脑飞速转起来...
- JVM调优系列(五)——JVM调优利器
- 用java计算电阻,NTC热敏电阻计算公式