网易云音乐开发--通过网易云音乐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就显示,否则就不显示 

项目管理

猜你喜欢

转载自blog.csdn.net/weixin_64612659/article/details/130541347