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

微信小程序授权用户信息，不知道有没有人像我一样，从wx.getUserInfo到wx.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-type 为submit的button 组件收集用户输入的内容。

注：

input进行输入昵称时，只有真机演示时键盘上方才会展示微信昵称；
微信异步对用户输入内容进行安全检测，需要调用服务端接口msgSecCheck，具体使用见官网文本内容安全识别

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

微信小程序授权获取用户信息
微信小程序授权获取用户信息小程序昵称突然变成了"微信用户",头像也不显示, <!-- 近期很多小伙伴通过该方法获取头像和昵称,代码也没有做改变,突然就变成了下面这样子 - ...
微信小程序授权获取用户信息和手机号码
微信小程序授权获取用户信息和手机号码 1.微信官方文档登录:https://developers.weixin.qq.com/miniprogram/dev/framework/open-abili ...
Java-(二)微信小程序授权获取用户信息和手机号码
第一篇我们已经知道了微信小程序怎么授权登录获取用户信息. openId 和 unionId .下面将高速告诉大家,微信小程序如何授权获取用户信息和手机号码. 微信官方文档:https://develo ...
微信小程序授权获取手机号
这几天写了一个微信小程序的项目,有个需求通过授权获取手机号和appid,废话少说.让我来实现一下具体的功能,地址在下方 https://developers.weixin.qq.com/minipro ...
微信小程序授权获取用户当前经纬度位置并转换为具体城市
每日一句激励人心的鸡汤: 认真阅读接口文档, 认真阅读接口文档, 认真阅读接口文档. 微信小程序获取用户当前经纬度位置 getLocation() API文档传送门,查看文档后 ...
2023年微信小程序授权获取头像最新形式——头像昵称填写
官方公告调整背景小程序用户头像昵称获取规则调整公告在实践中发现有部分小程序,在用户刚打开小程序时就要求收集用户的微信昵称头像,或者在支付前等不合理路径上要求授权.如果用户拒绝授权,则无法使用小程序 ...
uniapp微信小程序授权获取用户信息封装
根据平台公告信息,2022年底wx.getUserProfile 与 wx.getUserInfo 接口被回收.新的小程序不能再授权获取头像和昵称:可以通过wx.login 接口直接获取用户的 ope ...
uniapp 微信小程序授权获取手机并绑定登录
检查是否已登录 onLoad(option) {//检查用户是否已授权登录this.checkLogin();}, //检查用户是否登录checkLogin() {let token = wx.get ...
uniapp 微信小程序 getPhoneNumber 获取手机号提示 appid没有权限
appid没有权限问题出现原因,当前小程序账号没有进行"微信认证" 登录微信小程序后台,可以查看到当前小程序的基本信息. 微信小程序授权获取手机号接口因为需要用户主动触发才能发 ...

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

官方公告调整背景

头像昵称填写效果

头像昵称填写具体实现

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

最新文章

热门文章