本文已参与「新人创作礼」活动，一起开启掘金创作之路。

小程序登录获取用户信息

本篇记录讲解

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

小程序登录

wxml注意事项：

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

app.js登录代码如下：

`//封装成方法，方便在小程序其他页面调用

  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部分：

<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
  })
  //获取用户信息，只要根据自己需求单独存起来就好了。

}, `

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