关于uniapp中微信小程序获取最新昵称和头像的方法

哎，最近项目中遇到一个需求就是直接获取微信头像和昵称，可是去官方查阅后发现原先的接口已经不能获取了，返回的是灰色头像和微信用户，后来只能采用亡羊补牢的方法，就是用内置按钮组件的开放能力，引用了插件市场的代码，地址链接获取昵称、头像的弹窗，适用最新微信小程序 - DCloud 插件市场x

项目效果如下图

 好的废话不多说上代码

这是一键登录授权页面

<template>
    <view class="container">
        <!-- 顶部开始 -->

        <!-- 顶部结束 -->

        <view class="main-logo-wrap">
            <!-- <view class="main-logo">
				<image src="../../static/detail/wodedingdan.png" mode=""></image>
			</view> -->
        </view>
        <view class="main">
            <button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="main-btn">用户一键登陆</button>
        </view>

        <u-popup :show="isShow" mode="center" border-radius="20" :mask-close-able="false">
            <view class="content-wrap">
                <view class='content'>
                    <view>为了您更好的体验,申请获取以下权限</view>
                    <text>获得你的公开信息(昵称，头像、地区等)</text>
                </view>

                <button class="main-btn" open-type="getUserInfo" @click="getUserProfile">
                    点击授权
                </button>
            </view>
        </u-popup>
        <!-- <cui-button class="item" @click="tapGetUserProfile">获取头像昵称</cui-button> -->


        <cui-userprofiledialog ref="userProfileDialog" paddingBottom="92rpx"></cui-userprofiledialog>
    </view>
</template>

<script>
    // import { mapState, mapMutations } from 'vuex';
    export default {
        data() {
            return {
                logo: '',
                code: '',
                isShow: false
            }
        },
        onShow() {
            // this.logo = uni.getStorageSync('logo')
        },
        onLoad() {
            this.getcode();


        },

        methods: {
            tapGetUserProfile() {
                this.$refs["userProfileDialog"].show({
                    desc: "用于显示个人资料",
                    avatarUrl: {
                        requried: true, // 是否必填
                        disable: false, // 是否隐藏
                    }
                }).then(res => {
                    //上传完后的头像地址 和自己的微信昵称
                    console.log(res, '结果！！！', res.avatarUrl, res.nickName)

                    this.getregister(this.mobile ,this.openid,res.avatarUrl,res.nickName)
                }, err => {
                    console.log("取消")
                });
            },
            // 取消授权 返回上一页
            cancelLogin() {
                wx.reLaunch({
                    url: '/pages/my/my'
                })
            },
            getphonenumber(e) {
                if (!e.detail.encryptedData) {
                    uni.showToast({
                        title: "微信登录授权失败",
                        icon: "none"
                    });
                } else {
                    this.getwxtel(e)

                }
            },
            // 获取code
            getcode() {
                uni.login({
                    success: res => {
                        console.log(res.code, '当前服务器code');
                        this.code = res.code
                    }
                })

            },
            // 获取用户手机号
            getwxtel(e) {         
                if (e.detail.errMsg == "getPhoneNumber:ok") { // 用户允许或去手机号
                    this.$Request({
                        url: this.$Api.getwxtel,
                        method: 'POST',
                        data: {
                            encryptedData: encodeURIComponent(e.detail.encryptedData),
                            code: this.code,
                            iv: e.detail.iv
                        },
                        success: (res) => {

                            if (res.code == 200) {
                                console.log(res, '1111111111111111111111111111');
                                uni.setStorageSync('token', res.data.token)
                                setTimeout(() => {
                                    uni.switchTab({
                                        url: '/pages/my/my'
                                    })
                                }, 1000)
                            } else if (res.code == 100) {
                                this.mobile = res.mobile
                                this.openid = res.openid

                                  //如果没注册的话直接获取头像根据自己需求写要在哪调用
                                this.tapGetUserProfile()
                              
                                uni.setStorageSync('mobile', res.mobile)
                                uni.setStorageSync('openid', res.openid)
                                
                            } else {
                                
                            }
                        }
                    })
                }
            },

            //注册
            getregister(mobile, openid,avatar,nickname) {

                this.$Request({
                    url: this.$Api.getregister,
                    method: 'POST',
                    data: {
                        mobile: mobile,
                        openid: openid,
                        avatar:avatar,
                        nickname:nickname
                    },
                    success: (res) => {
                        if (res.code == 200) {
                            uni.setStorageSync('token', res.data.token)
                            uni.switchTab({
                                url: '/pages/my/my'
                            })
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: res.msg
                            })
                        }



                    }
                })
            },




         
        },
    }
</script>

<style lang="scss">
    .u-navbar__content__title.data-v-75dad532 {
        color: #fff !important;
    }

    .content {
        padding: 30rpx 30rpx 90rpx;
        font-size: 28rpx;

        &-wrap {
            padding: 90rpx 30rpx 60rpx;
        }
    }

    .main {
        position: fixed;
        top: 50%;
        left: 30rpx;
        right: 30rpx;

        &-logo {

            width: 280rpx;
            height: 280rpx;
            display: inline-block;

            image {
                border-radius: 50%;
            }

            &-wrap {
                margin-top: 180rpx;
                text-align: center;
            }
        }

        &-btn {
            background: $bgcolor;
            color: #fff;
            text-align: center;
            height: 80rpx;
            border-radius: 30px;
            margin-bottom: 30rpx;
            line-height: 80rpx;
            font-size: 28rpx;
        }

        .cancel {
            background-color: #999;
            color: #fff;
            font-size: 28rpx;
        }
    }
</style>

请去插件官网引入获取昵称、头像的弹窗，适用最新微信小程序 - DCloud 插件市场

或者直接下载压缩包