前言

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

一. 主页面底部导航

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.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>
// ...

页面效果如下：

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

微信小程序之网易云音乐（五）- 排行详情页、歌单详情页、播放器组件开发
微信小程序之网易云音乐(五)- 排行详情页.歌单详情页.播放器组件开发一. 排行详情页模块二. 歌单详情页模块三. 播放器组件微信小程序之网易云音乐导航一. 排行详情页模块 rank.vue ...
微信小程序仿网易云音乐（使用云开发，提供源码）
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
微信小程序之网易云音乐（一）- uni-app的基本使用
微信小程序之网易云音乐(一)- uni-app的基本使用前言一. uni-app 1.1 利用HBuilder来进行开发: 二. 案例 2.1 案例1:MVC以及数据双向绑定 2.2 案例2:响应 ...
微信小程序之网易云音乐导航
微信小程序之网易云音乐导航微信小程序之网易云音乐(一)- uni-app的基本使用微信小程序之网易云音乐(二)- uni-app标签的使用微信小程序之网易云音乐(三)- 主页面底部导航.轮播图. ...
微信小程序之网易云音乐（四）- 排行、歌手及歌手详情页模块开发
微信小程序之网易云音乐(四)- 排行.歌手及歌手详情页模块开发一. 排行模块开发二. 歌手模块开发三. 歌手详情页开发微信小程序之网易云音乐导航一. 排行模块开发 rank.vue文件: & ...
微信小程序调用网易云音乐接口
微信小程序调用网易云音乐接口前段时间QQ音乐的调用接口不能用了,给大家整理了一个网易云音乐的调用接口. 1.API接口: API接口地址 2.访问连接地址: http://neteasecloudm ...
微信小程序之网易云音乐小案例
目录一.编写对网易云音乐api发起请求的代码二.编写视频项(组件) 三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现]) 四.编写视频详情页成品图: 准备工作: --在page ...
微信小程序【网易云音乐实战】（第二篇轮廓图、阿里巴巴的矢量图标、滚动条、前后端交互、列表渲染）
下面通过webStrom来写代码,通过微信开发者工具来调试! 本篇最终效果图: 这里写目录标题一.轮播图二. 五个小图标 1. 将阿里巴巴矢量图标转换为本地的 2. 项目使用图标三.滚动条 sc ...
微信小程序【网易云音乐实战】（第五篇转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）
一.转发分享功能 onShareAppMessage(Object object) Button <button open-type="share" class=" ...

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