前言:
自从微信官方把获取用户昵称与头像的功能改动以后,给我们开发和用户的操作又增加了很多负担,但是没办法,只能使用最新的使用方法了。
小程序用户头像昵称获取规则调整公告
新版实现效果:
注意,真机的效果,昵称会有所不同
新版使用步骤:
1、index.wxml
获取头像核心代码:文章来源:https://www.toymoban.com/news/detail-515796.html
open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"
<view class="user-content">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"
style="border-radius: {{needBorderRadius?'6px':'0'}};"
>
<image wx:if="{{avatarUrl}}" class="avatar-img" mode="aspectFill" src="{{avatarUrl}}"></image>
<image wx:else class="default-avatar-img" mode="widthFix" src="{{defaultAvatarUrl}}"></image>
</button>
<input type="nickname" class="nickname-input" placeholder="请输入昵称"
adjust-position="{{false}}"
bindfocus="focusNickNameInput"
bindblur="blurNickNameInput"
bindchange="changeNickeNameInput"
bindinput="inputNickName"
model:value="{{nickName}}"
bindconfirm="confirmNickNameInput"
bindkeyboardheightchange="bindkeyboardheightchange"
maxlength="10"
style="border-radius: {{needBorderRadius?'8px':'0'}};"
/>
</view>
<view>
<button class="user-confirm-btn user-confirm-btn--{{canSaveUser?'enabled':'disabled'}}"
catchtap="handleInputAvatarNameAfter"
style="border-radius: {{needBorderRadius?'50rpx':'0'}};"
>
授权头像和昵称
</button>
</view>
2、index.js
defaultBorderAvatar.png文章来源地址https://www.toymoban.com/news/detail-515796.html
data: {
avatarUrl:"",//头像
defaultAvatarUrl:"/images/defaultBorderAvatar.png",
canSaveUser:false,
nickName:'' //昵称
}
// 选择头像
onChooseAvatar(e){
const { avatarUrl } = e.detail
promisify(wx.getFileSystemManager().getFileInfo)({ filePath: avatarUrl })
.then((fileInfo) => {
let fileSize = fileInfo.size;
// 文件大小 kb
fileSize = Math.ceil(fileSize / 1024).toFixed(2);
if(fileSize > (1024 * 5)){
wx.showToast({
title: '头像大小请不要超过5M',
icon:"none"
})
return Promise.reject();
}
return fileInfo;
}).then(()=>{
console.log("------成功设置头像------");
this.setData({
avatarUrl,
})
this.observerCanSaveUser();
}).catch(err=>{
console.log(err);
})
},
// 昵称进入焦点
focusNickNameInput(e){},
// 昵称输入框失焦点
blurNickNameInput(e){},
//实际只有这个方法用到了
changeNickeNameInput(e){
this.observerCanSaveUser();
},
inputNickName(e){},
// 确认昵称
confirmNickNameInput(){},
// 昵称输入框 软件盘高度改变
bindkeyboardheightchange(e){
if(this.data.preInputBottom && this.data.inputBottom&& this.data.preInputBottom === this.data.inputBottom){
return;
}
if(!this.data.inputBottom){
this.setData({inputBottom:e.detail.height})
}else{
this.setData({
preInputBottom: this.data.inputBottom,
inputBottom:e.detail.height
})
}
},
observerCanSaveUser(){
if(this.data.nickName && String(this.data.nickName).trim() && this.data.avatarUrl){
this.setData({
canSaveUser:true
})
}else{
this.setData({
canSaveUser:false
})
}
},
// 头像、昵称同时输入完后才保存,保存成功再关闭
handleInputAvatarNameAfter(){
//使用 wx.uploadFile 方法,把头像上传并保存起来
...
}
3、index.wxss
.user-content{
display: flex;
flex-direction: column;
align-items: center;
}
.avatar-wrapper {
height: 112rpx;
width: 112rpx;
margin: 0;
background-color: 0;
background: 0;
padding:0;
border-radius: 0;
border-radius: 0;
border: 0;
overflow: hidden;
}
.avatar-wrapper::after{ border: none; }
.avatar-wrapper image{
width: 100%;
height: 100%;
}
.container {
display: flex;
}
.nickname-input {
width: 608rpx;
height: 108rpx;
line-height: 112rpx;
border-radius: 0;
opacity: 1;
box-sizing: border-box;
font-size: 34rpx;
font-weight: 400;
color: #000000;
text-align: center;
margin-bottom: 24rpx;
}
.user-confirm-btn{
width: 608rpx;
height: 72rpx;
line-height: 72rpx;
background: #B2B2B2;
border-radius: 0px 0px 0px 0px;
opacity: 1;
border-radius: 0;
border: 0;
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
}
.user-confirm-btn::after{ border: none; }
.user-confirm-btn--disabled{
background: #B2B2B2;
}
.user-confirm-btn--enabled{
background: #000000;
}
.close-image{
width: 34rpx;
height: 34rpx;
position: absolute;
top: 40rpx;
right: 40rpx;
}
到了这里,关于小程序中新版本的获取用户头像与昵称:bind:chooseavatar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!