微信小程序填寫用戶頭像和昵稱實現(xiàn)方法淺析
更新時間：2023年02月09日 11:39:03 作者：李長庚
這篇文章主要介紹了微信小程序填寫用戶頭像和昵稱實現(xiàn)方法，我們使用小程序往往能碰到提示允許獲取用戶頭像昵稱，這種功能怎么實現(xiàn)呢？本篇文章帶你探索
開放能力調整公告
總體來說就是通過按鈕來授權獲取用戶基礎信息的能力都沒啦（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); //經自己服務器存儲后，將地址返回到客戶端。
},
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); //用戶輸入或者選擇的昵稱
},獲取昵稱需要注意的地方
用戶輸入或者選擇昵稱時，會異步對用戶輸入的內容進行安全監(jiān)測，若未通過安全監(jiān)測，微信將清空用戶輸入的內容，建議開發(fā)者通過 form 中form-type 為submit 的button 組件收集用戶輸入的內容。
到此這篇關于微信小程序填寫用戶頭像和昵稱實現(xiàn)方法淺析的文章就介紹到這了,更多相關小程序填寫用戶頭像和昵稱內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文將討論如何在JavaScript中處理 .onload 事件，我們將學習如何在上傳圖像后使用 JavaScript 創(chuàng)建警告框,需要的朋友可以參考下2023-07-07
JavaScript中return返回多個值的三個方法實現(xiàn)
本文主要介紹了JavaScript中return返回多個值的三個方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)打磚塊游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
JavaScript中的Array對象與其他編程語言中的數(shù)組一樣，是一組數(shù)據(jù)的集合。在JavaScript中，數(shù)組里面的數(shù)據(jù)可以是不同類型的，并具有用于執(zhí)行數(shù)組常見操作的方法，本文整理了一些常用的，需要的可以參考一下2022-10-10
微信JS-SDK自定義分享功能實例詳解【分享給朋友/分享到朋友圈】
這篇文章主要介紹了微信JS-SDK自定義分享功能,結合實例形式分析了基于JS-SDK接口實現(xiàn)的分享給朋友及分享到朋友圈等功能的相關配置文件與數(shù)據(jù)操作技巧,需要的朋友可以參考下2016-11-11
發(fā)現(xiàn)原來的方法還有是有幾個問題：首先Js代碼冗余，導航條上的Tab是用js實現(xiàn)跳轉而不是超鏈接，還有導航條本身用fixed定位，但沒有被設置為水平居中，而是在JS中更改left值使其居中2013-09-09
JavaScript實現(xiàn)簡易計算器功能的兩種方法
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易計算器功能的兩種方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Javascript原型鏈的原理,結合實例形式深入分析了JavaScript原型鏈的原理與使用技巧,需要的朋友可以參考下2016-01-01
利用js進行加解密是我們經常會遇到的一個功能，本文給大家介紹的是我目前見到的最全的個人js加解密功能頁面，分享出來供大家參考學習，需要的朋友們隨著小編來一起學習學習吧2007-12-12
JavaScript中var、let、const區(qū)別淺析
這篇文章主要介紹了JavaScript中var、let、const區(qū)別淺析,需要的朋友可以參考下2018-06-06