小程序登录获取用户信息及授权手机号方法

本篇记录讲解

小程序登录，是现在小程序里面很普遍的一个功能，因为官方提供的方法，可以一键获取到用户信息，一键拿到手机号，本篇主要记录，本人开发小程序时，做登录过程中遇到的问题及解决方法）。

小程序登录

wxml：
wxml注意事项：
1.小程序的登录和获取用户信息是两部分！
2.登录方法我写在app.js的onshow里面，因为可以保证小程序每次登录都可以拿到最新的用户信息。
3.因小程序官方更新要求，现在获取用户信息，必须是主动触发去获取。
4.主动触发的事件，必须绑定在标签上面才可以。（根据需求自己定义按钮位置）
app.js登录代码如下：

   login: function () {//封装成方法，方便在小程序其他页面调用
      console.log("进入登录-------")
      var that = this;
      wx.login({ //微信官方登录方法
         fail: function (err) {
            console.log("login.fail", err);
         },
         complete: function (msg) {
            console.log("login.complete", msg);
         },
         success: function (loginInfo) {//登录成功，拿到第三方平台code
      //这里因为产品需求，调用了第三方平台的code,做了判断和保存
            that.globalData.loginInfo = loginInfo.code   //存取第三方平台code到公用数据字段
            if (wx.getExtConfig) {//第三方平台判断，具体不知道啥意思，API这么写的
               wx.getExtConfig({ //确定第三方平台信息拿到，开始调用登录接口。
                  success: function (res) {
                     that.globalData.code = res.extConfig.code; //这个code是微信的code和第三方的code不一样。
                     wx.request({ //请求方式和参数，做过交互的一看就懂，不多BB
                        url: (that.globalData.server_root2 + "/v1/user/login"),
                        method: "POST",
                        header: {
                           'content-type': 'application/x-www-form-urlencoded'
                        },
                        data: {
                           wxcode: loginInfo.code,
                           code: res.extConfig.code 
                        },
                        success: function (result) {
                        //登录接口调用成功以后，会拿到两个参数
                        //1.用户的唯一标识（每个用户的唯一标识都不一样）
                        //2.sessionKey  ，每次登录的sessionKey 都不一样。
                        
                           var userInfo = {
                           //这是我自己定义的一个对象，这里面的数据是根据微信获取用户信息的格式来定义的，
                           方便做获取用户信息的时候，获取的数据存储位置统一。
                              //生日
                              birthday: result.data.data.birthday,
                              //性别 0未知 1男 2女
                              gender: result.data.data.gender,
                              //用户头像
                              head_photo: result.data.data.head_photo,
                              //用户微信昵称
                              nick_name: result.data.data.nick_name,
                              // 真实姓名
                              real_name: result.data.data.real_name,
                           };
       
                        }
                     });
                  }
               })
            }
         }
      })
   },

登录成功以后-------获取用户信息

wxml部分：

<!--严格标准，不要写错了,--open-type一定要写>
   <button lang="zh_CN" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo" class='butn'></button>

js部分：

  //获取用户信息
   onGotUserInfo: function (e) { //获取用户信息方法，注意一定要取到 "e"
      var that = this
      var wxUserInfo = e.detail.userInfo;  
      var cacheUserInfo = wx.getStorageSync("userInfo");
//获取用户信息，只要根据自己需求单独存起来就好了。
      var userInfo = {};
      userInfo.head_photo = wxUserInfo.avatarUrl;
      userInfo.nick_name = wxUserInfo.nickName;
      userInfo.gender = wxUserInfo.gender;
      userInfo.country = wxUserInfo.country;
      userInfo.country = wxUserInfo.city;
      userInfo.country = wxUserInfo.province;
      that.setData({
         user_info: userInfo
      })
   },

小结：至此，登录和获取用户信息，就介绍完了，在这其中，因为方便小程序能拿到用户信息。
做了好多按钮的摆放，最后选择了透明遮罩，如有好的方法，请告知

