微信小程序获取用户头像昵称手机号最新版

1. 微信又双叒叕改了获取用户头像和昵称的接口

小程序用户头像昵称获取规则调整公告

这里我们通过uniapp的方式展示，通过弹窗的方式来实现用户登录授权、获取昵称、头像

第一次弹窗，获取用户手机号，做自动登录使用

第二次弹窗，让用户补全头像、昵称信息，便于用户在系统中操作

这里还有两个小坑

1. 注意基础库的版本 2.21.2 版本开始支持

2. type=nickname的input通过:value的方式获取不到
   需要通过 @blur绑定的事件才能获取

2. 效果图

话不多说先贴图。

3. 微信获取手机号弹窗

                               
                    
                                            
                    
{{bname}}
                    
申请获得您的手机号
                
                
                    
 拒绝
                    
 允许
                
                    

4. 微信获取用户头像昵称弹窗

            
            
                            
            
{{bname}}
            
邀请您补全个人信息

（昵称、头像）
        
                                                                                                                                                                                    
        
    
        
 拒绝
        
 允许
    
    

5. 逻辑部分

微信登录的逻辑如下：

1. 进入页面先静默获取code。后续需要获取code去后台换用户的手机号。打开授权手机号的弹窗
2. 用户在授权手机号的弹窗点击允许后，拿code去获取用户的手机号，完成注册功能。并且把返回的用户信息放入userinfo的缓存中。然后判断用户有无头像信息，如果没有就打开授权用户头像昵称的弹窗。
3. 用户通过chooseAvatar的button获取微信头像或者自定义上传头像
4. 用户通过nickname的input的@blur方法获取昵称。然后保存给用户

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部分

大家自行删减一些无用的css样式。

7.注意

微信头像目前获取到的是一个临时路径，因为临时路径有失效的风险，所以建议获取到之后把头像上传存储到自己的服务器，可以通过base64的方式存储成一个字符串给后端，这样头像就不会失效啦。

8.结尾

下一篇：
因为通过微信头像昵称填写功能获取到头像是一个临时头像，这个url只能一段时间内在微信访问，并且无法在公网访问这个url。所以非常有必要把这个url转成我么实际可用的头像到数据库中。让头像持久化的在微信和公网任何位置都能访问。
微信小程序上传头像和昵称持久化保存

微信支付宝双端兼容授权手机号

​ springboot微信支付宝双端兼容授权手机号后台接口（待完善）

来源地址：https://blog.csdn.net/qq_35921773/article/details/127317289