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

最新推荐文章于 2024-09-30 22:34:43 发布

肖肖冲鸭

最新推荐文章于 2024-09-30 22:34:43 发布

阅读量1.8k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/weixin_48952990/article/details/125637088

版权

本文总结了微信小程序中个人中心页与登录界面的切换流程，包括前端验证、后端验证、数据存储与传递、利用wx.setStorageSync和wx.getStorageSync管理登录状态，使用wx.reLaunch进行路由跳转，以及根据用户信息判断登录状态以防止未授权访问。

摘要由CSDN通过智能技术生成

总结：
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