关键词：
小程序用户头像昵称获取规则调整公告
调整说明
自 2022 年 10 月 25 日 24 时后（以下统称 “生效期” ），用户头像昵称获取规则将进行如下调整：
- 自生效期起，小程序 wx.getUserProfile 接口将被收回：生效期后发布的小程序新版本，通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。
- 自生效期起，插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回：生效期后发布的插件新版本，通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的插件版本不受影响，但如果要进行版本更新则需要进行适配。通过 wx.login 与 wx.getUserInfo 接口获取 openId、unionId 能力不受影响。
- 「头像昵称填写能力」支持获取用户头像昵称：如业务需获取用户头像昵称，可以使用「头像昵称填写能力」（基础库 2.21.2 版本开始支持，覆盖iOS与安卓微信 8.0.16 以上版本），具体实践可见下方《最佳实践》。
- 小程序 wx.getUserProfile 与插件 wx.getUserInfo 接口兼容基础库 2.27.1 以下版本的头像昵称获取需求：对于来自低版本的基础库与微信客户端的访问，小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称，插件通过 wx.getUserInfo 接口将正常返回用户头像昵称，开发者可继续使用以上能力做向下兼容。
对于上述 3，wx.getUserProfile 接口、wx.getUserInfo 接口、头像昵称填写能力的基础库版本支持能力详细对比见下表：
以上是微信小程序对用户头像昵称更改的公告，从上文不能看出之前用到的wx.getUserProfile、wx.getUserInfo将被弃用，不在返回正确的用户昵称及头像信息。emm......完全看不懂为什么微信小程序总是揪着这个功能不放，一而再再而三的改动...
新Api介绍及实战
头像昵称填写
从基础库 2.21.2 开始支持。
需要将 button 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar，uniApp使用@chooseavatar事件回调获取到头像信息的临时路径。
项目实战以uniApp为例
<template>
<view class="containar">
<view class="avatarUrl">
<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
<image :src="avatarUrl" class="refreshIcon"></image>
</button>
</view>
<view class="nickname">
<text>昵称：</text>
<input type="nickname" class="weui-input" :value="nickName" @blur="bindblur"
placeholder="请输入昵称" @input="bindinput"/>
</view>
<view class="btn">
<view class="btn-sub" @click="onSubmit">保存</view>
</view>
</view>
</template>export default
data()
return
avatarUrl: '',
nickName: ''
;
,
onLoad(option) ,
methods:
bindblur(e)
this.nickName = e.detail.value; // 获取微信昵称
,
bindinput(e)
this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
,
onChooseavatar(e)
let self = this;
let
avatarUrl
= e.detail;
uni.showLoading(
title: '加载中'
);
uni.uploadFile(
url: '后台uploadFile接口',
filePath: avatarUrl,
name: 'file',
header:
token: '自己的token',
,
success: uploadFileRes =>
// 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
let data = JSON.parse(uploadFileRes.data);
if (data.code === 0)
this.avatarUrl = data.data;
,
fail: (error) =>
uni.showToast(
title: error,
duration: 2000
);
,
complete: () =>
uni.hideLoading();
);
,
onSubmit()
if(this.nickName === '')
uni.showToast(
icon: 'none',
title: '请输入昵称'
)
return false;
// 这里做自己公司的存储逻辑
;.containar
.avatarUrl
padding: 80rpx 0 40rpx;
background: #fff;
button
background: #fff;
line-height: 80rpx;
height: auto;
width: auto;
padding: 20rpx 30rpx;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
.refreshIcon
width: 160rpx;
height: 160rpx;
border-radius: 50%;
.jt
width: 14rpx;
height: 28rpx;
.nickname
background: #fff;
padding: 20rpx 30rpx 80rpx;
display: flex;
align-items: center;
justify-content: center;
.weui-input
padding-left: 60rpx;
.btn
width: 100%;
.btn-sub
width: 670rpx;
margin: 80rpx auto 0;
height: 90rpx;
background: #DF8585;
border-radius: 45rpx;
line-height: 90rpx;
text-align: center;
font-size: 36rpx;
color: #fff;
效果图：
这次分享就到这里了。希望能帮助到你。如果有需要做小程序的可以私信我哦。
uniapp微信小程序授权登录getuserinfo获取不到用户的昵称和头像
参考技术A但如今，却只能得到一个缺省的灰色头像，和nickname=“微信用户”，两个数据，其它的年龄以及地区等什么都没有，更别提授权弹出框了查看官网如下图才知道API更新了：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/... 查看详情
小程序微信小程序获取头像呢称2013年最新解决方案（已解决）
一、效果 二、wxml代码<!--点击头像获取头像--><viewstyle="margin-bottom:20px;text-align:center;">----点击头像获取logo----</view><viewclass="logo"><buttonstyle="width:100px;height:100px;"class= 查看详情
关于微信小程序获取头像和昵称
...态度，关于接口调用方法，也是一直在修改！open-type=“getUserInfo”在2021年4月13日停用wx.getUserInfo在2021年4月28日停用wx.getUserProfile在2022年11月8日停用但是如果你在接口停用前发布的，还可以正常使用！到目前... 查看详情
微信小程序：“我的”页面布局（一）：微信用户信息获取及ui
...透明的button，用户触发授权事件。在js中需要注意的是，open-type="getUserInfo"需要做老版本兼容，老版本通过wx.getUserInfo即可唤起授权页面，不需要添加button去触发详情见下一篇：微信小程序：“我的”页面布局（二）：可... 查看详情
小程序新版uniapp登录流程以及获取头像和昵称(代码片段)
...--><buttonclass="authorization"type="default"open-type="chooseAvatar"@chooseavatar="chooseavatar"v-if="isLogin==2">上传微信头像</button><!--获取用户名称-->< 查看详情
uniapp如何更新微信小程序登录接口
参考技术A第一步:替换原有的标签为普通标签,例如:获取头像昵称_诙?:在getUserInfo代码中调用wx.getUserProfile接口:getUserProfile(e)//推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户信息_⒁馐孪?_峄懊茉?session_key是对... 查看详情
关于微信小程序新版头像昵称api接口处理(代码片段)
...）。官方实例：<buttonclass="avatar-wrapper"open-type="chooseAvatar"bind:chooseavatar="onChooseAvatar"><imageclass="avatar"src="avatarUrl"></image></button><inputtype="nickname"class... 查看详情
微信小程序获取用户信息
...,此方法仅用于直接简单的展示用户信息。2、使用<buttonopen-type="getUserInfo">获取用户信息在用户未授权过的情况下调用此接口，将不再出现授权弹窗，会直接进入fail回调。在用户已授权的情况下调用此接口，可成功获取用户... 查看详情
uniapp在微信小程序获取用户信息和openid
uniapp在微信小程序获取用户信息和openId获取用户信息获取openId获取用户信息使用getUserProfile(),这个方法在每次出发的时候都会调起微信授权的那个弹出层，为什么不用getUserInfo()，微信给程序员们发公告了,不同于gerUserInfo，getUserPr... 查看详情
微信小程序头像昵称填写能力(代码片段)
...以说微信团队可真是贴心。2、头像选择需要将button组件open-type的值设置为chooseAvatar，当用户选择需要使用的头像之后，可以通过bindchooseavatar事件回调获取到头像信息的临时路径。从基础库2.24.4版本起，若用户上传的... 查看详情
微信小程序button组件open-type属性
参考技术Aopen-type调用的是小程序已有的功能，如下图所示：data-*是事件参数，当我们遍历数组，每一条数据都需要执行一个事件的时候，我们可以利用这个去写。 查看详情
uniapp：微信小程序获取用户手机号
...当用户点击并同意之后，可以通过bindgetphonenumber事件（在uniapp中@getphonenumber）回调获取到动态令牌code。3.前端将code传给后端，后端用code调用微信后台接口获取手机号如题，前端把code传给后端，后端调用微信接口，用acces_token和c... 查看详情
uniapp前端获取微信小程序urllink(https调用)(代码片段)
前端基于uniapp获取微信小程序URLLink短链，适用于短信、邮件、网页、微信内等拉起小程序的业务场景。目前仅针对国内非个人主体的小程序开放。前言：微信小程序此前可以在小程序管理后台-工具中直接快捷生成小程序... 查看详情
微信小程序获取当前用户信息
...，简单记录一下。第一个问题就是这个button组件需要添加open-type属性，并指定为getUserInfo类型，来获取用户基本信息。还有另外一种做法，具体可以参考官方文档的说明。放一个动图哈哈哈js部分就是响应点击事件，使用apiwx.getUs... 查看详情
小程序获取不到用户头像和昵称返回微信用户问题解决，即小程序授权获取用户头像规则调整的最新解决方案
最近好多同学在学习石头哥小程序课程的时候，遇到了下面这样的问题，在小程序授权获取用户头像和昵称时，获取到的是下面这样的。到底是什么原因导致的呢，去小程序官方文档一看，又是官方改规则了。点进去一看，原来... 查看详情
uniapp微信小程序获取屏幕宽高(代码片段)
uniapp开发微信小程序的时候，有时候去调整样式你需要适配各种手机屏幕，使用，你的样式宽高就不能使用rpx 有的朋友觉得可以使用vw vh % 是的，当然可以但是要让你的元素，宽高，比如50%再去加上2... 查看详情
微信小程序获取用户信息流程(代码片段)
...本信息1、前端页面要有授权登录按钮<buttonwx:if="canIUse"open-type="getUserInfo"bindgetuserinfo="bindGetUserInfo">授权登录</button><vi 查看详情
原生微信小程序转化uniapp项目的神操作
前言可能有些朋友只知道能将uniapp编译成微信小程序，但是没想到原生微信小程序也能编译成uniapp项目，这里推荐一款【miniprogram-to-uniapp】小程序转换工具插件原理核心是使用Babel获取AST（词法分析)，然后或使用Babel自带函数增... 查看详情