微信小程序獲取用戶頭像昵稱組件封裝實例(最新版)
一、前言
微信小程序?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ù)邏輯不會受到接口變更的影響。
兼容性
接下來說一下兼容性的問題。
公告中指出,頭像昵稱填寫能力僅在基礎(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)文章
javascript中的with語句學(xué)習筆記及用法
在本篇文章里小編給大家分享的是關(guān)于javascript中的with語句學(xué)習筆記及用法,有需要的朋友們可以學(xué)習下。2020-02-02JavaScript代碼實現(xiàn)春晚劉謙魔術(shù)的模擬程序
昨晚春晚上劉謙的兩個魔術(shù)表演都非常精彩,尤其是第二個魔術(shù),他演繹了經(jīng)典的約瑟夫環(huán)問題!約瑟夫環(huán)是一個經(jīng)典的數(shù)學(xué)問題,本文給出了完整的 JavaScript 代碼實現(xiàn),感興趣的同學(xué)可以自己動手實現(xiàn)一下2024-02-02Javascript類型系統(tǒng)之String字符串類型詳解
這篇文章主要介紹了Javascript類型系統(tǒng)之String字符串類型詳解的相關(guān)資料,需要的朋友可以參考下2016-06-06JavaScript-定時器0~9抽獎系統(tǒng)詳解(代碼)
這篇文章主要介紹了 JavaScript-定時器0~9抽獎系統(tǒng),通過代碼實例說明函數(shù)調(diào)用的整體操作,具體步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。2017-08-08