微信小程序获取昵称和头像的解决方案
原创微信小程序获取昵称和头像的解决方案
原创
在微信小程序实际开发中，获取用户的昵称和头像是一项常见功能，但因为微信小程序的api依赖于不同基础库，所以导致这一需求需要用不同方法来解决。
最早都是用的wx.getUserInfo这个api来获取获取用户信息，但从2021年4月28日24时后发布的小程序新版本将无法再获取用户个人信息（头像、昵称、性别与地区），至于为什么这样改版，官方是这样解释得：很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。
其实也能理解，这个api设计的初衷是方便开发者开发使用的，但却造成了这个api的滥用（虽然很大程度上是业务需求的不合理导致的）。最终还是用户体验至上，既然管不住那就只能禁用掉了
看下最早的实现方法代码示例，是这样的
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function (res) {
console.log('用户信息', res.userInfo)
That.setData({
avatarUrl: res.userInfo.avatarUrl,
nickName: res.userInfo.nickName
})
}
})
}
}
})但现在回调重返回的userInfo中 nickName一直为微信用户，avatarUrl一直为默认灰色头像
见下图
最新方法，应用微信小程序 提供得 开放能力 头像昵称填写功能
重点就是
open-type="chooseAvatar" 获取头像
type="nickname" 获取昵称
需要注意的是 必须依靠点击操作动作才能触发
完整实现代码
// wxml
<view data-weui-theme="{{theme}}">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarUrl}}"></image>
</button>
<mp-form>
<mp-cells>
<mp-cell title="昵称">
<input bindinput="bindKeyInput" value="{{nickName}}" type="nickname" class="weui-input" placeholder="请输入昵称"/>
</mp-cell>
</mp-cells>
</mp-form>
</view>
// js
const app = getApp()
Page({
data: {
avatarUrl: '',
nickName: ''
},
onLoad() {
let That = this
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function (res) {
console.log('用户信息', res.userInfo)
That.setData({
avatarUrl: res.userInfo.avatarUrl,
nickName: res.userInfo.nickName
})
}
})
}
}
})
},
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
this.setData({
avatarUrl,
})
},
bindKeyInput(e){
this.setData({
nickName: e.detail.value
})
}
})
//json
{
"usingComponents": {
"mp-form-page": "weui-miniprogram/form-page/form-page",
"mp-form": "weui-miniprogram/form/form",
"mp-cells": "weui-miniprogram/cells/cells",
"mp-cell": "weui-miniprogram/cell/cell"
},
"pageOrientation": "auto"
}
// wxss
.avatar-wrapper {
padding: 0;
width: 56px !important;
border-radius: 8px;
margin-top: 40px;
margin-bottom: 40px;
}
.avatar {
display: block;
width: 56px;
height: 56px;
}
.container {
display: flex;
}
问题
测试时，部分苹果设备 获取昵称时拿不到值
解决方案： 利用 blur 事件
<input
bindinput="bindKeyInput"
bindblur="bindKeyBlur"
value="{{nickName}}"
type="nickname"
class="weui-input"
placeholder="请输入昵称"/>版本兼容性问题
因为头像昵称填写能力 基础库在2.21.2以上的版本才支持
为了严谨 要加入版本判断 解决版本不同的问题
判断当前版本方法
关键api wx.getSystemInfoSync().SDKVersion
const version = wx.getSystemInfoSync().SDKVersion;
<!--新版本-->
isNewVersion() {
const version = wx.getSystemInfoSync().SDKVersion;
if (this.compareVersion(version, "2.21.2") >= 0) {
return true;
}
return false;
}
compareVersion(v1, v2) {
v1 = v1.split(".");
v2 = v2.split(".");
const len = Math.max(v1.length, v2.length);
while (v1.length < len) {
v1.push("0");
}
while (v2.length < len) {
v2.push("0");
}
for (let i = 0; i < len; i++) {
const num1 = parseInt(v1[i]);
const num2 = parseInt(v2[i]);
if (num1 > num2) {
return 1;
} else if (num1 < num2) {
return -1;
}
}
return 0;
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。