小程序登录流程

 

简单讲下流程, 方便以后查看. 顺便吐槽下 typ 居然不会自动保存 ==

1) 通过后端接口实现登录

一.收集表单数据

类似v-model 实时收集填写数据

bindinput => 实时获取value值

// 用id 传参
handleInput(e){
    let type = e.currentTarget.id;
    console.log(e.detail.value, type);
    this.setData({
      // 操控变量需要用到中括号
      [type]: e.detail.value
    })
  }

 

二.前端验证

1. 验证用户输入信息(手机号长度,格式, 密码长度)是否合理,(正则表达式)

2. 前端验证不通过就直接提示用户, 不需要给后端发送请求

3. 前端验证通过, 携带账号密码, 发请求到后端

   let { phone, pwd } = this.data
       if (!phone){
         // 手机号为空
         wx.showToast({
           icon: 'none',
           title: '请输入手机号',
         })
         return;
       }else if( !pwd ){
         wx.showToast({
           icon: 'none',
           title: '请输入密码',
         })
         return;
       }
       // 定义正则表达式
       let phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
       // let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}/
       if ( !phoneReg.test(phone) ){
         wx.showToast({
           icon: 'none',
           title: '手机号格式不正确',
         })
         return;
       }

    

三. 后端验证

1. 验证用户是否存在

2. 不存在 => 返回, 提示用户你不存在

3. 存在 => 验证密码是否正确

4. 不正确 => 返回前端密码不正确

5. 正确 => 返回携带用户信息的信息, 提示用户登录成功, 并把信息保存至本地(注意转化成 json 格式, 读取时也要转化)

let res = await requset('/login/cellphone', { phone, password })
if ( res.code === 200 ){
      wx.showToast({
        icon: 'none',
        title: '登录成功',
      })
      // 将用户信息存储至本地
      wx.setStorageSync('userInfo',
                        JSON.stringify(res.profile) )
      
      wx.reLaunch({
        url: '/pages/my/my',
      })
    }else if( res.code === 400 ){
      wx.showToast({
        icon: 'error',
        title: '手机号错误',
      })
    }else if( res.code === 502 ){
      wx.showToast({
        icon: 'error',
        title: '密码错误',
      })
    }else{
      wx.showToast({
        icon: 'error',
        title: '登录失败,请重新登录',
      })
    }

 

2)通过 wx 自带 api 进行登录, 绑定微信信息

一. 页面加载时查询本地登录信息

1. 无, 显示登录界面

2. 有, 调取本地信息

   // 从本地中取出缓存
       let user = wx.getStorageSync('user')
       this.setData({
         userInfo: user
       })

    

二. 登录

1. 调用 wx 自带 api , wx.getUserProfile, 成功回调把信息缓存至本地(这里得信息是微信的, 微信昵称头像等等)

 login(){
    wx.getUserProfile({
      desc: '用于完善信息',
      success: res => {
        let user = res.userInfo
        // 把用户登录信息缓存到本地
        wx.setStorageSync('user', user)
        console.log(res);
        this.setData({
          userInfo: user
        })
      },
      fail: res => {
        console.log(res);
      }
    })
  }

 

三.登出

把本地存储的登录信息清空

loginOut(){
    this.setData({
      userInfo: '',
    })
    wx.setStorageSync('user','')
  }