uniapp开发微信小程序获取用户头像、昵称和手机号一键登录

<!-- 登录页面 版本一 -->
         <!-- #ifdef MP-WEIXIN -->
        <view class="mpwx-login column-center">
            <view class="loginLogo">
                <form @submit="onSubmit(true, $event)" class="loginContent">
                    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                        <image class="avatar"
                            :src="formData.avatarUrl ? formData.avatarUrl : require('../../static/images/default_avatar.png')">
                        </image>
                        <text class="loginLogoText" v-if="isShow">授权头像</text>
                    </button>
                    <view class="nameContent">
                        <view class="title">昵称</view>
                        <input name="nickName" type="nickname" placeholder="请填写昵称" class="weui-input"
                            v-model="formData.nickName" />
                    </view>

                    <view class="loginBtn">
                        <!-- <button class="btn" form-type="submit" open-type="getPhoneNumber"
                            @getphonenumber="getPhoneNumber">手机号一键登录</button> -->
                    </view>
                    <button size="lg" class="white br60 row-center btn" form-type="submit" open-type="getPhoneNumber"
                    @getphonenumber="getPhoneNumber">
                        <image class="mr10 image" src="/static/images/icon_wechat.png"></image>
                        <text>手机号快捷登录</text>
                    </button>
                    <view class="muted mt20">微信授权登录后才可进行更多操作哦</view>
                </form>
            </view>

        </view>

data() {
            return {
                mobile: "",//登录前获取的用户手机号
                avatarUrl: '',
                nickName: '',
                gender: '',
                // 以下是登录页面测试功能 开始
                iv: "",
                encryptedData: '',
                formData: {
                    nickName: '',
                    avatarUrl: ''
                },
                isShow: true,
                token: ""
                // 以下是登录页面测试功能 结束
            };
        },

// 以下是登录页面版本一测试功能 开始
            //头像图片持久化
            uploadImage(url1) {
                console.log("上传的头像：",url1);
                //uni.uploadFile将微信返回的临时地址转成文件流传输给后端，从而上传服务器，拿到永久地址
                // uni.uploadFile({
                //     url: `https://qmhly.hls.com/nine/getImgUrl`,
                //     filePath: url1,
                //     name: 'file',
                //     header: {
                //         'content-type': 'application/x-www-form-urlencoded',
                //     },
                //     formData: {
                //         'user': this.formData.nickName
                //     },
                //     success: (uploadFileRes) => {
                //         this.formData.avatarUrl = JSON.parse(uploadFileRes.data).data;
 
                //         //进入登录流程
                //         this.uniLogin();
                //     }
                // });
　　　　　　　　　　//上传接口
                uploadFile(url1).then(res => {
                    uni.hideLoading();
                    console.log("头像上传返回：",res);
                    this.avatarUrl = res.url
                });
            },
            //获取微信头像
            onChooseAvatar(e) {
                this.formData.avatarUrl = e.detail.avatarUrl;
                console.log("eeee", e);
            },
            onSubmit(confirm, event) {
                if (confirm) {
                    try {
                        let {
                            nickName
                        } = event.detail.value;
                        this.formData.nickName = nickName;
                        this.nickName = nickName;
                    } catch (e) {
                        //TODO handle the exception
                        uni.showToast({
                            icon: 'none',
                            title: e.message
                        });
                        return;
                    }
                }
            },

            // 以下是登录页面测试功能 结束
            async getPhoneNumber(e) {
                console.log("eeeeeeee:",e);
                if (this.formData.avatarUrl && this.formData.nickName) {
                    //微信小程序返回的相关数据
                    this.iv = e.detail.iv;
                    this.encryptedData = e.detail.encryptedData;
                    uni.showToast({
                        title: '登录中',
                        icon: 'loading',
                        duration: 1000,
                    });
                    //处理头像链接
                    this.uploadImage(this.formData.avatarUrl);

                    const {
                        encryptedData,
                        iv
                    } = e.detail;
                    let data = {
                        code: this.code,
                        encrypted_data: encryptedData,
                        iv
                    }
                    // this.fieldType = FieldType.MOBILE
                    if (encryptedData) {
                        this.$changeUserMobileMP(data)
                    }
 
                } else {
                    uni.showToast({
                        title: `请选择头像或输入昵称`,
                        icon: 'none'
                    });
                }

                // const {
                //     encryptedData,
                //     iv
                // } = e.detail;
                // let data = {
                //     code: this.code,
                //     encrypted_data: encryptedData,
                //     iv
                // }
                // // this.fieldType = FieldType.MOBILE
                // if (encryptedData) {
                //     this.$changeUserMobileMP(data)
                // }
            },
            $changeUserMobileMP(data) {
                console.log("获取手机号data:",data);
                changeUserMobile(data).then(res => {
                    if (res.code == 1) {
                        this.mobile = res.data.phoneNumber
                        //调用mnpLoginFun
                        this.wxLoginFun()
                        
                    }
                })
            },
            async wxLoginFun() {
                uni.showLoading({
                    title: '登录中...',
                    mask: true
                });
                const wxCode = await getWxCode()
                let params = {
                    code: wxCode,
                    nickname: this.nickName,
                    headimgurl: this.avatarUrl,
                    mobile: this.mobile
                }
                console.log("登录参数：",params);
                // return false
                const {code, data, msg} = await authLogin(params)
                if(code == 1) {
                    this.loginHandle(data)
                }else {
                    this.$toast({
                        title: msg
                    })
                }
            },
            // 小程序登录
            async mnpLoginFun() {
                const {userInfo: {avatarUrl, nickName, gender}} = await getUserProfile()
                console.log("userInfo:",avatarUrl, nickName, gender);
                this.avatarUrl = avatarUrl
                this.nickName = nickName
                this.gender = gender
                // uni.showLoading({
                //     title: '登录中...',
                //     mask: true
                // });
                // const wxCode = await getWxCode()
                // const {code, data, msg} = await authLogin({
                //     code: wxCode,
                //     nickname: nickName,
                //     headimgurl: avatarUrl,
                //     mobile: this.mobile,
                // })
                // if(code == 1) {
                //     this.loginHandle(data)
                // }else {
                //     this.$toast({
                //         title: msg
                //     })
                // }
            },

