uni-app框架之网易云音乐

前排提示，该学习教程省略了开发软件的安装，和网易云音乐接口的配置与启动。本教程直接从新建项目开始

新建项目

1.点击文件–>新建–>项目

image-20240726175041309

2.设置详情

image-20240726175206650

3.项目结构

image-20240726175329602

填写微信小程序ID

(建议)建议大家前往小程序网站，注册并填写小程序ID，以防止有些功能无法实现

小程序网站：https://mp.weixin.qq.com/

在网站页面左侧菜单栏点击开发管理，复制你的小程序ID

image-20240726180051560

回到开发工具中，按照如下勾选即可

image-20240726180135754

字体和图标

字体建议使用uniapp默认即可，图标建议使用uniapp官方提供的图标库插件，下载地址：
https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html#uni-icons-%E5%9B%BE%E6%A0%87

开始

头部导航栏编写

头部组件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
	<view>
		{{title}}
	</view>
</template>

<script>
	export default {
		props:['title'],
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

index主文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
<view>
	<MusicHeadVue title='网易云音乐'></MusicHeadVue>
</view>
	

</template>

<script>
import MusicHeadVue from "../../componets/MusicHead/MusicHead.vue"
export default {
	//注册组件
	components:{
		MusicHeadVue
	},
	data(){
		return{
			title:'网易云音乐'
		}
	}
}
</script>

<style>
	
</style>

在头部组件中css样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.musicHead{
	width: 100%; 
	height: 75px;
	font-size: 16px;
	text-align: center;
	line-height: 80px;
	color: black;
	position: relative;
}
.musicHeadIcon{
	position: absolute; left: 8px; top: 33px; width: 90px; height: 31px; 
	display: flex;
	justify-content: space-evenly;
	line-height: 31px;
	border-radius: 15px;
	background-color: rgb(0, 0, 0,0.3);
}

开发者工具中查看效果

image-20240726200831249

紧接着，控制返回图标的有无，因为我们在首页面时是不需要显示返回上一页和返回主页的，所以需要添加方法来控制

在头部组件中写入以下代码：

1
2
3
4
5
6
7
8
9
10
<view>
	<div class="musicHead">
		<div class="musicHeadIcon" v-if="icon">	
		<uni-icons type="back" size="30" @click="handleToBack()"></uni-icons>
		 |
		<uni-icons type="home" size="30" @click="handleToHome()"></uni-icons>
		</div>
		{{ title }}
	</div>
</view>

在methods中添加方法

1
2
3
4
5
6
7
8
9
10
11
methods: {
			handleToBack(){
				uni.navigateBack()
			},
			handleToHome(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
			
		}

这里使用了uni-app中的页面和路由API

下面只给出地址，有需要可以去对应查找

页面和路由

官网网址：https://uniapp.dcloud.net.cn/api/router.html#navigateto

搜索框的编写

这里还用到了创建滚动条的语法，官网地址：https://uniapp.dcloud.net.cn/component/scroll-view.html
来看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
	<view>
		<MusicHeadVue title='网易云音乐' :icon="false"></MusicHeadVue>
		<view class="container">
			<scroll-view scroll-y="true">
				<view class="index-search">
					<span>
						<uni-icons type='search'></uni-icons>
						<input type="text" placeholder="搜索歌曲" />
					</span>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<scroll-view scroll-y="true">开启垂直方向的滚动条，里面包的内容就是可滚动内容。

样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.index-search span{
	display: flex;
	margin: 70rpx,30px,30rpx,30rpx;
	background-color: rgb(0, 0, 0,0.1);
	height: 35px;
	align-items: center;
	border-radius: 50rpx;
	margin-top: 15px;
	margin-left: 10px;
	width: 90%;
	
}
.index-search input{
	font-size: 20px;
	flex: 1;
}
.index-search uni-icons{
	margin-right: 26rpx;
	margin-left: 28rpx;
}
</style>

成果图：

image-20240727175846889

首页音乐分类布局及样式

要点：设计好对应的内容，定好分类最好是准确分类，我给出参考代码：

1
2
3
4
5
6
7
8
9
10
11
<view class="index-list">
					<view class="index-list-item">
						<view class="index-list-img">
							<img src="../../static/touxiang.jpg"  />
							<text>每天更新</text>
						</view>
						<view class="index-list-text">
							<view>1.与我无关 - 阿撋</view>
						</view>
					</view>
				</view>

样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.index-list{
	margin: 0 30px;
}
.index-list-item{
	display: flex;
	margin-bottom: 34rpx;
}

.index-list-img{
	top: 10px;
	width: 212rpx;
	height: 212rpx;
	position: relative;
	border-radius: 30rpx;
	overflow: hidden;
	margin-right: 22rpx;
	
}
.index-list-img text{
	position: absolute;
	left: 12rpx;
	bottom:16rpx;
	color: white;
	font-size: 24rpx;
	line-height: 66rpx;
	
}
.index-list-img img{
	width: 100%;
	height: 100%;
}
.index-list-text{
	margin-top: 10px;
}

图示：

image-20240727182950472

首页音乐分类数据渲染

接下来就是通过接口获取数据了，首先定义一个通用的url用来请求

image-20240727195229715

在config.js中写入下面的内容，这里采用按需导出。

1
export const baseUrl = 'http://154.9.25.84:3000'

创建api.js用来请求数据：这里采用按需导入，将url导入进来后进行请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { baseUrl } from "./config";

export function topList(){
    //返回一个Promise对象
	return	new Promise(function(reslove,reject){
		uni.request({
			url:`${baseUrl}/toplist/detail`,
			success:res=>{
				let result = res.data.list;
                //因为数据太长，这里只要前4个数据即可
				result.length =4;
                //成功时会调用该函数并将数据返回。
				reslove(result)
			}
		})
	})
}

·在index中的onload函数中，引入并调用函数topList

1
2
3
4
5
6
7
8
9
10
import { topList } from "../../common/api"
export default {
    //....省略部分代码
		onLoad() {
            //因为下面的函数返回一个Promise对象，这样就可以.then进行接下来的处理了
			topList().then((res)=>{
				this.topList = res;
			})
		},
	}

然后再模板中通过v-for来遍历即可，下面给出模板代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
	<view>
		<MusicHeadVue title='网易云音乐' :icon="false"></MusicHeadVue>
		<view class="container">
			<scroll-view scroll-y="true">
				<view class="index-search">
					<span>
						<uni-icons type='search'></uni-icons>
						<input type="text" placeholder="搜索歌曲" />
					</span>
				</view>
				<view class="index-list" v-for="(item,index) in topList" :key="index">
					<view class="index-list-item">
						<view class="index-list-img">
							<img :src='item.coverImgUrl' />
							<text>{{item.updateFrequency}}</text>
						</view>
						<view class="index-list-text">
							<view v-for="(item,index) in item.tracks" :key='index'>
								{{index + 1}}.{{item.first}} - {{item.second}}
							</view>
						</view>
					</view>
				</view>
		
			</scroll-view>
		</view>
	</view>
</template>

效果图：

image-20240727195930175