小程式自上線以來，官方一直在調整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.jianshu.com/u/05f416aefbe1
90後前端妹子一枚，愛程式設計，愛運營，愛折騰。長期堅持總結工作中遇到的技術問題。

• 關注「程式設計微刊」公眾號 ，在微信後臺回覆「領取資源」，獲取IT資源200G乾貨大全。