基于网易云音乐API的微信小程序——网愈芸音乐

一.项目说明

前段时间，网抑云的梗被许多人说道，但是作为一个网易云音乐的资深用户，我个人觉得网易云这一款小小的音乐软件也能治愈着我们芸芸众生中的每一个平凡人。

一次偶然的机会在网易云看到了这样一条评论：我觉得网易云音乐不应该被叫做网抑云，更应该被叫做网愈芸。因为它里面也有着许多温暖，善良的故事，在深夜给了我们共鸣，让我们可以不再红着眼睛，也在治愈着身为芸芸众生中的我们每一个平凡人。

因此，想着做一个听歌的网愈芸音乐小程序。

二.项目环境准备

开发工具：微信开发者工具
界面UI组件库用到的是Vant Weapp：Vant Weapp
网易云开发接口文档：网易云开发接口文档
接口的基地址为：baseURL

文档中的地址都是在基地址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({})只能赋值单个变量，不能赋值对象.属性的格式。
解决方法：微信小程序this.setData如何修改对象、数组中的值

3.微信小程序wx:for双重循环

<view  wx:for="{
   
   {orderList}}" wx:key="item">
    <view wx:for="{
   
   {item.order_info}}" wx:key="idx" wx:for-item="pro">
    </view&g