一、前言

微信小程序?qū)⒃?022年11月08日對獲取用戶頭像昵稱信息的API再一次進(jìn)行改動(dòng)，這次的改動(dòng)比較大。

更多詳情查看公告：公告直達(dá)鏈接

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

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

先看看效果：

二、組件使用

下載組件

先把組件下載下來。

組件下載鏈接

組件有點(diǎn)大，27K。是因?yàn)橛惺褂脠D片的緣故，對代碼包大小比較緊張的項(xiàng)目，建議將圖片去掉或者使用字體圖標(biāo)代替，我這就不做處理了。

組件導(dǎo)入

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

文件目目錄結(jié)構(gòu)：

引用組件

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

使用組件

wxml

當(dāng)變量：showAvaModal為true時(shí)，彈窗便會(huì)彈出，因此只需要控制這個(gè)變量即可。

js

綁定回調(diào)函數(shù)：getAvaNickData()，當(dāng)用戶點(diǎn)擊彈窗的設(shè)置按鈕時(shí)，便會(huì)將頭像本地地址以及昵稱返回，接下在再接入正常的業(yè)務(wù)流程即可。

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

注意事項(xiàng)

接口更改后，返回的頭像地址將是本地的臨時(shí)地址，因此不能再像以前一樣，直接存儲(chǔ)返回來的頭像網(wǎng)絡(luò)地址。需要將臨時(shí)的頭像地址上傳至云存儲(chǔ)或者服務(wù)器中，然后將返回的網(wǎng)絡(luò)地址存儲(chǔ)至數(shù)據(jù)庫。

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

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

兼容性

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

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

這樣一來，就需要對兩種接口依賴的基礎(chǔ)庫版本做一個(gè)判斷，2.21.2以上的使用自定義的彈窗組件來獲取（設(shè)置）用戶昵稱頭像，其余的使用舊接口。

示例代碼：

  /**
   * 頭像昵稱點(diǎn)擊監(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
}

四、結(jié)語

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

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

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

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

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

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

最新評論