摘要

因為獲取用户信息的接口 wx.getUserInfo 存在濫用，使用不規範等原因，微信官方已經將這個接口權限回收，改為用户信息填寫，即引導用户主動填寫微信暱稱和上傳頭像。這種做法確實是麻煩了點。

但是微信小程序插件，還是可以使用 wx.getUserInfo 接口的，我們可以開發一個插件，通過插件調用這個接口，獲得用户暱稱和頭像，然後將用户暱稱和頭像保存下來即可。

接口文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/pl...

文檔説明

用户信息功能頁

用户信息功能頁用於幫助插件獲取用户信息，包括 openid 和暱稱等，相當於 wx.login 和 wx.getUserInfo 的功能。

在基礎庫版本 2.3.1 前，用户信息功能頁是插件中唯一的獲取 code 和用户信息的方式；

自基礎庫版本 2.3.1 起，用户在該功能頁中進行過授權後，插件可以直接調用 wx.login 和 wx.getUserInfo：

授權是以【用户 + 小程序 + 插件】為維度進行授權的，即同一個用户在不同小程序中使用同一個插件，或同一個小程序中使用不同插件，都需要單獨進行授權自基礎庫版本 2.6.3 起，可以使用 wx.getSetting 來查詢用户是否授權過，另外，在滿足以下任一條件時，插件可以直接 wx.login

1. 使用插件的小程序與插件擁有相同的 AppId
2. 使用插件的小程序與插件綁定了同一個 微信開放平台 賬號，且使用插件的小程序與插件均與開放平台賬號為同主體或關聯主體
3. 不滿足以上條件時，wx.login 和 wx.getUserInfo 將返回失敗。

開發

在開發之前，你需要申請一個小程序插件。

然後使用官方示例代碼，就可以簡單使用這個插件。

代碼也是非常簡單的，一個是小程序頁面，另一個是插件頁面。

示例代碼

<!--plugin/components/hello-component.wxml-->
  <functional-page-navigator
    name="loginAndGetUserInfo"
    args="{{ args }}"
    version="develop"
    bind:success="loginSuccess"
    bind:fail="loginFail"
  >
    <button class="login">登錄到插件</button>
  </functional-page-navigator>

// plugin/components/hello-component.js
Component({
  properties: {},
  data: {
    args: {
      withCredentials: true,
      lang: 'zh_CN'
    }
  },
  methods: {
    loginSuccess: function (res) {
      console.log(res.detail);
    },
    loginFail: function (res) {
      console.log(res);
    }
  }
});

然後在小程序的頁面json文件配置這個插件。

app.json還需要加入：

"functionalPages": {
    "independent": true
},

在WXML文件引入這個組件。

預覽

因為index.wxml是引入插件的組件，直接就顯示 plugin/components/login/login.wxml 的內容了。

點擊授權登錄，就會跳轉到官方的【用户信息功能頁】插件，這個插件頁面是無法修改樣式的。

點擊【允許使用】就會獲取到用户的暱稱和頭像。

其中 res.detail.userInfo.avatarUrl 就是頭像地址，res.detail.userInfo.nickName 就是微信暱稱，獲取這兩個之後，可以自己進一步處理。

作者

TANKING