微信小程序之网易云音乐（三）- 主页面底部导航、轮播图、歌单及歌曲模块开发
前言一. 主页面底部导航二. 轮播图区域三. 歌单区域四. 歌曲区域微信小程序之网易云音乐导航
前言
创建一个新模块，目录结构如下：
一. 主页面底部导航
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@: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.serverUrluni.request({url: serverUrl + '/banner',method: 'GET',success: (res) => {if (res.data.code === 200) {this.swiperList = res.data.bannersconsole.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.serverUrluni.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.resultconsole.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.resultconsole.log(this.recommendMusic)}}})},methods: {}}</script>// ...
页面效果如下：
如果觉得《微信小程序之网易云音乐（三）- 主页面底部导航 轮播图 歌单及歌曲模块开发》对你有帮助，请点赞、收藏，并留下你的观点哦！
