一、前言

微信小程序將在2022年11月08日對獲取用戶頭像昵稱信息的API再一次進行改動，這次的改動比較大。

更多詳情查看公告：公告直達鏈接

我的項目比較多，而且大部分都是只需要獲取用戶的頭像以及昵稱，并不需要像官方的“最佳實踐案例”那樣，還需要用戶設置其他信息。因此自己進行了一個組件封裝，以彈窗形式讓用戶授權或設置頭像以及昵稱。

博客中也會淺談一下該如何對新舊接口進行業(yè)務邏輯的開發(fā)，讓兼容性更強。

先看看效果：

二、組件使用

下載組件

先把組件下載下來。

組件下載鏈接

組件有點大，27K。是因為有使用圖片的緣故，對代碼包大小比較緊張的項目，建議將圖片去掉或者使用字體圖標代替，我這就不做處理了。

組件導入

下載壓縮包后，解壓，將組件直接copy進小程序項目的components目錄中，如果沒有，自己看著下面的文件結構創(chuàng)建一個。

文件目目錄結構：

引用組件

在需要使用的頁面.json文件中引入組件。

使用組件

wxml

當變量：showAvaModal為true時，彈窗便會彈出，因此只需要控制這個變量即可。

js

綁定回調函數：getAvaNickData()，當用戶點擊彈窗的設置按鈕時，便會將頭像本地地址以及昵稱返回，接下在再接入正常的業(yè)務流程即可。

三、淺談業(yè)務邏輯設置

注意事項

接口更改后，返回的頭像地址將是本地的臨時地址，因此不能再像以前一樣，直接存儲返回來的頭像網絡地址。需要將臨時的頭像地址上傳至云存儲或者服務器中，然后將返回的網絡地址存儲至數據庫。

只需要處理好這一步，其余的業(yè)務邏輯不會受到接口變更的影響。

云開發(fā)圖片以及文件上傳教程博客

兼容性

接下來說一下兼容性的問題。

公告中指出，頭像昵稱填寫能力僅在基礎庫2.21.2以上的版本中才支持，而2.10.4-2.21.0支持舊版接口能力。（2.9.5以下的不說了，版本很舊了而且兼容性處理都一樣做法。）

這樣一來，就需要對兩種接口依賴的基礎庫版本做一個判斷，2.21.2以上的使用自定義的彈窗組件來獲?。ㄔO置）用戶昵稱頭像，其余的使用舊接口。

示例代碼：

  /**
   * 頭像昵稱點擊監(jiān)聽
   */
  async setAvatarTap() {
    const {SDKVersion} = wx.getSystemInfoSync()
    // 判斷是否支持getUserProfile()獲取頭像昵稱
    const compareRes = this.compareVersion(SDKVersion, "2.21.2")
    // 不支持
    if (compareRes !== -1) {
      console.log("不支持getUserProfile()獲取頭像")
      // 彈出獲取用戶頭像昵稱彈窗組件
      this.setData({
        showAvaModal: true
      })
      return
    }
    // 支持
	console.log("支持getUserProfile()獲取頭像")
  },

/**
 * 版本比較
 * v1 >= v2 返回 0或1 否則 -1
 * @param {String} v1
 * @param {String} v2 
 */
 compareVersion (v1, v2) {
  v1 = v1.split('.')
  v2 = v2.split('.')
  const len = Math.max(v1.length, v2.length)

  while (v1.length < len) {
    v1.push('0')
  }
  while (v2.length < len) {
    v2.push('0')
  }

  for (let i = 0; i < len; i++) {
    const num1 = parseInt(v1[i])
    const num2 = parseInt(v2[i])

    if (num1 > num2) {
      return 1
    } else if (num1 < num2) {
      return -1
    }
  }

  return 0
}

四、結語

組件開發(fā)的時間比較匆忙，代碼寫得并不是很好，彈窗式的也不一定滿足全部項目的需求，因此大家可以根據自己需求，自己開發(fā)一個組件或者直接寫在頁面中，如果邏輯代碼不會編寫，可以參考我的組件。

最后來一下常規(guī)結語：

實際開發(fā)中的其他邏輯就不寫了。需要同學們自己去考慮異常情況處理等問題啦。

有任何疑問可以在評論區(qū)留下。我每天都會進行回復，私聊不回。（為了刷積分）

以上均是本人開發(fā)過程中的一些經驗總結與領悟，如果有什么不正確的地方，希望大佬們評論區(qū)斧正。

到此這篇關于微信小程序獲取用戶頭像昵稱組件封裝的文章就介紹到這了,更多相關微信小程序獲取用戶頭像昵稱組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論