微信登陆授权获取用户信息学习记录

wxml代码:

<view wx:if="{{canIUse}}" class=“mai”>

  <button class=“but”  open-type=“getUserInfo” bindgetuserinfo=“bindGetUserInfo”>授权登录</button>

  <view class=“med”>-----------·-----------</view>

  <view class=“txt”>\t\t欢迎使用小程序，我们需要一些您公开的信息，包括微信昵称，头像等等，请放心，我们会妥善保管您的信息！</view>

</view>

<view wx:else>请升级微信版本</view>

js代码：

Page({

data: {

    canIUse: wx.canIUse(‘button.open-type.getUserInfo’)

  },

  /**

   * 生命周期函数–监听页面加载

   */

  onLoad: function (options) { //显示加载的图标

    wx.showLoading({

      title: ‘加载中’,

    })

    wx.login({

      success(res){

        if(res.code){

          // //发起网络请求

          // wx.request({

          //   url: ‘https://test.com/onLogin’,

          //   data:{

          //     code:res.code

          //   }

          // })

          wx.getSetting({

            success (res){

              if (res.authSetting[‘scope.userInfo’]) {

                // 已经授权，可以直接调用 getUserInfo 获取头像昵称

                wx.getUserInfo({

                  success: function(res) {

                    console.log(res.userInfo)

                    getApp().globalData.userInfo = res.userInfo

                  }

                })

              }

            }

          })

        }else {

          console.log(‘登陆失败’ + res.errMsg)

        }

      }

    })

     // 查看是否授权

 

    setTimeout(function () {

      wx.hideLoading()

    },2000)

  },

 

  bindGetUserInfo (e) {

    console.log(e.detail.userInfo)

  },

})

json代码：

{

  “usingComponents”: {},

  “navigationBarBackgroundColor”: “#F2F2F2”,

  “navigationBarTitleText”: “微信授权”,

  “navigationBarTextStyle”: “black”

}

wxss代码：

/* pages/load/load.wxss */

.mai{

  width: 80%;

  height: 300rpx;

  margin-top: 350rpx;

  margin-left: 10%;

  margin-right: 10%;

}

.but{

  width: 70%;

  height: 80rpx;

  background-color: #04be01;

  border-radius: 10rpx;

  align-content: center;

  text-align: center;

  margin-left: 15%;

  margin-right: 15%;

  color: white;

  font-size: 37rpx;

  font-weight: bold;

}

.txt{

  color: #8a8a8a;

  width: 92%;

  font-size: 32rpx;

  margin-top: 10rpx;

  margin: auto;

  font-weight: 10rpx;

}

.med{

  color: #8a8a8a;

  font-size: 40rpx;

  text-align: center;

  margin-top: 20rpx;

}