小程序数据缓存—小程序入门与实战【十四】

上一章节我们了解到了小程序的登录流程。那这一章节我们来详细的讲解果酱先生客户端是如何实现登录的。

给大家补一个知识点,就是如何在微信开发者工具中,在没有写路由的情况下如何进到个人中心页。

image

点击去之后然后

image

  • 模式名称:虽然可以随便写,但是我们还是要注重规范,写个人中心。
  • 启动页面:就是你需要进去的页面的路劲,你在app.json里面定义的。

利用 wx.login 获取 code

 //调用 wx.login方法 获取 code,传给服务端
   wxLogin(){
       wx.showLoading({
           title: '正在自动登录',
           mask: true
       })
       wx.login({
           success: res => {
               if (res.code) {
                  //拿到code之后,我们应该将code给服务端换取 openid
                 this.setData({
                     code:code
                 })
                 this.autoUserLogin(res.code);
               } else {
                   wx.showToast({
                       title: '获取code失败',
                       icon: 'none'
                   })
               }
           }
       })
   },

上面代码有两个新的知识点:

  • wx.showLoading()  wx.hideLoading()
  • wx.login() success 接口调用成功函数。
wx.showLoading()

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

属性:

  • title 为提示内容,必须是字符串
  • mask  为是否显示透明蒙层,防止触摸穿透,必须是 布尔值,true || false 。
wx.login()

调用接口获取登录凭证(code)。

属性:

  • success 接口调用成功的回调函数
  • fail 接口调用失败的回调函数

object.success 回调函数

参数 Object res

属性:

  • code 用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 auth.code2Session,使用 code 换取 openid session_key 等信息

所以接下来我们就要将 code 传给服务端,要后端工程师去换取 openid

获取 openid

 //利用code 获取 openid,或者token
   autoUserLogin(code){
      sandBox.get({
          api:'api/sir/user/login',
          data:{
              code:code
          }
      }).then(res=>{
          res = res.data;
          if(res.status){
              //如果是新用户,服务端则会返回openid
              if(res.data && res.data.open_id){
              // 将open_id 放到data中
                  this.setData({
                      open_id:res.data.open_id
                  })
              }
              //如果是老用户,服务端则会返回返回自定义登录状态token
              if(res.data && res.data.access_token){
                  //将拿到的token,做一下处理,客户端跟服务端协调一致
                  let access_token = res.data.token_type + ' ' + res.data.access_token;
                  //将token存在本地
                  wx.setStorageSync('user_token', access_token);
                 
                  this.setData({
                token:access_token
                  }
                  )

              }
              wx.hideLoading();

          } else {
              wx.hideLoading();
              wx.showModal({
                  content: res.message || '请求失败,请重试',
                  showCancel: false,
                  success: res=>{
                      if (res.confirm || (!res.cancel && !res.confirm)) {
                          this.wxLogin();
                      }
                  }
              })

          }
      }).catch(rej=>{
          wx.hideLoading();
          wx.showModal({
              content: rej.message || '内部错误,请重试',
              showCancel: false,
              success: res=>{
              //当用户点击确认按钮或者不是取消按钮都运行以下代码
                  if (res.confirm || (!res.cancel && !res.confirm)) {
                      this.wxLogin();
                  }
              }
          })
      })

   }

上面的代码有两个新的知识点:

  • wx.setStorageSync()设置本地缓存」
wx.setStorageSync({
   key:"key",
   data:"value"
})

有咩有设置成功可以在这里查看

image

  • wx.getStorageSync() 获取本都缓存」
wx.getStorageSync({
 key: 'key'
})

autoUserLogin() 函数的代码是不完整的,我们还要获取到 token 之后我们应该要干嘛。等写完登录后面会完善代码。

登录逻辑也没有写完,我们是新用户拿到 openid  之后需要用户去授权手机号。

下一章节我们来讲解新用户授权获取用户手机号登录。