Bootstrap

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

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

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

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

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

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

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

这里还有两个小坑

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

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

2. 效果图

话不多说先贴图。

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

3. 微信获取手机号弹窗

   <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. 微信获取用户头像昵称弹窗

<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. 逻辑部分

微信登录的逻辑如下：

  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样式。

<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.注意

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

8.结尾

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

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

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

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
vue设置页面标题title
m4a格式怎么转换成mp3，这几个方法分享给大家！
Neural Discrete Representation Learning-代码分析
[实践总结] CompletableFuture并发执行多任务
swagger 生成接口文档，并导出html和pdf的过程
【js 打印分页】
k8s安装环境的脚本
c++ switch 字符串参数_六千字C++阶段总结第一部分，收藏夹预定，适合C/C++入门系统学习
GB2312简体中文编码表（转）
「译」ECMAScript 提案：类型注解（TypeScript 在未来可能被纳入 ECMAScript 中）
;