微信小程序之网易云音乐（三）- 主页面底部导航、轮播图、歌单及歌曲模块开发
微信小程序之网易云音乐（三）- 主页面底部导航、轮播图、歌单及歌曲模块开发
- 前言
- 一. 主页面底部导航
- 二. 轮播图区域
- 三. 歌单区域
- 四. 歌曲区域
微信小程序之网易云音乐导航
前言
创建一个新模块，目录结构如下：
一. 主页面底部导航
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 [email protected]: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>
// ...
页面效果如下：