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

网愈芸音乐

一.项目说明
二.项目环境准备
三.项目初始化
- 1.新建项目
- 2.安装依赖Vant Weapp，构建NPM
四.项目具体开发过程
- 1.欢迎页面(首页)：
- 2.登陆页面
- - 1.界面设计
  - 2.逻辑分析
- 3.MV页面
- - 1.界面设计
  - 2.逻辑分析
- 4.音乐页面
- - 1.界面设计
  - 2.逻辑分析
- 5.歌单页面
- - 1.界面设计
  - 2.拓展功能
- 6.我的页面
- - 1.个人信息展示区域
  - 2.拓展功能区域
- 7.歌曲播放页面
- - 1.界面设计
  - 2.逻辑分析
  - 3.拓展功能
- 8.碰到的问题，优化及解决方法
- - 1.MV页面显示留白问题
  - 2.MV页面下拉刷新的重新赋值
  - 3.微信小程序wx:for双重循环
  - 4.微信小程序长按操作方法
  - 5.微信小程序获取全局变量获取不到
  - 6.标签通过event传值
  - 7.js中修改完数据页面没有及时渲染
  - 8.微信小程序Component组件获取全局变量
  - 9.VantWeapp 中Toast等需要在js中导入文件的组件的导入方法
  - 10.获取不到全局变量问题
  - 11.微信小程序WXML中text文本空格
  - 12.mv播放量以及时长的格式过滤器
- 9.功能介绍
- - 1.登陆
  - 2.播放音乐，播放mv(来自网易云音乐)
  - 3.获取随机文案和一言
  - 4.听到周杰伦的歌曲
  - 5.网易云热评
- 10.开发日志
五.项目后续功能优化以及升级
- 1.0.1版本
- 待实现，后续准备加入(尽力而为)的功能和优化计划：
六.写在最后

一.项目说明

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

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

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

二.项目环境准备

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

文档中的地址都是在基地址baseURL的基础上往后增加。当然也可以自己下载NodeJS版的后台接口文件夹然后在本地运行进行部署。

三.项目初始化

1.新建项目

新建一个空文件夹，然后打开微信开发者工具新建一个云开发的微信小程序项目。

2.安装依赖Vant Weapp，构建NPM

先在miniprogram文件夹(如果是云开发项目)下执行命令npm init，初始化项目，一路按回车即可(此过程完成后会生成package.json文件)。如果不是云开发项目，直接在根目录下执行初始化命令即可。
执行命令：npm i @vant/weapp -S --production，安装组件库。
在详情—本地设置中勾选使用npm模块。
在工具栏中选择工具—构建npm。完成后应该如下所示：

四.项目具体开发过程

1.欢迎页面(首页)：

点击进入网愈芸音乐即可跳转到登录页面：

2.登陆页面

1.界面设计

2.逻辑分析

在登录页面利用vant Weapp布局最基本的手机号+密码的登陆方式(这里的密码没有进行md5的加密)。另外，为了安全性(毕竟小程序中使用的是并不是官方API只是仿官方API)，还增加了手机号+验证码的登陆方式，但是该功能尚未实现还在优化中