page {
        background-color: #fff;
        text-align: center;

        .login {
            height: auto;

            .mpwx-login {
                height: 100%;

                .avatar {
                    display: inline-block;
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 50%;
                    border: 1px solid #eee;
                    overflow: hidden;
                }
                .user-name {
                    height: 40rpx;
                }
                .image {
                    width: 50rpx;
                    height: 50rpx;
                }

                .btn {
                    background-color: #09BB07;
                    width: 580rpx;
                    margin: 80rpx auto 0;
                }
            }


            .h5-login {
                padding-top: 100rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100%;
                box-sizing: border-box;

                .logo {
                    width: 280rpx;
                    height: 80rpx;
                    margin-bottom: 50rpx;
                }

                .input {
                    width: 670rpx;
                    border-bottom: $-solid-border;
                    margin-top: 30rpx;
                }

                .sms-btn {
                    border: 1px solid $-color-primary;
                    width: 176rpx;
                    height: 60rpx;
                    box-sizing: border-box;
                }

                .wx-login {
                    margin-top: 60rpx;

                    .image {
                        margin-top: 40rpx;
                        width: 80rpx;
                        height: 80rpx;
                    }
                }
            }
        }
    }
    // 以下是登录页面测试功能 开始
    .avatar-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: none;
        color: inherit;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        outline: inherit;
 
        .avatar {
            height: 120rpx;
            width: 120rpx;
            border-radius: 60rpx;
            border: 1px solid #eee;
        }
    }
 
    .avatar-wrapper::after {
        border: none;
    }
 
    .nameContent {
        display: flex;
        margin: 70rpx 0;
        border-top: 1px solid #eee;
        border-bottom: 2rpx solid #eee;
        padding: 20rpx 40rpx;
        width: 100vw;
        box-sizing: border-box;
        font-size: 28rpx;
        align-items: center;
 
        .title {
            margin-right: 40rpx;
        }
    }
 
    .loginLogo {
        height: 700rpx;
        display: flex;
        justify-content: center;
        align-items: center;
 
        .loginContent {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
 
            .loginLogoText {
                font-size: 24rpx;
                color: #828282;
                margin-top: 20rpx;
            }
        }
    }
 
    .loginBtn {
        width: 100%;
 
        .btn {
            width: 70%;
            margin: 0 auto;
            border-radius: 20rpx;
            background-color: #ee3236;
            color: white;
        }
    }
    // 以下是登录页面测试功能 end

样式自己调整吧。

效果图：