微信小程序wx.getUserInfo接口獲取用戶信息失敗，新版SDK怎樣獲取用戶信息

一、簡述

在微信小程序的官方文檔中提到,調用wx.getUserInfo接口將能獲取小程序用戶的信息，接口返回的信息格式如下

{
  "nickName": "Band",
  "gender": 1,
  "language": "zh_CN",
  "city": "Guangzhou",
  "province": "Guangdong",
  "country": "CN",
  "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}

不過，你會發現調用這個接口並沒有返回用戶信息。逛論壇才知道，這個接口被拋棄了。哎！但是騰訊也提供了新的方式，以下演示獲取用戶信息的流程。

參考鏈接: https://developers.weixin.qq.com/community/develop/doc/000aee01f98fc0cbd4b6ce43b56c01

二、實現過程

1.使用 button 組件，並將 open-type 指定爲 getUserInfo 類型，用戶允許授權後，可獲取用戶基本信息。

<button open-type="getUserInfo" lang="zh_CN" bindtap="onGotUserInfo" bindgetuserinfo="bindGetUserInfo">獲取用戶信息</button>

屬性說明

• 1. open-type：通過不同屬性值，小程序會彈出一個不同的授權提示窗口，讓用戶選擇是否授權。我們要獲取用戶信息，所以值指定的是getUserInfo，更多屬性值可以參考微信小程序的button組件文檔
• 2. bindtap：綁定一個授權結果回調函數，在js文件中創建對應方法，詳細代碼如下

onGotUserInfo: function(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  }

點擊按鈕之後，彈出授權窗口，如下圖：

• 3. bindgetuserinfo：可以從bindgetuserinfo回調中獲取到用戶信息，在這裏我填寫的是bindGetUserInfo，要在js文件中創建對應的方法，詳細代碼如下

bindGetUserInfo: function(e) {
    console.log('回調成功')
    console.dir(e)
  }

上面回調方法中，我們打印返回的數據，結果如下截圖所示：

可以看到，在回調信息中，包含的微信用戶基本信息的鍵值對，如下示例：

userInfo:
avatarUrl: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL8G6eBq1K7sk3CiceZ1vbY9IHO4kmJWQyFcEPc9trIGADva7ricI1ic7Zia8eWYAy4LLJwueejXOwKcg/132"
city: ""
country: "中國"
gender: 1
language: "zh_CN"
nickName: "碧海藍天"
province: "貴州"

用戶第一次點擊按鈕時彈出授權窗口，授權之後將不再彈出，bindtap回調方法第二次執行也不會再有返回數據。因此可以使用bindgetuserinfo回調方法，獲取用戶信息，方便提交給業務服務器。

2.使用 open-data 展示用戶基本信息

open-data控件用於展示微信開放的數據。不過呢，這個控件只能顯示數據，在寫這篇博客的時候，微信是不支持讀取open-data上的數據的，不知道將來會不會支持！
詳細代碼如下

<view class="panel">
    <view>暱稱：
      <open-data type="userNickName" lang="zh_CN"></open-data>
    </view>
    <view>頭像：
      <open-data class="avatar" type="userAvatarUrl" lang="zh_CN"></open-data>
    </view>
    <view>性別：
      <open-data type="userGender" lang="zh_CN"></open-data>
    </view>
    <view>城市：
      <open-data type="userCity" lang="zh_CN"></open-data>
    </view>
    <view>省份：
      <open-data type="userProvince" lang="zh_CN"></open-data>
    </view>
    <view>國家：
      <open-data type="userCountry" lang="zh_CN"></open-data>
    </view>
    <view>語言：
      <open-data type="userLanguage" lang="zh_CN"></open-data>
    </view>
  </view>

運行項目後，看到效果如下圖：

在open-data標籤中，最關鍵的屬性是type,標誌開放數據類型。詳細說明可以參考微信小程序open-data的開放文檔

3.所有代碼

以下是此博客涉及的所有代碼

index.wxml

<!--index.wxml-->
<view class="container">
  <view class="panel">
    <button open-type="getUserInfo" lang="zh_CN" bindtap="onGotUserInfo" bindgetuserinfo="bindGetUserInfo">獲取用戶信息</button>
  </view>

  <view class="panel">
    <view>暱稱：
      <open-data type="userNickName" lang="zh_CN"></open-data>
    </view>
    <view>頭像：
      <open-data class="avatar" type="userAvatarUrl" lang="zh_CN"></open-data>
    </view>
    <view>性別：
      <open-data type="userGender" lang="zh_CN"></open-data>
    </view>
    <view>城市：
      <open-data type="userCity" lang="zh_CN"></open-data>
    </view>
    <view>省份：
      <open-data type="userProvince" lang="zh_CN"></open-data>
    </view>
    <view>國家：
      <open-data type="userCountry" lang="zh_CN"></open-data>
    </view>
    <view>語言：
      <open-data type="userLanguage" lang="zh_CN"></open-data>
    </view>
  </view>

</view>

index.wxss

/**index.wxss**/

.panel{
  margin-top: 20px;
}

index.js

//index.js
//獲取應用實例
const app = getApp()

Page({
  onGotUserInfo: function(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },

  bindGetUserInfo: function(e) {
    console.log('回調成功')
    console.dir(e)
  },
})

三、總結

總之，微信小程序不再開放wx.getUserInfo接口，也就是說，我們要獲取用戶信息，需要引導用戶手動點擊一個button按鈕彈出授權窗口，讓用戶手動授權，開發者才能成功獲取用戶信息。也許這樣對開發者來說麻煩了點，不過，如果以用戶的角度來看，這樣確實比較安全。

管它呢，它是騰訊它說了算！