微信小程序【网易云音乐实战】（第四篇用户登录、本地存储、视频播放、上拉下拉刷新）

您所在的位置：网站首页 › 网易云音乐12点 › 微信小程序【网易云音乐实战】（第四篇用户登录、本地存储、视频播放、上拉下拉刷新）

微信小程序【网易云音乐实战】（第四篇用户登录、本地存储、视频播放、上拉下拉刷新）

2023-06-19 19:48| 来源: 网络整理| 查看: 265

一、用户登录

官网事件使用使用

在这里插入图片描述

1. 绑定事件和获取数据

bindinput ：当输入框有变化时，触发事件。

在这里插入图片描述

handleInput(event){ // let type=event.currentTarget.id; // 1. 通过设置的id 传值 let type=event.currentTarget.dataset.type; // 2. 通过data-type 传值 this.setData({ [type]:event.detail.value; // [type]: value }) },

结果：在这里插入图片描述

2. 前端验证

wx.showToast(Object object) 提示信息

关键代码：

// 正则表达式验证号码是否正确 let {phone,password}=this.data; let phoneReg=/^1(3|4|5|6|7|8|9)\d{9}$/; if(!phoneReg.test(phone)){ // 提醒用户 wx.showToast({ title:"手机号格式错误！！", icon:"none" }); return; }

全部代码：

//登录的回调 login(){ // 1. 收集表单项的数据 let {phone,password}=this.data; // 2. 前端验证 : 不能为空，号码正确 if(!phone){ // 提醒用户 wx.showToast({ title:"用户名不能为空！", icon:"none" }); return; } // 正则表达式：号码正确 let phoneReg=/^1(3|4|5|6|7|8|9)\d{9}$/; if(!phoneReg.test(phone)){ // 提醒用户 wx.showToast({ title:"手机号格式错误！！", icon:"none" }); return; } // 验证密码 if(!password){ // 提醒用户 wx.showToast({ title:"密码不能为空！！", icon:"none" }); return; } // 提醒用户 wx.showToast({ title:"前端验证通过！", icon:"none" }); }, 3. 后端验证

首先还是先启动本地的服务器！在这里插入图片描述

在这里插入图片描述

// 3. 后端验证 let result = await request("/login/cellphone",{phone,password}); if(result.code === 200){ // 成功 wx.showToast({ title: "登录成功！" }); } else if(result.code === 400){ wx.showToast({ title: "手机号错误！", icon: "none" }); } else if(result.code === 502) { wx.showToast({ title: "密码错误！", icon: "none" }); } else{ wx.showToast({ title: "登录失败，请重新登陆！", icon: "none" }); } 二、本地存储（个人中心与登录界面的交互）

在这里插入图片描述

页面跳转：在这里插入图片描述页面跳转使用 reLaunch（login --> personal页面）

在页面跳转的时候，数据很难交互，这里使用本地缓存！

数据存储官方API

展示本地数据：在这里插入图片描述获取存储数据：

// 个人中心页面跳转登录界面 toLogin(){ wx.navigateTo({ url:"/pages/login/login" }), onLoad: function (options) { // 读取本地存储的用户信息 let userInfo = wx.getStorageSync("userInfo"); if(userInfo){ this.setData({ userInfo:JSON.parse(userInfo) }); } },

存储数据：

// 3. 后端验证 let result = await request("/login/cellphone",{phone,password}); if(result.code === 200){ // 登录成功 wx.showToast({ title: "登录成功！" }); // 将用户信息存储到本地 // * JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。 wx.setStorageSync("userInfo",JSON.stringify(result.profile)); // 跳转个人中心 wx.reLaunch({ url:"/pages/personal/personal" }); } 三、获取用户的播放纪录

在这里插入图片描述

服务器接口：在这里插入图片描述

页面：

微信小程序【网易云音乐实战】（第四篇用户登录、本地存储、视频播放、上拉下拉刷新）

微信小程序【网易云音乐实战】（第四篇用户登录、本地存储、视频播放、上拉下拉刷新）

今日新闻

推荐新闻

微信小程序【网易云音乐实战】（第四篇 用户登录、本地存储、视频播放、上拉下拉刷新）

微信小程序【网易云音乐实战】（第四篇 用户登录、本地存储、视频播放、上拉下拉刷新）

今日新闻

推荐新闻

微信小程序【网易云音乐实战】（第四篇用户登录、本地存储、视频播放、上拉下拉刷新）

微信小程序【网易云音乐实战】（第四篇用户登录、本地存储、视频播放、上拉下拉刷新）