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

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

点击去之后然后

• 模式名称：虽然可以随便写，但是我们还是要注重规范，写个人中心。
• 启动页面：就是你需要进去的页面的路劲，你在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"
})

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

• 「wx.getStorageSync() 获取本都缓存」

wx.getStorageSync({
  key: 'key'
})

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

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

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