欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序獲取用戶頭像昵稱組件封裝實例(最新版)

 更新時間:2022年12月02日 09:51:19   作者:super--Yang  
我們在進行小程序開發(fā)的時候,往往需要獲取微信用戶的部分個人信息,常見的有用戶頭像,昵稱等,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶頭像昵稱組件封裝的相關(guān)資料,需要的朋友可以參考下

一、前言

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

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

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

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

先看看效果:

二、組件使用

下載組件

先把組件下載下來。

組件下載鏈接

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

組件導(dǎo)入

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

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

引用組件

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

使用組件

wxml

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

js

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

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

注意事項

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

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

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

兼容性

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

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

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

示例代碼:

  /**
   * 頭像昵稱點擊監(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ā)的時間比較匆忙,代碼寫得并不是很好,彈窗式的也不一定滿足全部項目的需求,因此大家可以根據(jù)自己需求,自己開發(fā)一個組件或者直接寫在頁面中,如果邏輯代碼不會編寫,可以參考我的組件。

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

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

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

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

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

相關(guān)文章

  • 在微信小程序中使用vant的方法

    在微信小程序中使用vant的方法

    這篇文章主要介紹了在微信小程序中使用vant的方法,文中通過示例代碼介紹的非常詳細,對大家學(xué)習或者使用小程序具有一定的參考學(xué)習價值,需要的朋友們下面來一起學(xué)習學(xué)習吧
    2019-06-06
  • javascript中數(shù)組中求最大值示例代碼

    javascript中數(shù)組中求最大值示例代碼

    數(shù)組如何求最大值,想必很多的朋友都不會吧,本文為大家介紹下javascript中數(shù)組是如何求最大值的,感興趣的朋友不要錯過
    2013-12-12
  • 純js模仿windows系統(tǒng)日歷

    純js模仿windows系統(tǒng)日歷

    本文主要介紹了純js模仿windows系統(tǒng)日歷的思路與實現(xiàn)方法。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • javascript中的with語句學(xué)習筆記及用法

    javascript中的with語句學(xué)習筆記及用法

    在本篇文章里小編給大家分享的是關(guān)于javascript中的with語句學(xué)習筆記及用法,有需要的朋友們可以學(xué)習下。
    2020-02-02
  • JavaScript代碼實現(xiàn)春晚劉謙魔術(shù)的模擬程序

    JavaScript代碼實現(xiàn)春晚劉謙魔術(shù)的模擬程序

    昨晚春晚上劉謙的兩個魔術(shù)表演都非常精彩,尤其是第二個魔術(shù),他演繹了經(jīng)典的約瑟夫環(huán)問題!約瑟夫環(huán)是一個經(jīng)典的數(shù)學(xué)問題,本文給出了完整的 JavaScript 代碼實現(xiàn),感興趣的同學(xué)可以自己動手實現(xiàn)一下
    2024-02-02
  • JSONP跨域的原理解析及其實現(xiàn)介紹

    JSONP跨域的原理解析及其實現(xiàn)介紹

    JSONP跨域GET請求是一個常用的解決方案,下面我們來看一下JSONP跨域是如何實現(xiàn)的,并且探討下JSONP跨域的原理
    2014-03-03
  • JavaScript禁用右鍵單擊優(yōu)缺點分析

    JavaScript禁用右鍵單擊優(yōu)缺點分析

    在本篇文章里小編給大家分享了關(guān)于JavaScript禁用右鍵單擊優(yōu)缺點分析,有需要的朋友們學(xué)習下。
    2019-01-01
  • Javascript類型系統(tǒng)之String字符串類型詳解

    Javascript類型系統(tǒng)之String字符串類型詳解

    這篇文章主要介紹了Javascript類型系統(tǒng)之String字符串類型詳解的相關(guān)資料,需要的朋友可以參考下
    2016-06-06
  • 非html5實現(xiàn)js版彈球游戲示例代碼

    非html5實現(xiàn)js版彈球游戲示例代碼

    彈球游戲,一般都是使用html5來實現(xiàn)的,其實不然,使用js也可以實現(xiàn)類似的效果,下面有個不錯的示例,感興趣的朋友可以參考下,希望對大家有所幫助
    2013-09-09
  • JavaScript-定時器0~9抽獎系統(tǒng)詳解(代碼)

    JavaScript-定時器0~9抽獎系統(tǒng)詳解(代碼)

    這篇文章主要介紹了 JavaScript-定時器0~9抽獎系統(tǒng),通過代碼實例說明函數(shù)調(diào)用的整體操作,具體步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。
    2017-08-08

最新評論