微信小程序填寫用戶頭像和昵稱實現(xiàn)方法淺析
更新時間：2023年02月09日 11:39:03 作者：李長庚
這篇文章主要介紹了微信小程序填寫用戶頭像和昵稱實現(xiàn)方法，我們使用小程序往往能碰到提示允許獲取用戶頭像昵稱，這種功能怎么實現(xiàn)呢？本篇文章帶你探索
開放能力調(diào)整公告
總體來說就是通過按鈕來授權獲取用戶基礎信息的能力都沒啦（wx.getUserProfile，wx.getUserInfo都不行了），都要使用新版本的 【頭像昵稱填寫能力】啦。
獲取頭像
獲取頭像代碼
wxxl部分
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarUrl}}"></image>
</button> js部分
Page({
data: {
avatarUrl: defaultAvatarUrl,
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail //獲取圖片臨時路徑
this.setData({
avatarUrl,
})
}
})適配頭像時需要注意的地方
此時獲取到的頭像路徑為本地路徑，雖然可以在頁面上顯示，但是并不能直接入庫使用，瀏覽器上是訪問不到的。需要上傳到我們自己的服務器，后面每次使用都從我們自己的服務器上取。 其實說白了就是之前頭像文件我們都是從微信服務器獲取的，現(xiàn)在需要去我們自己的服務器獲取了。
wx.uploadFile({
url: '我們自己的服務器地址', //僅為示例，非真實的接口地址
filePath: '圖片臨時路徑',
name: 'uploadFile', //自定義name
success(res) {
console.log('res', res); //經(jīng)自己服務器存儲后，將地址返回到客戶端。
},
fail(err) {
console.log('err', err);
},
complete(cp) {
console.log(cp);
}
})獲取昵稱
獲取頭像代碼，將input中的“type”屬性設置為‘nickname’，同時對"name"屬性設定值，點擊提交按鈕后根據(jù)設置的name值獲取對應的value。
<form bindsubmit="getUserName"> <!--定義提交事件-->
<view class="cu-form-group">
<view class="title">昵稱：</view>
<input placeholder="請輸入昵稱" type="nickname" name="nickname" maxlength="32"></input>
</view>
<view class="up-bt">
<button form-type="submit" role="button" aria-disabled="false" class="save-bt cu-btn block bg-blue margin-tb-sm lg">更新資料</button>
</view>
</form>js部分
getUserName(e) {
console.log(e.detail.value.nickname); //用戶輸入或者選擇的昵稱
},獲取昵稱需要注意的地方
用戶輸入或者選擇昵稱時，會異步對用戶輸入的內(nèi)容進行安全監(jiān)測，若未通過安全監(jiān)測，微信將清空用戶輸入的內(nèi)容，建議開發(fā)者通過 form 中form-type 為submit 的button 組件收集用戶輸入的內(nèi)容。
到此這篇關于微信小程序填寫用戶頭像和昵稱實現(xiàn)方法淺析的文章就介紹到這了,更多相關小程序填寫用戶頭像和昵稱內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Promise對象可以理解為一次執(zhí)行的異步操作，使用promise對象之后可以使用一種鏈式調(diào)用的方式來組織代碼；讓代碼更加的直觀，下面這篇文章主要跟大家分享了讓大家徹底掌握es6 Promise的八段代碼，需要的朋友可以參考下。2017-07-07
javascript 正則表達式觸發(fā)函數(shù)進行高級替換
如果在正則表達式中定義了子匹配，那么參數(shù)的長度會隨著子匹配的個數(shù)改變，如果沒有定義子匹配，那么長度是固定的。2010-03-03
xml轉(zhuǎn)json的js代碼，需要的朋友可以參考下2012-08-08
微信小程序創(chuàng)建自定義全局函數(shù)以及其調(diào)用方法詳解
微信小程序有時需要函數(shù)里面調(diào)用函數(shù),下面這篇文章主要給大家介紹了關于微信小程序創(chuàng)建自定義全局函數(shù)以及其調(diào)用方法的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09
JavaScript數(shù)據(jù)結構常見面試問題整理
在JavaScript中,數(shù)據(jù)結構是指相互之間存在一種或多種特定關系的數(shù)據(jù)元素的集合,是帶有結構特性的數(shù)據(jù)元素的集合。常用的數(shù)據(jù)結構有:數(shù)組、列表、棧、隊列、鏈表、字典、集合等等2022-08-08
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)秒殺時鐘倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家詳細介紹了標準的js無縫滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
利用javaScript實現(xiàn)點擊輸入框彈出窗體選擇信息
這篇文章主要是對利用javaScript實現(xiàn)點擊輸入框彈出窗體選擇信息進的實例行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了原生js中ajax訪問的實例詳解的相關資料,希望通過本文大家能夠掌握理解這部分內(nèi)容，需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了ChatGPT?之?Fetch請求的內(nèi)容解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03