微信小程序新的授权方式，获取用户信息

2019独角兽企业重金招聘Python工程师标准>>>

微信小程序新的授权方式，获取用户信息

摘要：小程序的获取用户接口改了，把以前自动弹窗改成了要主动去触发弹窗，虽然是改善了用户体验，但多了一步引导用户去授权。已经上线的不会影响，再次上线就影响了，所以记录一下过程。

流程：

一、wxml页面端：（主要是一个授权类型的按钮)

<view style='text-align: center; padding: 40rpx;' wx:if="{{sign}}">
  <image src='../../images/logo.png' mode='widthFix'></image>
</view>

<view style='padding: 20rpx;' wx:if="{{sign}}">
  <button type="primary" wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" hover-class="other-button-hover">授权应用</button>
  <view wx:else>请升级微信版本</view>
</view>

二、wxss文件

image {
  width: 200rpx; 
  height: 200rpx;
}

三、js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    sign:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this
    // 查看是否授权
    var token = wx.getStorageSync('token')
    if (token == '' || token == undefined) {
      wx.getSetting({
        success: function (res) {
          if (res.authSetting['scope.userInfo']) {
            // 已经授权，可以直接调用 getUserInfo 获取头像昵称
            that.bindGetUserInfo()
          } else {
            that.setData({
              sign: true
            })
          }
        }
      })
    }else{
    }
  },

 /**
  * 获取用户消息
  */
  bindGetUserInfo: function (e) {
    var that = this
      // 调用登录接口
      wx.getUserInfo({
        success: function (res) {
          var arr = JSON.parse(res.rawData)
          var nickname = arr.nickName
          wx.login({
            success: function (res) {
              var code = res.code
            }
          })
        }
      })
  }

})

检查如果已经获取过用户信息了就直接跳到业务页面，未授权就获取权限

注意：如果只需要获取用户昵称和头像就不用去授权了，这一点是挺好的，只需要使用小程序提供的组件

wxml

  <view class="userinfo-lu">
  <view class="userinfo-avatar-lu">
    <open-data  type="userAvatarUrl"></open-data>
  </view>
    <open-data type="userNickName"></open-data>
  </view>

css

.userinfo-lu {
  position: relative;
  width: 750rpx;
  height: 320rpx;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  margin-bottom: 20rpx;
}
 
.userinfo-avatar-lu {
  overflow:hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  margin-top: 50rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
 
.userinfo-lu text {
  font-size: 14px;
  background-color: #c0c0c0;
  border-radius:40%;
}

 

转载于:https://my.oschina.net/luqiuren666/blog/1929523