小程序最新标准受权登录流程+逻辑

小程序自上线以来，官方一直在调整API，因而也出现了一批被废弃的接口，作为程序员的我们，此时此刻千万不能为这不断的变化而感到头疼，应当与时俱进，不断的升级自己的知识储备和应用技能。

新旧比照：

旧的方法：旧方法wx.getUserInfo按照客户登录时，弹出需要受权的弹窗，客户点击受权后才能使用。

新方法：Open-data的灵活使用方法，不会让你直接取得客户信息，而是小程序点击登录按钮获取客户头像，就是使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取客户基本信息。

最终登录流程如下：（其实简单的说就是多了一个button 组件步骤）

写个demo

wxml

<!-- 需要使用 button 来受权登录 --><button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">受权登录</button><view wx:else>请更新微信版本</view>

js:

Page({  data: {    canIUse: wx.canIUse('button.open-type.getUserInfo')  },  onLoad: function () {    // 查看能否受权    wx.getSetting({      success(res) {        if (res.authSetting['scope.userInfo']) {          // 已经受权，可以直接调用 getUserInfo 获取头像昵称          wx.getUserInfo({            success: function (res) {              console.log(res.userInfo)            }          })        }      }    })  },  bindGetUserInfo(e) {    console.log(e.detail.userInfo)  }})

实现效果：取得客户受权的信息，头像和昵称

来一份默认的demo：(复制黏贴的~)
index.wxml

<!--index.wxml--><view class="container">  <view class="userinfo">    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>    <block wx:else>      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>      <text class="userinfo-nickname">{{userInfo.nickName}}</text>    </block>  </view>  <view class="usermotto">    <text class="user-motto">{{motto}}</text>  </view></view>

index.wxss

/**index.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items: center;}.userinfo-avatar {  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;}.userinfo-nickname {  color: #aaa;}.usermotto {  margin-top: 200px;}

index.js

//index.js//获取应用实例const app = getApp()Page({  data: {    motto: 'Hello World',    userInfo: {},    hasUserInfo: false,    canIUse: wx.canIUse('button.open-type.getUserInfo')  },  //事件解决函数  bindViewTap: function() {    wx.navigateTo({      url: '../logs/logs'    })  },  onLoad: function () {    if (app.globalData.userInfo) {      this.setData({        userInfo: app.globalData.userInfo,        hasUserInfo: true      })    } else if (this.data.canIUse){      // 因为 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回      // 所以此处加入 callback 以防止这种情况      app.userInfoReadyCallback = res => {        this.setData({          userInfo: res.userInfo,          hasUserInfo: true        })      }    } else {      // 在没有 open-type=getUserInfo 版本的兼容解决      wx.getUserInfo({        success: res => {          app.globalData.userInfo = res.userInfo          this.setData({            userInfo: res.userInfo,            hasUserInfo: true          })        }      })    }  },  getUserInfo: function(e) {    console.log(e)    app.globalData.userInfo = e.detail.userInfo    this.setData({      userInfo: e.detail.userInfo,      hasUserInfo: true    })  }})

附上wx.getUserInfo(Object object)文档：
https://developers.weixin.qq.com/miniprogram/dev/api/wx.getUserInfo.html

其实这些都不需要写代码的，新建一个普通的项目里面，都已经默认写好了哦。

原文作者：祈澈姑娘。 技术博客：https://www.songma.com/u/05f416aefbe1
90后前台妹子一枚，爱编程，爱经营，爱折腾。长期坚持总结工作中遇到的技术问题。

• 热门推荐：前台，Java，产品经理，微信小程序，Python等资源合集大放送