网易云音乐开发--通过网易云音乐api，游客登录页面验证效果实现

收集表单项数据，event对象传参

登录流程

1.收集表单项数据

2.前端验证

1）验证用户信息（账号，密码）是否合法

2) 前端验证不通过就提示用户，不需要发请求给后端

3）前端验证通过了，发请求（携带账号，密码）给服务器端

3.后端验证

1）验证用户是否存在

2）用户不存在直接返回，告诉前端用户不存在

3）用户存在需要验证密码是否正确

4）密码不正确返回给前端提示密码不正确

5）密码正确返回给前端数据，提示用户登录成功（会携带用户的相关信息）

我们需要实时监测这个表单信息，我们用bindinput

事件 | 微信开放文档 (qq.com)

在这里我们要说一下target和currentTarget的区别。

而我们想要搞懂这个，我们需要知道事件委托

1.什么是事件委托

将子元素的事件委托（绑定）给父元素

2.事件委托的好处

1.减少绑定的次数

2.后期新添加的元素也可以享用之前委托的事件

3.事件委托的原理

冒泡

4.触发事件的是谁？

子元素

5.如何找到触发事件的对象

event.target

6.target和currentTarget的区别

currentTarget要求绑定事件的元素一定是触发事件的元素

之前我们也观察到了，可以通过id给event来传参

这个[type]的意思是如果我们要修改一个对象中的属性，可以使用[]

除了这个方式也可以通过data-的方式传值

那么我们啥时用id还是data-传值？

就看你传入的是多个数据还是唯一数据。唯一就用id，不唯一就用data

前端验证实现

后端验证实现

现在用这个接口会出现网络拥挤的现象，可以换一个接口使用Binaryify/NeteaseCloudMusicApi: 网易云音乐 Node.js API service (github.com)

网易API需要上GitHub上下载最新版本并部署，要不会报网络拥挤错误

现在应该是501手机错误和502密码错误实测

网易云音乐 NodeJS 版 API (binaryify.github.io)

神头鬼脸，我看到了文档里面说可以游客登录

就这样ok了，后面的问题，后面在说

本地存储，个人中心，登录界面交互

这里要注意的是我们这个是一个tab界面需要用switchTab

看文档，知道调用游客登录会返回useId,而想要进入/user/detail就必须要传入useId,这里我们就写死传进去

当然数据也是能存储到本地上

然后去读这个数据

但是没有效果，那就是setData发生了错误，因此读出来的是一个JSON对象。而且onLoad,在小程序一加载就保留下来了，而且我们用的navto会保存当前的数据。解决方案就是：onShow，获取是reLaunch跳转（这里采用这种方式）

看这就加载成功了

用户播放记录展示

定义一个获取用户播放记录的功能函数

然后就有数据了，之后就渲染到页面上面

数据就有了，然后写样式

样式写好了，效果还可以

完善用户播放记录

播放记录并不是都有的

像我们没有登录，那肯定是没有播放记录的。或者，我登录了但是没有播放音乐，那肯定就没有啊

就是用wx:if来控制是否显示播放记录recentPlayList.lenght>0就显示，否则就不显示

项目管理