The latest version of the WeChat applet to obtain the user's avatar, nickname, and mobile phone number
1. WeChat changed the interface for obtaining user avatars and nicknames again
Announcement on Adjustment of Mini Program User Avatar and Nickname Acquisition Rules
Here we use uniapp to display, and use pop-up windows to realize user login authorization, obtain nicknames, and avatars
The first pop-up window, get the user's mobile phone number, and use it for automatic login
The second pop-up window allows users to complete the avatar and nickname information, which is convenient for users to operate in the system
There are two small pits
-
Note that version 2.21.2 of the base library starts to support
-
The input of type=nickname cannot be obtained through the method of :value.
It needs to be obtained through the event bound by @blur
2. Rendering
Without further ado, post the pictures first.
3. Wechat get phone number pop-up window
<u-modal v-model="showAuthorizePhone" :show-title="false"
:show-confirm-button="false">
<view class="slot-content">
<div class="auth-card">
<div class="img">
<img class="avatar-img"
src="@/static/logo-min.png"
mode="widthFix">
</div>
<div class="title">{
{bname}}</div>
<div class="content">申请获得您的手机号</div>
</div>
<div class="auth-btncard">
<div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizePhone=false"> 拒绝</u-button></div>
<div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" open-type="getPhoneNumber" @getphonenumber="authPhone"> 允许</u-button></div>
</div>
</view>
</u-modal>
4. Wechat gets user avatar and nickname pop-up window
<u-modal v-model="showAuthorizeUser" :show-title="false"
:show-confirm-button="false">
<view class="slot-content">
<div class="auth-card">
<div class="img">
<img class="avatar-img"
src="/static/logo-min.png"
mode="widthFix">
</div>
<div class="title">{
{bname}}</div>
<div class="content">邀请您补全个人信息<br></br>（昵称、头像）</div>
<div style="margin-left: 100rpx;margin-right: 100rpx">
<u-form :model="user" ref="uForm">
<u-form-item label="头像">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
<image class="avatar" :src="user.avatarUrl"></image>
</button>
</u-form-item>
<u-form-item label="昵称">
<input type="nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称"/>
</u-form-item>
</u-form>
</div>
</div>
<div class="auth-btncard">
<div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizeUser=false"> 拒绝</u-button></div>
<div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button></div>
</div>
</view>
</u-modal>
5. Logic part
The logic of WeChat login is as follows:
- Enter the page to get the code silently. Later, you need to obtain the code to change the user's mobile phone number in the background. Open the pop-up window for the authorized mobile number
- After the user clicks Allow in the pop-up window to authorize the mobile phone number, take the code to obtain the user's mobile phone number and complete the registration function. And put the returned user information into the cache of userinfo. Then judge whether the user has avatar information, and if not, open the pop-up window of the authorized user's avatar nickname.
- The user obtains the WeChat avatar or customizes the uploaded avatar through the button of chooseAvatar
- The user obtains the nickname through the @blur method of the nickname input. and then save it to the user
export default {
data() {
return {
user:{
avatarUrl:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
nickName:'',
},
hasUserInfo:false,
// 用户基本信息
userInfo: null,
// 微信,支付宝用户code
code: '',
// 是否弹出登录注册授权弹窗
showAuthorizeUser: false,
showAuthorizePhone: false,
}
},
onShow() {
this.getWxCode()
setTimeout(() => {
this.showAuthorizePhone = true
}, 100);
},
methods: {
// 静默获取code
async getWxCode() {
const loginResult = await uni.login()
const {
code } = loginResult[1]
this.code = code
console.log('-------------------code', code)
},
//获取昵称输入内容
userNameInput(e){
this.user.nickName = e.detail.value
},
onChooseAvatar(e) {
console.log('头像信息》')
console.log(e)
this.user.avatarUrl = e.detail.avatarUrl;
},
authPhone(e){
let _this = this
const {
errMsg, iv, encryptedData } = e.detail;
if (errMsg !== 'getPhoneNumber:ok') return;
let data = {
code: this.code,
encryptedData: encryptedData,
iv: iv
}
console.log('----------登陆中')
this.$api.register(data, res => {
console.log('微信登录返回结果========')
if(res.data.data.avatarurl){
_this.hasUserInfo = true;
_this.userInfo = res.data.data;
}else{
_this.showAuthorizeUser = true
}
uni.setStorageSync('userInfo', res.data.data)
setTimeout(() => {
_this.$interactive.toast('登陆成功')
}, 300);
console.log('---------登陆成功')
})
this.showAuthorizePhone = false
},
authUser(){
let userInfo = uni.getStorageSync('userInfo')
if(this.user.nickName==''){
this.$interactive.toast('请输入您的昵称！')
return;
}
userInfo.avatarurl = this.user.avatarUrl;
userInfo.nickname = this.user.nickName;
this.userInfo = userInfo;
uni.setStorageSync('userInfo', userInfo)
this.user.id = userInfo.id;
this.$api.saveUserInfo(this.user, res => {
this.hasUserInfo = true;
this.showAuthorizeUser = false;
},res =>{
})
},
openAuth(){
let userInfo = uni.getStorageSync('userInfo')
console.log('userInfo>>>>>>>>>>>>>>>>>>>>>')
console.log(userInfo)
if(userInfo){
this.showAuthorizeUser = true;
}else{
this.showAuthorizePhone = true;
}
}
}
}
6. CSS section
Everyone delete some useless css styles by themselves.
<style lang="scss" scoped>
@import "@/common/scss/common.scss";
.auth-btncard{
.btn-unok{
width: 50%;
float: left;
}
.btn-ok{
width: 50%;
float: left;
margin: 0;
padding: 0;
border: 0px solid transparent; //自定义边框
outline: none; //消除默认点击蓝色边框效果
u-button{
margin: 0;
padding: 0;
border: 0px solid transparent; //自定义边框
outline: none; //消除默认点击蓝色边框效果
}
}
}
.auth-card{
text-align: center;
.avatar-img{
width: 150rpx;
height: 150rpx;
overflow: hidden;
border-radius: 100%;
margin-top: 30rpx;
}
.title{
font-size: 20rpx;
}
.content{
margin-top: 10rpx;
}
}
.mine_box {
height: 360upx;
color: #fff;
background-color: $primarycolor;
.avatar-img {
width: 150rpx;
height: 150rpx;
overflow: hidden;
border-radius: 100%;
/*margin-right: 40rpx;*/
}
.avatar_box {
position: relative;
width: 150rpx;
height: 150rpx;
overflow: hidden;
border-radius: 100%;
margin-right: 40rpx;
.avatar-img {
width: 100%;
height: 100%;
/* #ifdef MP-WEIXIN*/
width: 150rpx;
height: 150rpx;
/* #endif */
}
.get_user_data {
z-index: 11;
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
}
.nick-name-box {
height: 100%;
}
.user-nickName {
font-size: 40rpx;
color: #fff;
margin-bottom: 20rpx;
}
.shiming_box {
border-radius: 10upx;
font-size: 28upx;
padding: 10upx 20upx;
background-color: rgba(15, 77, 139, 0.5);
.icon-shezhi {
margin-right: 10rpx;
margin-top: 5rpx;
}
}
}
.authorize-box {
background-color: transparent;
text-align: center;
.authorize-avatar {
width: 200rpx;
height: 200rpx;
}
.authorize-btn {
position: relative;
top: 40rpx;
}
}
/deep/.u-mode-center-box {
background-color: transparent !important;
}
</style>
<style>
.avatar-wrapper{
width: 150rpx;
height: 100rpx;
color: #333 !important;
text-align: center !important;
border: none !important;
border-radius:0 !important;
background-color:transparent !important;
}
.avatar-wrapper::after {
border: none !important;
}
.avatar{
width: 100rpx;
height: 100rpx;
overflow: hidden;
border-radius: 100%;
}
</style>
7. Pay attention
微信头像目前获取到的是一个临时路径，因为临时路径有失效的风险，所以建议获取到之后把头像上传存储到自己的服务器，可以通过base64的方式存储成一个字符串给后端，这样头像就不会失效啦。
8. Ending
Next article:
Because the avatar obtained through the WeChat avatar nickname filling function is a temporary avatar, this url can only be accessed on WeChat for a period of time, and cannot be accessed on the public network. So it is very necessary to convert this url into our actual usable avatar and put it in the database. Make the avatar persistent and accessible anywhere on WeChat and the public network.
WeChat applet uploads avatars and nicknames for persistent storage
WeChat Alipay dual-end compatible authorized mobile phone number
springboot WeChat Alipay dual-end compatible authorized mobile phone number background interface (to be improved)