基于⽹易云⾳乐API的⼩程序——⽹愈芸⾳乐
⽹愈芸⾳乐
⼀.项⽬说明
前段时间，⽹抑云的梗被许多⼈说道，但是作为⼀个⽹易云⾳乐的资深⽤户，我个⼈觉得⽹易云这⼀款⼩⼩的⾳乐软件也能治愈着我们芸芸众⽣中的每⼀个平凡⼈。
⼀次偶然的机会在⽹易云看到了这样⼀条评论：我觉得⽹易云⾳乐不应该被叫做⽹抑云，更应该被叫做⽹愈芸。因为它⾥⾯也有着许多温暖，善良的故事，在深夜给了我们共鸣，让我们可以不再红着眼睛，也在治愈着⾝为芸芸众⽣中的我们每⼀个平凡⼈。
因此，想着做⼀个听歌的⽹愈芸⾳乐⼩程序。
⼆.项⽬环境准备
开发⼯具：开发者⼯具
界⾯UI组件库⽤到的是Vant Weapp：
⽹易云开发接⼝⽂档：
接⼝的基地址为：
⽂档中的地址都是在基地址baseURL的基础上往后增加。当然也可以⾃⼰下载NodeJS版的后台接⼝⽂件夹然后在本地运⾏进⾏部署。
三.项⽬初始化
1.新建项⽬
新建⼀个空⽂件夹，然后打开开发者⼯具新建⼀个云开发的⼩程序项⽬。
2.安装依赖Vant Weapp，构建NPM
1. 先在miniprogram⽂件夹(如果是云开发项⽬)下执⾏命令npm init，初始化项⽬，⼀路按回车即可(此过程完成后会⽣
成package.json⽂件)。如果不是云开发项⽬，直接在根⽬录下执⾏初始化命令即可。
2. 执⾏命令：npm i @vant/weapp -S --production，安装组件库。
3. 在详情—本地设置中勾选使⽤npm模块。
4. 在⼯具栏中选择⼯具—构建npm。完成后应该如下所⽰：
四.项⽬具体开发过程
1.欢迎页⾯(⾸页)：
点击进⼊⽹愈芸⾳乐即可跳转到登录页⾯：
2.登陆页⾯
1.界⾯设计
2.逻辑分析
在登录页⾯利⽤vant Weapp布局最基本的⼿机号+密码的登陆⽅式(这⾥的密码没有进⾏md5的加密)。另外，为了安全性(毕竟⼩程序中使⽤的是并不是官⽅API只是仿官⽅API)，还增加了⼿机号+验证码的登陆⽅式，但是该功能尚未实现还在优化中 ⾮常遗憾⽬前只⽀持⼿
机号+密码的登陆⽅式。
当然还可以直接点击⽴即体验跳过登陆先进⾏体验，当然部分功能就会⽆法实现(⽐如查看个⼈信息)。
3.MV页⾯
1.界⾯设计
2.逻辑分析
MV页⾯上每⾏放置两个MV，展⽰的信息包括MV标题，MV时长，MV播放量。点击MV封⾯即可跳转到MV详情页⾯。MV页⾯还可以筛选MV的类型，包括地区，类型和排序。
在MV详情页⾯中，可以播放该MV，还包括相似MV等信息。
4.⾳乐页⾯
1.界⾯设计
2.逻辑分析
在⾳乐界⾯展⽰了最新的100⾸歌曲，展⽰的信息包括歌曲排名，名字，歌⼿以及专辑。还⽀持根据地区筛选歌曲榜单，直接跳转到该歌曲的MV播放页⾯。
因为请求获取到的数据较多，加载速度尚未优化完美，需要等待⼀段时间(⼤概4，5秒)才能显⽰出来，另外图⽚加载速度会更慢所以就没有放歌曲专辑封⾯。
5.歌单页⾯
1.界⾯设计
考虑到歌单的来源，分别有推荐歌单(不需要登陆)，⽹友精选碟以及精品歌单三⼤类。通过Tabs页组件来实现切换。歌单每⾏布局3列，显⽰信息包括歌单封⾯，播放量，歌单名字。
点击歌单封⾯即可进⼊到歌单详情页⾯：
歌单详情页⾯包括的信息有歌单标题，歌单封⾯图，歌单描述，歌单创建者信息，歌单歌曲列表。
2.拓展功能
点击歌单描述所在⾏可以弹出蒙层，显⽰歌单详细信息，并⽀持保存歌单封⾯，复制歌单描述。
6.我的页⾯
在我的页⾯中主要分为个⼈信息展⽰区域和拓展功能区域。
1.个⼈信息展⽰区域
在个⼈信息展⽰区域中包括背景图，头像，昵称、等级、动态等基本信息，我喜欢的⾳乐，我创建的歌单，我收藏的歌单。如下图(未登陆)
已登陆：
2.拓展功能区域
在拓展功能区域中包括以下功能界⾯(后续⼀些功能也会添加在这⾥)：
听听周杰伦：在这⾥你可以听到⼀些周杰伦的歌曲(⽀持定时关闭，可以睡前听，晚安玛卡巴卡)
⽹易云热评：随机获取⽹易云⾳乐的热门评论
来喝鸡汤：随机获取⽂案和⼀⾔，嗯就是看着玩
更新⽇志：关于⼩程序的⼀些开发以及更新⽇志
关于⽹愈芸⾳乐：关于⼩程序的⼀些基本介绍
7.歌曲播放页⾯
1.界⾯设计
2.逻辑分析
在歌曲播放页⾯展⽰的有歌曲播放动效，歌曲播放操作按钮(上⼀⾸，播放/暂停，下⼀⾸)，相似歌曲，热门评论。点击顶部右侧标志可以展⽰播放列表。
在播放列表页⾯顶部可以查看到当前播放列表中的全部歌曲以及总曲⽬数量。
接着可以切换当前播放模式(随机播放，顺序播放，单曲循环，列表循环)，清空当前播放列表。
在播放列表展⽰歌曲的列表中，可以点击每⼀⾸歌曲后⾯的删除按钮将当前歌曲从列表中删除，直接点击歌曲所在⾏可以快速直接播放该歌曲。
3.拓展功能
点击精彩评论这四个字会出现弹出层。
点击每⼀条评论的赞会出现弹出层，⽀持复制评论内容。
长按评论可以直接复制评论内容。
小程序开发一键生成平台源码8.碰到的问题，优化及解决⽅法
1.MV页⾯显⽰留⽩问题
问题描述：在MV页⾯，⽤到图⽚(mv的封⾯图)+⽂字(mv的名字)的格式，但是碰到页⾯上会出现部分空⽩区域。如下图所⽰：
解决⽅法：经过⼩程序开发者交流社区的交流，将⽂字<text class="mvName">{{ item.name }}</text>改成<view class="mvName">{{
item.name }}</view>并设置了⼀个固定⾼度即可修复。
2.MV页⾯下拉刷新的重新赋值
问题描述：this.setData({})只能赋值单个变量，不能赋值对象.属性的格式。
解决⽅法：
3.⼩程序wx:for双重循环
<view  wx:for="{{orderList}}" wx:key="item">
<view wx:for="{{der_info}}" wx:key="idx" wx:for-item="pro">
</view>
</view>
4.⼩程序长按操作⽅法
bindlongpress="songLongPress"
5.⼩程序获取全局变量获取不到
⾸先申明全局变量在app.js中申明，如下格式：
App({
globalData:{
// 当前正在播放的歌曲对象
nowPlayingSong:{},
/
/ 播放列表
playingSongList:[],
// 播放模式 random,singleloop,order,listloop，默认随机播放
playingSongMode:'random'
},
onLaunch:function(){
在app.js页⾯调⽤的话直接使⽤this.data.属性名即可。如果是在别的页⾯想要调⽤或者修改值，⽅法如下：// 获取全部变量
const app =getApp()
...
// 重新给全局变量赋值
wPlayingSong = item
// 获取全局变量
console.log(app.globalData.playingSongList)
如果发现获取不到，那么注意检查⼀下app.js的onLaunch⽅法中有没有这么⼀句话：
this.globalData ={}
有的话去掉就可以了，不太容易注意到
6.标签通过event传值
例如：
bind:click="onMvSortChanged" data-newsortitem="{{subItem}}"
...
onMvSortChanged(event){
console.log(event.wsortitem)
}
注意，newsortitem必须全部⼩写，否则会获取不到。
7.js中修改完数据页⾯没有及时渲染
例如：
this.data.mvSortData[1].sort.forEach(item =>{
if(item.id === newSortItem.id){
item.isChoosen =true
}else{
item.isChoosen =false
}
peValue = newSortItem.name
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。