微信小程序填寫用戶頭像和昵稱實現(xiàn)方法淺析
開放能力調(diào)整公告
總體來說就是通過按鈕來授權(quán)獲取用戶基礎(chǔ)信息的能力都沒啦（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,
})
}
})適配頭像時需要注意的地方
此時獲取到的頭像路徑為本地路徑，雖然可以在頁面上顯示，但是并不能直接入庫使用，瀏覽器上是訪問不到的。需要上傳到我們自己的服務(wù)器，后面每次使用都從我們自己的服務(wù)器上取。 其實說白了就是之前頭像文件我們都是從微信服務(wù)器獲取的，現(xiàn)在需要去我們自己的服務(wù)器獲取了。
wx.uploadFile({
url: '我們自己的服務(wù)器地址', //僅為示例，非真實的接口地址
filePath: '圖片臨時路徑',
name: 'uploadFile', //自定義name
success(res) {
console.log('res', res); //經(jīng)自己服務(wù)器存儲后，將地址返回到客戶端。
},
fail(err) {
console.log('err', err);
},
complete(cp) {
console.log(cp);
}
})獲取昵稱
獲取頭像代碼，將input中的“type”屬性設(shè)置為‘nickname’，同時對"name"屬性設(shè)定值，點擊提交按鈕后根據(jù)設(shè)置的name值獲取對應(yīng)的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)容。
到此這篇關(guān)于微信小程序填寫用戶頭像和昵稱實現(xiàn)方法淺析的文章就介紹到這了,更多相關(guān)小程序填寫用戶頭像和昵稱內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文將討論如何在JavaScript中處理 .onload 事件，我們將學(xué)習(xí)如何在上傳圖像后使用 JavaScript 創(chuàng)建警告框,需要的朋友可以參考下2023-07-07
JavaScript中return返回多個值的三個方法實現(xiàn)
本文主要介紹了JavaScript中return返回多個值的三個方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧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自定義分享功能,結(jié)合實例形式分析了基于JS-SDK接口實現(xiàn)的分享給朋友及分享到朋友圈等功能的相關(guān)配置文件與數(shù)據(jù)操作技巧,需要的朋友可以參考下2016-11-11
JS 實現(xiàn)導(dǎo)航欄懸停效果(續(xù)2)
發(fā)現(xiàn)原來的方法還有是有幾個問題：首先Js代碼冗余，導(dǎo)航條上的Tab是用js實現(xiàn)跳轉(zhuǎn)而不是超鏈接，還有導(dǎo)航條本身用fixed定位，但沒有被設(shè)置為水平居中，而是在JS中更改left值使其居中2013-09-09
JavaScript實現(xiàn)簡易計算器功能的兩種方法
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易計算器功能的兩種方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Javascript原型鏈的原理,結(jié)合實例形式深入分析了JavaScript原型鏈的原理與使用技巧,需要的朋友可以參考下2016-01-01
利用js進行加解密是我們經(jīng)常會遇到的一個功能，本文給大家介紹的是我目前見到的最全的個人js加解密功能頁面，分享出來供大家參考學(xué)習(xí)，需要的朋友們隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2007-12-12
JavaScript中var、let、const區(qū)別淺析
這篇文章主要介紹了JavaScript中var、let、const區(qū)別淺析,需要的朋友可以參考下2018-06-06