2023最新微信小程序登录和获取头像昵称

从基础库 2.21.2 开始支持，wx.getUserProfile、wx.getUserInfo被弃用，无法直接获取用户信息，现在获得用户openId只需要wx.login的code，小程序需要让用户完善个人资料时，可以通过微信提供的头像昵称填写能力快速完善，直接看代码

登录操作

<template>
	<view class="content">
		<view style="margin-top: 50rpx">微信登录token:</view>
		<view>{{ token }}</view>

		<view style="margin-top: 50rpx">微信openId：</view>
		<view>{{ openId }}</view>
		<view style="margin-top: 50rpx">微信手机号：</view>
		<view>{{ phone }}</view>

		<button type="primary" @click="login" style="margin-top: 50rpx">授权登录</button>
		<button type="primary" @getphonenumber="getUserData" 
open-type="getPhoneNumber" style="margin-top: 50rpx">授权信息</button>

		<button type="primary" @click="handlePay" style="margin-top: 50rpx">发起支付</button>
	</view>
</template>

export default {
	data() {
		return {
			title: 'Hello',
			code: '',
			token: '-',
			openId: '-',
			phone: '-'
		};
	},
	onLoad() {},
	methods: {
		handlePay() {
			let params = {};
			params.openId = uni.getStorageSync('openId');
			params.body = '商品1';
			params.totalFee = 1;
			params.tradeType = 'JSAPI';
			params.outTradeNo = new Date().getTime();
			uni.request({
				url: 'http://localhost:9999/wx/pay/createOrder',
				method: 'POST',
				header: {
					token: wx.getStorageSync('token')
				},
				data: params,
				success(res) {
					console.log(res);
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.data.timeStamp,
						nonceStr: res.data.data.nonceStr,
						package: res.data.data.packages,
						signType: res.data.data.signType,
						paySign: res.data.data.paySign,
						success: function (res) {
							console.log('success:' + JSON.stringify(res));
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}
			});
		},
		login() {
			let code = '';
			let that = this;
			uni.login({
				provider: 'weixin',
				success(res) {
					console.log(res);
					code = res.code;
					that.code = res.code;
					uni.request({
						url: 'http://localhost:9999/wx/user/login',
						method: 'POST',
						data: {
							code: code
						},
						success (resp) {
							console.log(resp.data);
							that.token = resp.data.token;
							uni.setStorageSync('token', that.token);
						}
					});
				}
			});
		},
		getUserData(e) {
			let that = this;
			console.log(e);
			uni.request({
				url: 'http://localhost:9999/wx/user/getUserData',
				data: {
					code: e.detail.code
				},
				method: 'POST',
				header: {
					token: uni.getStorageSync('token')
				},
				success(resp) {
					console.log(resp.data);
					console.log(resp.data.data);
					that.openId = resp.data.data.openId;
					that.phone = resp.data.data.phone;
					uni.setStorageSync('openId', that.openId);
				}
			});
		}
	}
};

效果图：

        

获取用户信息：

头像选择

需要将 button 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径

昵称填写

需要将 input 组件 type 的值设置为 nickname，当用户在此input进行输入时，键盘上方会展示微信昵称。

<template>
	<view class="content">
		<image class="avatar" :src="avatarUrl" style="width: 100rpx; height: 100rpx; border-radius: 50rpx"></image>

		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="uploadImage" style="margin-top: 50rpx">获取头像</button>
		
		<input type="nickname" :value="nickName" @confirm="nickNameChange" 
		placeholder="请输入昵称" style="margin-top: 50rpx; text-align: center" />

		<text style="margin-top: 50rpx">{{ phoneNumber }}</text>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="margin-top: 50rpx">获取手机号</button>
	</view>
</template>

export default {
	data() {
		return {
			nickName: '',
			phoneNumber: '',
			avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
		};
	},
	methods: {
		nickNameChange(e) {
			let that = this
			console.log(e.detail);
			that.nickName = e.detail.value;		
			let params = {};
			params.nickName = that.nickName;
			wx.request({
				url: 'http://localhost:9999/wx/user/updateUserInfo',
				method: 'POST',
				data: params,
				header: {
					token: uni.getStorageSync('token')
				},
				success(res){
					console.log(res.data);
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});
				}
			});
		},
		uploadImage(e) {
			let that = this;
			console.log(e.detail);
			let params = e.detail.avatarUrl;
			console.log(params);
			uni.showLoading({
				title: '加载中'
			});
			uni.uploadFile({
				url: 'http://localhost:9999/wx/user/uploadImage',
				filePath: params,
				name: 'image',
				header: {
					token: uni.getStorageSync('token')
				},
				success(res) {
					//这里返回的res.data 为JSON需要转换
					let data = JSON.parse(res.data);
					console.log(data);
					console.log(data.avatarUrl);
					that.avatarUrl = data.avatarUrl;
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});
				},
				fail: (error) => {
					uni.showToast({
						title: error,
						duration: 2000
					});
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},

		getPhoneNumber(e) {
			console.log(e.detail);
			let that = this;
			wx.request({
				url: 'http://localhost:9999/wx/user/getUserData',
				method: 'POST',
				data: {
					code: e.detail.code
				},
				header: {
					token: uni.getStorageSync('token')
				},
				success(resp){
					uni.showToast({
						title: '获取成功',
						icon: 'none'
					});
					console.log(resp.data);
					that.openId = resp.data.data.openId;
					uni.setStorageSync('openId', that.openId);
				}
			});
		}
	}
};

 效果图

        

因为代码上是有对接后端的，自行忽略，取需