最新2023版微信小程序获取头像、昵称、手机号码前后端实现

小程序端

<template>
    <view class="page">
        <view class="top">
            <view class="user-info">
                <block v-if="vuex_token">
                    <u-avatar class="avatar" size="large" :src="vuex_user.avatar"></u-avatar>
                    <view class="nickname">{{vuex_user.username}}</view>
                </block>
                <block v-else>
                    <view @click="navTo('/pages/user/login')" >
                        <u-avatar class="avatar" size="large"></u-avatar>
                        <view class="nickname">登录</view>
                    </view>
                </block>
            </view>
        </view>
        <view class="member-complete-info-popup">
            <u-popup v-model="show" mode="bottom" border-radius="14" closeable="true">
                <view class="complete-info-wrap">
                    <view class="head">
                        <text class="title">
                            获取您的昵称、头像、手机号
                        </text>
                        <text class="color-tip tips">
                            获取用户头像、昵称、手机号完善个人资料，主要用于向用户提供具有辨识度的用户中心界面
                        </text>
                    </view>
                    <view class="item-wrap">
                        <text class="label">头像</text>
                        <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                            <image :src="avatarUrl" mode="aspectFill"></image>
                        </button>
                    </view>
                    <view class="item-wrap">
                        <text class="label">昵称</text>
                        <input type="nickname" placeholder="请输入昵称" v-model="nickName" @blur="blurNickName" maxlength="50" />
                    </view>
                    <view class="item-wrap">
                        <text class="label">手机号</text>
                        <button open-type="getPhoneNumber" class="auth-login" @getphonenumber="getPhoneNumber">
                            <text class="mobile" v-if="vuex_user.mobile">{{ vuex_user.mobile }}</text>
                            <text class="color-base-text" v-else>获取手机号</text>
                        </button>
                    </view>
                    <button type="default" class="save-btn" @click="saveMp" :disabled="isDisabled">保存</button>
                </view>
            </u-popup>
        </view>
        <view class="u-padding-50">
            <block v-if="vuex_token">
                <view @click="showAvator" class="cl-cell">
                    <view class="cl-cell__icon">
                        <image src="../../static/about.png"></image>
                    </view>
                    <view class="cl-cell__title">更新头像、昵称、手机号</view>
                    <view class="cl-cell__right">
                        <image src="../../static/link-right.png"></image>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>
<script>
    const app = getApp();
    import {
        mapState
    } from 'vuex'
    export default {
        computed: mapState(['vuex_token', 'isLogin', 'vuex_user']),
        data() {
            return {
                show:false,
                nickName:'',
                headimgBase64:'',
                avatarUrl:'',
            }
        },
        methods: {
            showAvator: function(){
                this.show = true;
            },
            onChooseAvatar(e) {
                this.avatarUrl = e.detail.avatarUrl;
                uni.getFileSystemManager().readFile({
                    filePath: this.avatarUrl, //选择图片返回的相对路径
                    encoding: 'base64', //编码格式
                    success: res => {
                        this.headimgBase64 = 'data:image/jpeg;base64,' + res.data; //不加上这串字符，在页面无法显示的哦

                    }
                });
            },
            getPhoneNumber(e) {
                if (e.detail.errMsg == 'getPhoneNumber:ok') {
                    this.$u.api.bindmobile({mobile_code:e.detail.code}).then(res => {
                        if (res.code) {
                            this.vuex_user.mobile = res.data.mobile;
                        }else{
                            this.$u.toast(res.msg);
                        }
                    });
                }
            },
            blurNickName(e) {
                if (e.detail.value) this.nickName = e.detail.value;
            },
            saveMp() {
                if (this.nickName.length == 0) {
                    this.$u.toast('请输入昵称');
                    return;
                }
                let form = {nickname:this.nickName,headimg:'',mobile:''};
                if(this.avatarUrl != this.vuex_user.avatar && this.headimgBase64 != ''){
                    form.headimg = this.headimgBase64;
                }
                if(this.vuex_user.mobile != ''){
                    form.mobile = this.vuex_user.mobile;
                }
                this.show = false;
                this.$u.api.updateUserInfo(form).then(res => {
                    this.$u.toast(res.msg);
                    if (res.code) {
                        this.getUserInfoData();
                    }
                });
            },
            getUserInfoData: async function() {
                let res = await this.$u.api.getUserInfo();
                uni.stopPullDownRefresh();
                if (!res.code) {
                    this.$u.toast(res.msg);
                    return;
                }
                this.$u.vuex('vuex_user', res.data.userInfo || {});
                this.avatarUrl = res.data.userInfo.avatar;
                this.nickName = res.data.userInfo.username;
            }
        },
        onLoad() {
            console.log(this.vuex_config);
        },
        onShow() {
            if (this.vuex_token) {
                this.getUserInfoData();
            } else {
                this.$u.vuex('vuex_user', {});
            }
        }

    }