手机号授权

手机号授权，也是现在小程序用到的功能比较多的，奈何官方的API太过言简意赅。下面就讲讲
我在获取手机号的时候遇到的坑，和注意事项。望大家带好笔记记录。先来看代码
wxml部分：

<!--手机号事件的授权必须绑定在子button按钮上-->
        <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>

js部分：

   //注册会员按钮并获取手机号
   getPhoneNumber: function (e) {//这个事件同样需要拿到e
      var that = this
      var ency = e.detail.encryptedData;
      var iv = e.detail.iv;
      var errMsg = e.detail.errMsg
      if (iv == null || ency == null) {
         wx.showToast({
            title: "授权失败,请重新授权！",
            icon: 'none',
         })
         return false
      }
      //把获取手机号需要的参数取到，然后存到头部data里面
      that.setData({
         ency: ency,
         iv: iv,
         errMsg: errMsg
      })

      that.zhuce();//调用手机号授权事件
   },


//手机号授权事件
//这里提及几个注意事项：
//1.获取手机号之前，是需要进行登录的，因为必须保证，用户的登录是最新的登录状态
//才能拿到他的最新的sessionKey，这样授权的时候才不会有问题。
//我进入的坑：
//1.之前开发就是因为sessionKey，是我登录的时候存的缓存，导致，只有第二次授权才能成功，第二次授权是重新登录的，
//并且重新拿到的sessionKey，此坑慎入。
   zhuce: function (e) {
      var that = this;
      var ency = that.data.ency;
      var iv = that.data.iv;
      var errMsg = that.data.errMsg;
      var loginInfo = app.globalData.loginInfo
      //判断登录状态
  wx.checkSession({  
         success: function () {
            if (wx.getExtConfig) {
               wx.getExtConfig({
                  success: function (res) {
                     var rescode = res.extConfig.code
                     //我的sessionKey是写在app.js的onshow里面的，每次进入小程序都需要重新登录，
                     //获取到最新的sessionKey保存到缓存里，用的时候取出来
                     //所以可以确定，每次进入都是最新的sessionKey
                     var sessionKey = wx.getStorageSync("sessionKey")
                     wx.request({
                        method: "POST",
                        url: (app.globalData.server_root2 + "/v1/user/getPhoneNumber"),
                        data: {
                           encrypdata: ency,
                           ivdata: iv,
                           sessionKey: sessionKey
                        },
                        success: function (res) {
                           if (res.data.code != 200) {
                              wx.showToast({
                                 title: res.data.message,
                                 icon: 'none',
                              })
                              return;
                           }

                        }
                     });
                  }

               })
            }
         },
         fail: function () {//如果失败，就重新登录，并且重新获取手机号
            //登录
            wx.login({
               fail: function (err) {

               },
               complete: function (msg) {

               },
               success: function (loginInfo) {
                  if (wx.getExtConfig) {
                     wx.getExtConfig({
                        success: function (res) {
                           var rescode = res.extConfig.code
                           wx.request({
                              method: "POST",
                              url: (app.globalData.server_root2 + "/v1/user/getPhoneNumber"),
                              data: {
                                 encrypdata: ency,
                                 ivdata: iv,
                                 sessionKey: app.globalData.sessionKey
                              },
                              success: function (res) {
                                 if (res.data.code != 200) {
                                    wx.showToast({
                                       title: res.data.message,
                                       icon: 'none',
                                    })
                                    return;
                                 }
                              }
                           });

                        },

                     })
                  }
               }
            })

         }
      })


   },

小结

以上就是小程序登录获取用户信息，已经授权手机号的流程和注意事项，这里我一直提及的有几个重点，
都是不容一被发现，却能导致程序失败的小问题，第一就是不管是获取用户信息，和授权手机号，必须
是登录成功以后。第二就是这两个事件必须绑定在标签上面。第三就是必须保证sessionKey
是登录以后拿到的最新的，不然授权手机号存在问题。谨记