uniapp 实现微信小程序 获取用户头像 电话号码 昵称

效果图

获取数据前：

获取数据时：

获取数据后：

微信参数提供

前提: 微信认证通过 要不然没有权限获取手机号（付费 0.03一次）

参考文档

获取头像和昵称：

1.小程序用户头像昵称获取规则调整公告 | 微信开放社区 (qq.com)

2.开放能力 / 用户信息 / 获取头像昵称 (qq.com)

获取手机号 ：

1.开放能力 / 用户信息 / 手机号快速验证组件 (qq.com)

2.用户信息 / 手机号 / 手机号快速验证 (qq.com)

3.接口调用凭证 / 获取接口调用凭据 (qq.com)

微信参数	说明
appid	小程序唯一凭证，即 AppID，可在「微信公众平台 - 设置 - 开发设置」页中获得。（需要已经成为开发者，且帐号没有异常状态）
secret	小程序唯一凭证密钥，即 AppSecret，获取方式同 appid

代码

前端代码：

<template>
	<view>
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="data.avatarUrl"></image>
		</button>
		<view class="" style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
			<view class="input-wrap" style="">
				<input type="nickname" class="custom-input" placeholder="请输入昵称" v-model="data.nickName"
					@blur="onNickName" />
			</view>
		</view>
		<view class=""
			style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 20rpx;">
			<view class="input-wrap" style="">
				<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击授权获取手机号</button>

			</view>
		</view>
		
		<view class="" style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 20rpx;">
			<view class="input-wrap" style="">
				<input  class="custom-input" placeholder="用户电话号码" v-model="data.telephone" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const data = reactive({
		avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
		nickName: '',
		telephone: '',
		countryCode: '86',
	})
	//头像选择
	const onChooseAvatar = (e) => {
		console.log(e);
		uploadFilePromise(e.detail.avatarUrl)
	}
	//昵称选择
	const onNickName = (e) => {
		console.log(e.detail.value);
		data.nickName = e.detail.value;
	}
	//手机号选择
	const getPhoneNumber = (e) => {
		console.log(e.detail.code) // 动态令牌
		console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
		console.log(e.detail.errno) // 错误码（失败时返回）
		//这些代码推荐后端实现 涉及到微信小程序 secret密钥
		uni.request({
			url: "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=yourAppid&secret=yourSecret",
			success: (res) => {
				console.log(res.data);
				var accessToken = res.data.access_token;
				uni.request({
					url: "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=" +
						accessToken,
					method: 'POST',
					data: {
						code: e.detail.code
					},
					success:(res)=> {
						console.log("用户手机号获取");
						console.log(res);
						data.telephone=res.data.phone_info.purePhoneNumber;
						data.countryCode=res.data.phone_info.countryCode;
						uni.setStorageSync("userInfo",data);
					}

				})
			}

		})
	}

	//下载头像到服务器
	const uploadFilePromise = (avatarUrl) => {	
		wx.uploadFile({
			filePath: avatarUrl,
			name: 'image',
			url: 'http://192.168.110.53:2024/test/file/download/test', //服务器端接收图片的路径
			success: function(res) {
				console.log('图片上传成功==', res.data.data);
				const info = JSON.parse(res.data);
				console.log(res); //发送成功回调
				data.avatarUrl = "http://192.168.110.53:2024/test/upload/" + info.data;
			},
			fail: function(res) {
				console.log(res); //发送失败回调，可以在这里了解失败原因
			}
		})
	}
</script>

<style>
	.avatar-wrapper {
		padding: 0;
		width: 56px !important;
		border-radius: 8px;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.avatar {
		display: block;
		width: 56px;
		height: 56px;
	}

	.container {
		display: flex;
	}

	.input-wrap {
		width: 90vw;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		background-color: #f2f2f2;
	}

	.custom-input {
		width: 100%;
		height: 100%;
		border: none;
		outline: none;
		font-size: 16px;
		color: #333;
	}
</style>

后端代码：

//接口

@Slf4j
@RestController
@RequestMapping("/file")
public class UploadController extends CommonController {


    @PostMapping("/download/{path}")
    public CommonResult<String> uploadRichImg(@PathVariable("path") String path, @RequestParam("image") MultipartFile image){
        if (image.isEmpty()) {
            return process(()-> "Failed to upload, the file is empty!");
        }
        return process(()-> FileUtil.uploadImage(image, "img/" + path));
    }
}