小程序中新版本的获取用户头像与昵称:bind:chooseavatar

这篇具有很好参考价值的文章主要介绍了小程序中新版本的获取用户头像与昵称:bind:chooseavatar。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:

        自从微信官方把获取用户昵称与头像的功能改动以后,给我们开发和用户的操作又增加了很多负担,但是没办法,只能使用最新的使用方法了。

小程序用户头像昵称获取规则调整公告

新版实现效果:

注意,真机的效果,昵称会有所不同

wx.uploadfile获取头像并上传,小程序,小程序

 

新版使用步骤:

1、index.wxml

获取头像核心代码:

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

wx.uploadfile获取头像并上传,小程序,小程序   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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • taro小程序用户头像昵称获取

    微信发布《小程序用户头像昵称获取规则调整公告》之后,无法再使用 getUserProfile 获取用户头像和昵称,因此小程序官方提供了头像昵称填写功能来完善个人资料。 对button添加 open-type=\\\"chooseAvatar\\\" bind:chooseavatar=\\\"onChooseAvatar\\\" 获取头像 对input添加 type=\\\"nickname\\\" 获取昵称 新增一个

    2024年02月15日
    浏览(29)
  • 微信小程序获取用户头像昵称

    微信小程序是一种基于微信开发平台的轻应用,用户可以通过微信扫码、搜索等方式进入小程序并使用。在小程序中,获取用户昵称和头像是非常常见的需求,因为这些信息可以用来个性化展示内容,提高用户体验。以下是获取用户头像昵称的传统方法: 在小程序中,可以通

    2024年02月07日
    浏览(61)
  • 小程序用户头像昵称获取不到解决办法

           1.  根据官方要求,不会要求强制性授权,头像和昵称也将被收回,给的是统一的头像和昵称,需要我们调用接口去获取微信头像和昵称。           2. 通过原生的标签调用来获取微信头像和微信昵称。 注意:这里的标签不能够修改,修改会导致头像回显问题和昵

    2024年02月11日
    浏览(43)
  • 微信小程序如何获取用户头像昵称

        微信小程序登录用户头像昵称已经不支持支持获取,因为用户的scope.userInfo权限已经回收,可以使用昵称头像填写进行完善用户信息,按照官方推荐会显示用户在微信的头像和昵称,本文介绍一下实现方案.最终实现效果:修改头像会默认显示微信头像,修改昵称时会默认显示

    2024年02月11日
    浏览(67)
  • 微信小程序:获取用户信息(昵称和头像)

    微信小程序获取用户信息的接口几经变更,建议直接使用方式四: wx.getUserProfile 获取 组件功能调整为优化用户体验,平台将于2022年2月21日24时起回收通过展示个人信息的能力。 如有使用该技术服务,请开发者及时对小程序进行调整,避免影响服务流程。查看详情: https://de

    2023年04月08日
    浏览(55)
  • uniapp中微信小程序获取用户头像昵称

    关于小程序用户头像昵称获取规则调整的公告 意思就是说 从 2022 年 10 月 25 日 24 时后 wx.getUserProfile 获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户” 最新:用户昵称,头像获取规则 onChooseAvatar 方法必须使用 this.avatarUrl = \\\'data:image/jpeg;base64,\\\' + wx.getFileS

    2024年02月13日
    浏览(58)
  • uniapp 微信小程序 获取用户头像和昵称

    自2022年10月25日后,小程序  wx.getUserProfile 接口  被收回,通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户”。如需获取用户头像昵称,可以手动获取,具体步骤👉「头像昵称填写能力」  ✍GitHub完整代码地址👉: https://github.com/c

    2024年02月08日
    浏览(54)
  • 微信小程序获取用户头像和昵称的代码

    以下是微信小程序获取用户头像和昵称的代码示例: 获取用户信息授权 首先,需要向用户请求授权获取其头像和昵称。可以通过调用 wx.getUserProfile 方法来获取用户信息,该方法会弹出授权窗口,用户可以选择是否授权。 显示用户头像和昵称 获取用户头像和昵称后,可以将

    2024年02月16日
    浏览(42)
  • 如何在小程序中获取用户昵称、电话号,头像

    一、如何获取昵称(获取微信昵称)以Taro框架为例 Taro框架中的组件Input的一个属性,type属性的值有一个nickname. 如果要拿到input的值,是要value结合onChange事件。 二、获取手机号 通过Button组件的属性来获取。 1、Button组件的open-type属性,当值为getPhoneNumber时进行用户授权。(手

    2024年02月04日
    浏览(67)
  • 微信小程序获取用户头像和昵称完美解决方法(最新方法)

    自 2022 年 10 月 25 日 24 时后,用户头像昵称获取规则将进行如下调整 从基础库 2.21.2 开始支持 当小程序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力快速完善。 根据相关法律法规,为确保信息安全,由用户上传的图片、昵称等信息微信侧将进行安全检

    2024年02月08日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包