微信小程序登录、获取用户信息以及检查session_key是否过期大致操作流程[开发采用wepy框架]

基于微信小程序对于getUserInfo的调整,获取用户信息改采用button实现,基于此实现的微信小程序一整套登录流程。

在整个小程序的实现中需要调用wx.checkSession()接口,通过该接口检测session_key是否过期。

  • 基于该次项目的流程设计,首先在app.wpy文件中的onLaunch函数中做如下处理:
  wx.checkSession({
    success:function(res){
      //session_key未过期
    },
    fail:(res=>{
      // session_key已过期
      // 进行登录操作
      wx.login({
        success: function(res) {
          const url = '接口地址'   //本次项目中是从后台获取session_key的接口,可能流程不同,会有相应的变化
          const data = {
            //你要传的数据
          }
          wepy.request({
            url: url,
            method: 'POST',
            data: data,
          }).then(res=>{
            if(res.data.code == 0){
              //拿到的openid和session_key存到缓存中

              //调用换取用户id接口[需求不同,可能接口会有相应的变化]
              const url = '获取用户id的接口'
              const data = {'要传的数据'}
              wepy.request({
                url: url,
                method: 'POST',
                data: data,
              }).then((res)=>{
                //该接口设计返回的参数包括换取的用户ID和返回的用户的微信中信息,也就是通过button获取的那个userInfo[我们为了后续的处理,所以后台这块返回用户信息,如果用户还未登录,用户信息,返回是空,反之则有值]
                //存储用户ID
                wx.setStorage({
                  key:'userId',
                  data:'获取到的用户ID'
                })
                //存储用户信息[userInfo]
                wx.setStorage({
                  key:'userInfo',
                  data:'获取到的用户信息'
                })
              })
            }
          })
        }
      });
    })
  })
  • 在需要展示用户信息的页面进行处理[onShow函数]
  onShow(){
    //从缓存中获取session_key
    let skey = wx.getStorageSync('session_key');
    if (!skey) {
      //如果session_key不存在,再次执行登录
      wx.login({
        //该处登录同app.wpy[流程一样]
      });
    }else{
      // session_key存在
    }
  }
  //我们假设这个页面需要获取用户的信息,首先给一个button[open-type设置为getUserInfo],使用这个拿到用户的信息,
  getUserInfo(e){
      this.userInfo = e.detail.userInfo;  //e.detail.userInfo携带的就是用户的个人信息[包括头像、昵称等]
      if(e.detail.userInfo){
        wx.showToast({
          title: '授权成功',
          icon: 'success',
          duration: 1500
        })
        //这里做这样的处理,是因为需求需要点击购物车按钮跳转订单待支付页,在没有获取到用户信息之前,跳转购物车的按钮隐藏,获取用户信息按钮显示,反之则返
        this.button = 'none';   //获取用户信息button
        this.myMenu = 'block';  //跳转待支付订单页
        //更新缓存中的用户信息
        wx.setStorage({
          key:'userInfo',
          data:this.userInfo
        })
      }else if(e.detail.errMsg == 'getUserInfo:fail auth deny'){
        wx.showModal({
          title: '提示',
          content: '若不授权微信登录,则无法使用小程序。点击"授权"按钮并允许使用"用户信息"方可正常使用。',
          showCancel:false,
          confirmText:'授权',
          success:(res=>{
            wx.openSetting({
              success: (res) => {
              }
            })
          })
        })
      }
    },

你可能感兴趣的:(移动端,微信小程序)