微信小程序之网易云音乐（三）- 主页面底部导航、轮播图、歌单及歌曲模块开发

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

前言

创建一个新模块，目录结构如下：

一. 主页面底部导航

1.创建两个新页面singer、rank：

2.下载对应图标：uk2g并放到static目录下。
3.编辑对应的底部导航：pages.json文件：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "粽的网抑云音乐"
			}
		}, {
			"path": "pages/singer/singer",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}

		}, {
			"path": "pages/rank/rank",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}

		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "粽的网抑云音乐",
		"navigationBarBackgroundColor": "#d44439",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#bfbfbf",
		"selectedColor": "#d44439",
		"borderStyle": "black",
		"backgroundColor": "#fff",
		"list":[
			{
				"pagePath":"pages/index/index",// 页面路径
				"text":"首页",// tab上按钮文字
				"iconPath":"static/home.png",// 图片路径
				"selectedIconPath":"static/home_sel.png"// 选中时的图片路径
			},
			{
				"pagePath":"pages/rank/rank",
				"text":"排行",
				"iconPath":"static/rank.png",
				"selectedIconPath":"static/rank_sel.png"
			},
			{
				"pagePath":"pages/singer/singer",
				"text":"歌手",
				"iconPath":"static/user.png",
				"selectedIconPath":"static/user_sel.png"
			}
		]
	}
}

此时的效果图如下：

二. 轮播图区域

1.下载后台服务器项目：

git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git

2.编译：

npm install

3.运行：

node app.js

成功后是这样的：

4.创建common目录，并创建config.js文件：

内容如下：

const serverUrl = 'http:localhost:3000';
export default {
	serverUrl
}

5.index.vue文件：

<template>
	<view class="page">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" circular="true">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image class="swiper-image " :src="item.imageUrl" mode=""></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
			}
		},
		onLoad() {
			var serverUrl = this.serverUrl
			uni.request({
				url: serverUrl + '/banner',
				method: 'GET',
				success: (res) => {
					if (res.data.code === 200) {
						this.swiperList = res.data.banners
						console.log(this.swiperList)
					}
				}
			})
		},
		methods: {

		}
	}
</script>

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

6.index.css文件（同目录）：

.swiper{
	width: 100%;
	height: 280rpx;
}
.swiper-image{
	width: 100%;
	height: 100%;
}

7.main.js文件，添加一行代码：

Vue.prototype.serverUrl = 'http://localhost:3000'

成功后页面效果如下：

三. 歌单区域

index.vue文件修改为：

<template>
	<view class="page">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper"
			circular="true">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image class="swiper-image " :src="item.imageUrl" mode=""></image>
			</swiper-item>
		</swiper>
		<scroll-view scroll-y="true" class="recommend-content">
			<view class="text">推荐歌单</view>
			<view>
				<view class="item" v-for="item in recommendList" :key="item.id">
					<view class="icon">
						<image :src="item.picUrl"></image>
					</view>
					<view class="desc">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				recommendList:[],
			}
		},
		onLoad() {
			var serverUrl = this.serverUrl
			uni.request({
				url: serverUrl + '/banner',
				method: 'GET',
				success: (res) => {
					if (res.data.code === 200) {
						this.swiperList = res.data.banners
					}
				}
			})
			uni.request({
				url: serverUrl + '/personalized',
				method: 'GET',
				success: (res) => {
					if (res.data.code === 200) {
						this.recommendList = res.data.result
						console.log(this.recommendList)
					}
				}
			})
		},
		methods: {

		}
	}
</script>

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

index.css文件修改为：

.swiper {
	width: 100%;
	height: 280rpx;
}

.swiper-image {
	width: 100%;
	height: 100%;
}

.recommend-content {
	display: flex;
	padding: 0 10rpx;
	box-sizing: border-box;
}

.text {
	font-size: 16px;
	margin: 40rpx 0;
}

.item {
	flex: 1;
	width: 33%;
	height: 300rpx;
	display: inline-block;
	padding: 0 1%;
	box-sizing: border-box;
	overflow: hidden;
}
.icon{
	width: 100%;
	height: 220rpx;
	margin-bottom: 10rpx;
}
image{
	width: 100%;
	height: 100%;
	border-radius: 3px;
}
.desc{
	font-size: 10px;
}

页面效果：

四. 歌曲区域

index.vue文件添加代码：

<template>
	<view class="page">
		// ...代码省略
		<scroll-view scroll-y="true" class="recommend-content">
			<!-- 推荐歌单区域 -->
			<view class="text">推荐歌单</view>
			<view>
				<view class="item" v-for="item in recommendList" :key="item.id">
					<view class="icon">
						<image :src="item.picUrl"></image>
					</view>
					<view class="desc">{{item.name}}</view>
				</view>
			</view>
			<!-- 推荐歌曲区域 -->
			<view class="text">推荐歌曲</view>
			<view>
				<view class="item" v-for="item in recommendMusic" :key="item.id">
					<view class="icon">
						<image :src="item.song.album.picUrl"></image>
					</view>
					<view class="desc">{{item.name}}</view>
					<view class="desc">{{item.song.artists[0].name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				recommendList:[],
				recommendMusic:[],
			}
		},
		onLoad() {
			var serverUrl = this.serverUrl
			// ...代码省略
			uni.request({
				url: serverUrl + '/personalized/newsong',
				method: 'GET',
				success: (res) => {
					if (res.data.code === 200) {
						this.recommendMusic = res.data.result
						console.log(this.recommendMusic)
					}
				}
			})
		},
		methods: {

		}
	}
</script>
// ...

页面效果如下：