微信小程序授权获取头像昵称的最新形式——头像昵称填写

微信小程序授权用户信息,不知道有没有人像我一样,从wx.getUserInfowx.getUserProfile再到头像昵称填写获取用户头像昵称全部尝试了一遍,在这里插入图片描述怪就怪自己一开始没仔细看官方文档,没注意到小程序的官方公告,不多说了,整理一下最新调整的头像昵称填写这种用户信息授权的形式吧。

官方公告调整背景

在实践中发现有部分小程序,在用户刚打开小程序时就要求收集用户的微信昵称头像,或者在支付前等不合理路径上要求授权。如果用户拒绝授权,则无法使用小程序或相关功能。在已经获取用户的 openId 与 unionId 信息情况下,用户的微信昵称与头像并不是用户使用小程序的必要条件。为减少此类不合理的强迫授权情况,作出如下调整。
在这里插入图片描述
在这里插入图片描述

头像昵称填写效果

在这里插入图片描述在这里插入图片描述在这里插入图片描述

头像昵称填写具体实现

<!--index.wxml-->
<view data-weui-theme="{{theme}}">
  <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}"></image>
  </button> 
  <form catchsubmit="formSubmit">
    <view class="row">
      <view class="text1">昵称:</view>
        <input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称"/>
    </view>
    <button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit">提交</button>
  </form>
</view>
/* index.wxss  参考 */ 
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
  background-color: #fff;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.container {
  display: flex;
}
.row{
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   display: flex;
   align-items: center;
   height: 80rpx;
   padding-left: 20rpx;
}
.text1{
    flex: 2;
}
.weui-input{
    flex: 6;
}
// index.js
const app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
  data: {
    avatarUrl: defaultAvatarUrl,
    theme: wx.getSystemInfoSync().theme,
  },
  onLoad() {
    wx.onThemeChange((result) => {
      this.setData({
        theme: result.theme
      })
    })
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  },
  formSubmit(e){
      console.log('昵称:',e.detail.value.nickname)
  }
})

头像选择

需要将 button 组件 open-type 的值设置为 chooseAvatar,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
从基础库2.24.4版本起,若用户上传的图片未通过安全监测,不触发bindchooseavatar 事件。

昵称填写

需要将 input 组件 type 的值设置为 nickname,当用户在此 input 进行输入时,键盘上方会展示微信昵称。
从基础库2.24.4版本起,在onBlur事件触发时,微信将异步对用户输入的内容进行安全监测,若未通过安全监测,微信将清空用户输入的内容,建议开发者通过 form 中form-typesubmit的button 组件收集用户输入的内容。

注:

  1. input进行输入昵称时,只有真机演示时键盘上方才会展示微信昵称;
  2. 微信异步对用户输入内容进行安全检测,需要调用服务端接口msgSecCheck,具体使用见官网 文本内容安全识别
微信小程序开发中,获取用户头像昵称的方法已经发生了变化。以前常用的方法如wx.getUserInfo和wx.getUserProfile已经不再支持获取用户头像昵称的功能。现在,为了保护用户隐私和提高用户体验,微信小程序需要通过用户授权才能获取头像昵称等敏感信息。 目前,获取用户头像昵称的常用方法是通过使用button组件,并设置open-type属性为getUserProfile来获取用户的头像昵称。当用户点击这个button时,会弹出授权框,用户可以选择是否授权小程序获取头像昵称信息。一旦用户授权,就可以通过event.detail.userInfo获取到用户的头像昵称。 需要注意的是,为了保护用户隐私,微信小程序获取用户头像昵称的权限进行了限制。开发者需要在小程序管理后台进行相应的配置,包括设置业务域名和配置授权设置等。具体的配置步骤可以参考微信小程序的官方文档。 总结起来,微信小程序开发获取用户头像昵称的方法已经发生了变化,现在需要使用button组件并设置open-type属性为getUserProfile来获取用户授权,通过event.detail.userInfo来获取用户的头像昵称。但需要注意在小程序管理后台进行相应的配置以及保护用户隐私的要求。123 #### 引用[.reference_title] - *1* *2* [微信小程序获取用户头像昵称](https://blog.csdn.net/m0_61443432/article/details/130257744)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *3* [微信小程序授权获取头像昵称最新形式——头像昵称填写](https://blog.csdn.net/qq_38970408/article/details/127754307)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值