uni-app 小程序用户信息之头像昵称填写

小程序获取用户头像昵称，微信又叒做妖，废除之前的接口，改成了头像昵称填写

通知：微信小程序端基础库2.27.1及以上版本，wx.getUserProfile 接口被收回，详见《小程序用户头像昵称获取规则调整公告》

1.回收uni.getUserInfo接口可获取用户授权（返回的全部是匿名数据）

4月28日24时后发布的新版本小程序，开发者调用wx.getUserInfo或<button open-type="getUserInfo"/>将不再弹出弹窗，直接返回匿名的用户个人信息，获取加密后的openID、unionID数据的能力不做调整。

2.回收getUserProfile 来授权返回微信用户信息 （返回的全部是匿名数据）

3.使用：头像昵称填写能力

截取评论展示功能介绍：描述非常生动形象

4.Demo展示

css样式有采用：ColorUI-UniApp 请自行导入

案例地址：https://gitee.com/jielov/uni-app-tabbar/blob/master/pages/wx_login/wx-mandate-write.vue

<!--
* @author: Jay
* @description: 微信小程序  头像昵称填写
* @createTime: 2022-11-23 10:51:34
 -->
<template>
    <view>
        <!-- 获取头像 -->
        <view class="bg-gray padding-top-sm">
            <button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image :class="avatarUrl ==''?'avatar-img':'' " :src="avatarUrl"></image>
            </button>
        </view>
        <!-- 输入用户名 -->
        <view class="nickname-code">
            <view class="nickname-title">
                用户名:
            </view>
            <input type="nickname" class="weui-input" placeholder="请输入用户名" v-model="nickname" />
        </view>
        <!-- 手机号登录 -->
        <view class="padding-lr padding-top flex flex-direction">
            <button class="cu-btn bg-green round lg text-white" open-type="getPhoneNumber"
                @getphonenumber="getUserPhone" :disabled="explainName == '' ? false : true">微信手机号登录</button>
        </view>
        <view class="text-red text-df padding-lr-xl padding-tb-xs text-center">
            {{explainName}}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 头像
                avatarUrl: "",
                // 用户名
                nickname: "",
                // 登录 code
                logCode: "",
                // 微信手机号登录
                disabled: true,
            }
        },
        computed: {
            explainName() {
                let name = ""
                if (this.avatarUrl == '') {
                    name = "请授权用户头像"
                    return name;
                }
                if (this.nickname == '') {
                    name = "请输入用户名"
                    return name;
                }
                return name;
            }
        },
        onLoad() {
            this.userCode()
        },
        methods: {
            // 获取code
            userCode() {
                let that = this
                uni.login({
                    provider: 'weixin',
                    success(res) {
                        console.log("登录code", res);
                        that.logCode = res.code
                    }
                })
            },
            //获取用户头像
            onChooseAvatar(e) {
                // console.log(e.detail);
                this.avatarUrl = e.detail.avatarUrl
            },
            //获取用户手机号
            getUserPhone(e) {
                if (e.detail.errMsg == 'getPhoneNumber:ok') {
                    //出来手机号数据
                    console.log("手机号数据", e)
                    /*
                        在这一步把 手机号 头像 昵称 code 一次性全部丢给后端
                    */
                } else {
                    this.$operate.toast({
                        title: '授权失败无法登录！'
                    })
                }
            },
        }
    }
</script>
<style>
    page {
        background-color: #fff;
    }
</style>
<style lang="scss" scoped>
    // 用户头像
    .avatar-button {
        width: 120rpx;
        padding: 0;
        border-radius: 50%;
        margin: 30rpx auto 0 auto;

        image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            display: block;
            border: 4rpx solid #d8bf9f;
        }
    }

    .avatar-img {
        z-index: 3;
        position: relative;

        &:before {
            content: '头像授权';
            position: absolute;
            top: 0;
            left: 0;
            width: 120rpx;
            height: 120rpx;
            // line-height: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 25rpx;
            background-color: rgba(130, 128, 127, 0.5);
            z-index: 4;
        }
    }

    //用户昵称
    .nickname-code {
        display: flex;
        align-items: center;
        padding: 60rpx 20rpx 20rpx 20rpx;
        margin-top: -40rpx;
        background-color: #ffffff;
        border-radius: 50rpx 50rpx 0 0;

        .nickname-title {
            font-size: 30rpx;
            color: #333;
            margin-right: 15rpx;
        }

        .weui-input {
            flex: 1;
            color: #333;
            font-size: 30rpx;
        }
    }
</style>

小程序 头像昵称填写