微信小程序之网易云音乐导航

一. 排行模块开发

rank.vue文件：

<template>
	<view class="rank">
		<view class="rank-content">
			<view class="rank-list" v-for="(item,index) in rankList" :key="index">
				<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>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rankList: [],
			}
		},
		onLoad() {
			var serverUrl = this.serverUrl
			// 获取歌单列表，下面的Id都是从这里面获取的
			// uni.request({
			// 	url: serverUrl + '/toplist,
			// 	method: 'GET',
			// 	success: (res) => {
			// 		if (res.data.code === 200) {
			// 			res.data.list
			// 		}
			// 	}
			// })
			var NUMBER = [19723756, 3779629, 2884035, 3778678, 71384707, 10520166]
			for (let i = 0; i < NUMBER.length; i++) {
				uni.request({
					url: serverUrl + '/top/list?id=' + NUMBER[i],
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							let list = res.data.playlist
							this.rankList.push(list)
							list.rank = res.data.playlist.tracks.slice(0, 3)
						}
					}
				})
			}
		},
		methods: {

		}
	}
</script>

<style>
	@import url("rank.css");
</style>

rank.css文件：

.rank-list{
	display: flex;
	margin: 0 20rpx;
	padding: 6rpx;
	border-bottom: 1px solid #e4e4e4;
}
.icon{
	flex:0 0 200rpx;
	height: 200rpx;
	width: 200rpx;
}
image{
	width: 100%;
	height: 100%;
}
.song-list{
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 20rpx;
	height: 200rpx;
	font-size: 11px;
	overflow: hidden;
}
.song{
	padding: 20rpx 0;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.index{
	padding: 0 10rpx;
}

效果如下：

二. 歌手模块开发

singer.vue文件：

<template>
	<view class="singer">
		<ul>
			<view class="list-item" v-for="item in singerList" :key="item.id">
				<image :src="item.img1v1Url" class="avatar"></image>
				<span class="name">{{item.name}}</span>
			</view>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				singerList:[],
			}
		},
		onLoad(){
			var serverUrl = this.serverUrl
			uni.request({
				url: serverUrl + '/top/artists?limit=70',
				method: 'GET',
				success: (res) => {
					if (res.data.code === 200) {
						this.singerList = res.data.artists
					}
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style>
@import url("singer.css");
</style>

singer.css文件：

.list-item {
	display: flex;
	align-items: center;
	margin: 0 10rpx;
	padding: 10rpx 0;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.avatar{
	width: 100rpx;
	height: 100rpx;
	border-radius: 3px;
}
.name{
	margin-left: 40rpx;
	font-size: 14px;
}

App.vue文件添加样式：

td{
	margin: 0;
	padding: 0;
}
body{
	background: #ff;
	color: #555;
	font-size: 14px;
	font-family: Verdana,Arial, Helvetica, sans-serif;
}

效果如下：

三. 歌手详情页开发

rank.vue页面修改：

<template>
	<view class="singer">
		<ul>
			<navigator class="list-item" v-for="item in singerList" :key="item.id"
			:url="'/pages/singer-detail/singer-detail?item=' + encodeURIComponent(JSON.stringify(item))">
				<image :src="item.img1v1Url" class="avatar"></image>
				<span class="name">{{item.name}}</span>
			</navigator>
		</ul>
	</view>
</template>

新建singer-detail页面：

singer-detail.vue文件：

<template>
	<view>
		<image class="bg-image" :style="bgStyle"></image>
		<view class="song-list">
			<ul>
				<view class="item " v-for="(song,index) in hotSongs" :key="index">
					<view class="list">
						<h2 class="name">{{song.name}}</h2>
						<p class="desc">{{song.ar[0].name}}</p>
					</view>
				</view>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotSongs: [],
				list: [],
			}
		},
		computed: {
			bgStyle() {
				return `background-image:url(${this.list.picUrl})`
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item))
			this.list = item
			var serverUrl = this.serverUrl
			uni.request({
				url: serverUrl + `/artists?id=${item.id}`,
				method: 'GET',
				success: (res) => {
					if (res.data.code === 200) {
						this.hotSongs = res.data.hotSongs
					}
				}
			})
		},
		methods: {

		}
	}
</script>

<style>
@import url("singer-detail.css");
</style>

singer-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 #ccc;
}
.name{
	color: #2E3030;
}
.desc{
	margin-top: 8rpx;
	color: #757575;
}

页面效果如下：