</script>
<style lang="scss">
    page {
        color: #020202;
        font-size: 32rpx;
        font-weight: 600;
    }

    .top {
        padding-top: 50rpx;
        padding-bottom: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .user-info {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .user-info .nickname,
    .user-info .avatar {
        margin: 0 auto;
    }

    .user-info .nickname {
        text-align: center;
        margin-top: 20rpx;
    }

    .cl-cell {
        margin-bottom: 50rpx;
    }
    
    .member-complete-info-popup {
        .complete-info-wrap {
            background: #fff;
            padding: 50rpx 40rpx 40rpx;
            padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
            padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
            font-weight: normal;
    
            .head {
                position: relative;
                border-bottom: 2rpx solid #eeeeee;
                padding-bottom: 20rpx;
    
                .title {
                    font-size: 32rpx;
                    display: block;
                }
    
                .tips {
                    font-size: 28rpx;
                    display: block;
                }
                .color-tip {
                    color: #909399!important;
                }
    
                .iconfont {
                    position: absolute;
                    right: 0;
                    top: -30rpx;
                    display: inline-block;
                    width: 56rpx;
                    height: 56rpx;
                    line-height: 56rpx;
                    text-align: right;
                    font-size: 32rpx;
                    font-weight: bold;
                }
            }
    
            .item-wrap {
                border-bottom: 2rpx solid #eeeeee;
                display: flex;
                align-items: center;
                padding: 20rpx 0;
    
                .label {
                    font-size: 32rpx;
                    margin-right: 40rpx;
                    width: 100rpx;
                }
    
                button {
                    background: transparent;
                    margin: 0;
                    padding: 0;
                    border-radius: 0;
                    flex: 1;
                    text-align: left;
                    display: flex;
                    align-items: center;
                    font-size: 32rpx;
    
                    image {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 10rpx;
                        overflow: hidden;
                    }
                    
                    &::after{
                        border:none !important;
                    }
                }
    
                .iconfont {
                    flex: 1;
                    text-align: right;
                }
    
                input {
                    flex: 1;
                    height: 80rpx;
                    box-sizing: border-box;
                    font-size: 32rpx;
                }
            }
    
            .save-btn {
                width: 280rpx;
                height: 90rpx;
                line-height: 90rpx;
                background-color: #07c160;
                color: #fff;
                margin: 40rpx auto 20rpx;
            }
        }
    }
</style>

后端微信api获取手机号码并绑定手机号码、和保存昵称和头像

public function bindmobile(){
        $data = $this->request->post();
        $userinfo = $this->auth->getUser();
        if($data['mobile_code']){
            $config = get_addon_config('weixinapi');
            if(!$access_token = cache('mp_access_token')){
                $params = [
                    'appid'      => $config['wxappid'],
                    'secret'     => $config['wxappsecret'],
                    'grant_type' => 'client_credential'
                ];
                $result = Http::sendRequest("https://api.weixin.qq.com/cgi-bin/token", $params, 'GET');  //先后去api沟通凭证access_token
                if ($result['ret']) {
                    $json = (array)json_decode($result['msg'], true);
                    $access_token = $json['access_token'];
                    $expires_in = $json['expires_in'] - 200;
                    cache('mp_access_token',$access_token,$expires_in);
                }else{
                    boblog('mp_access_token_error',$result);
                    $this->error('获取微信通信失败');
                }
            }
            $result = Http::sendRequest("https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=".$access_token, json_encode(['code'=>$data['mobile_code']]), 'POST',[
                CURLOPT_HTTPHEADER => [
                    "content-type: application/json"
                ]
            ]);
            if ($result['ret']) {
                $json = (array)json_decode($result['msg'], true);
                if($json['errcode'] == 0){
                    $userinfo->save(['mobile'=>$json['phone_info']['phoneNumber']]);
                    $this->success('更新成功',['mobile'=>$json['phone_info']['phoneNumber']]);
                }
            }else{
                $this->error('微信手机获取失败');
            }
        }
    }
    
    public function updateNicknameAndImg()
    {
        $data = $this->request->post();
        $userinfo = $this->auth->getUser();
        $update_info = [];
        if($data['nickname'] && $data['nickname'] !== $userinfo['username']){
            $update_info['username'] = $data['nickname'];
        }
        if($data['headimg']){
            preg_match('/^(data:\s*image\/(\w+);base64,)/', $data['headimg'], $result);  //将base64图像数据保存为图片
            $img = str_replace($result[1], '', $data['headimg']);
            $imgdata = base64_decode($img);
            $file_name = '/uploads/headimg/' . md5($userinfo['id'].time()). '.'.$result[2];// 图片名称
            $path = ROOT_PATH . 'public'.$file_name; // 图片保存路径
            if(file_put_contents($path, $imgdata)){
                $update_info['avatar'] = cdnurl($file_name,true);
            }
        }
        if($data['mobile'] && $data['mobile'] !== $userinfo['mobile']){
            $update_info['mobile'] = $data['mobile'];
        }
        $userinfo->save($update_info);
        $this->success('更新成功');
    }

Bug天天改,头发日日疏,码字不易,如果有帮助到你,就点击"下方感谢"支持一下把.