微信小程序个人中心页与登录界面的切换

总结：
1）进行前端验证
2）进行后端验证
3)后端验证通过，获取数据
4）将login登录界面获取到的数据交给personal页面使用，可以先将数据使用wx.setStorageSync存储起来，personal页面使用时，直接使用wx.getStorageSync获取
5）若登录成功，需要从login页面返回person页面，可以使用路由跳转，因为跳转回的页面有tabBar，所以需要使用wx.reLaunch跳转
6)跳转成功到personal页面之后，因为已经登录成功，所以可以让用户不能再点击头像进入login页面，可以使用获取到的用户信息里的某一项进行判断，若有值，则直接返回。
login.js

  // 登录的回调(点击button按钮进行验证)async login(){// 1.收集表单项数据let {phone,password}=this.data// 前端验证/* 1.内容为空2.手机号格式不正确3.手机号格式正确，验证通过*/if (!phone) {wx.showToast({title: '手机号不能为空',icon:"error",})return}//  定义正则表达式（^代表开头第一位数字1，第二位3-9任意数字，后面九位任意数字 /d代表数字{9}代表九位 $代表以什么结尾）let phoneReg=/^1(3|4|5|6|7|8|9)\d{9}$/if (!phoneReg.test(phone)) {//进入代表手机号格式不正确// 提示用户wx.showToast({title: '手机号格式错误',icon:'error'})return}// 验证密码if (!password) {wx.showToast({title: '密码不能为空',icon:"error",})return}// 后端验证let result=await request('/login/cellphone',{phone,password})// 200 400 502if (result.code===200) {// 登录成功wx.showToast({title: '登录成功',})// 将用户信息存入本地wx.setStorageSync('userInfo', result.profile)// 跳转至个人中心页wx.reLaunch({url: '/pages/personal/personal',})}else if(result.code===400){wx.showToast({title: '手机号错误',icon:'error'})}else if(result.code===502){wx.showToast({title: '密码错误',icon:'error'})}else{wx.showToast({title: '登陆失败请重试',icon:'error'})}}

personal.js

  data: {coverTransform:'translateY(0)',coverTransition:'',userInfo:{},//存放用户信息},
// 跳转至登录页面toLogin(){// 判断用户是否已经登录(随便看一个属性如nickname是否为true，true说明已经登录，直接返回)if (this.data.userInfo.nickname) {return}wx.navigateTo({url: '/pages/login/login',})},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 读取本地用户的信息let userInfo=wx.getStorageSync('userInfo')if (userInfo) {//用户登录// 更新userInfothis.setData({userInfo})}},

渲染个人中心页数据 personal.wxml

 <view class="portrait-box"><image class="portrait" src='{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}'></image></view><view class="info-box"><text class="username">{{userInfo.nickname?userInfo.nickname:'游客'}}</text></view>

微信小程序个人中心页与登录界面的切换相关推荐

微信小程序个人中心、我的界面（示例一）
微信小程序使用button按钮实现个人中心.我的界面(示例一) 微信小程序个人中心.我的界面,使用button按钮实现界面布局,更好的将分享好友.获取头像等功能展现出来,更多示例界面,请前往我的主页哦 ...
微信小程序个人中心页下拉回弹效果实现
实现微信小程序个人中心页面的某个区域的下拉回弹效果.例如以下代码代表需要下拉回弹的区域: 给这个区域加上事件:手指触发的时候事件.手指移动的事件.手指松开的事件.同时加上动画的样式. <view ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
php刷脸登录,PHP实现微信小程序人脸识别刷脸登录功能
首先我们先确认我们的百度云人脸库里已经上传了我们的个人信息照片关注cs代写,有帮助! 然后我们在后台写刷脸登陆的接口login我们要把拍照获取的照片存储到服务器 public function l ...
手把手教你做短视频去水印微信小程序（2-首页）
手把手教你做短视频去水印微信小程序系列教程(2-首页) 文章目录手把手教你做短视频去水印微信小程序系列教程(2-首页) 前言一.顶部banner 二.地址解析 1.整体代码 2. input框输入 ...
关于小程序订单中心页设置的公告
为进一步规范小程序交易生态.提升用户购物体验.满足用户在有交易的小程序中便捷查看订单信息的诉求,自2022年12月31日起,对于有"选择商品/服务-下单-支付"功能的小程序,需按照 ...
微信小程序及Java后台测试登录
微信小程序及Java后台测试登录文章目录微信小程序及Java后台测试登录一.使用的工具以及开发环境二.微信端登录代码. 第一种方式,使用wx.getUserInfo直接获取微信头像,昵称. 第 ...
微信授权绑定手机号 java_微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无 ...

微信小程序个人中心页与登录界面的切换

微信小程序个人中心页与登录界面的切换相关推荐

最新文章

热门文章