【uniapp，样式，登录】【微信小程序】获取用户昵称和头像 新规则 写法，以及获取手机号登录

文章来源地址https://www.toymoban.com/news/detail-609190.html

<template>
	<view class="">
		<view class="content">
			<view class="login-item">
				<view class="logo"><open-data type="userAvatarUrl"></open-data></view>
			</view>
			<view class="login-tip">
				<view>申请获取以下权限</view>
				<view v-if="type==1">获得你的公开信息 （昵称、头像等）</view>
			</view>
			<view class="u-flex u-row-between">
				<!-- #ifdef MP-WEIXIN -->
				<u-button hover-class="none" shape="circle" @click="handleRefuse" 
					:custom-style="{ width: '90%',marginRight: '10px'  }" v-if="type==1">拒绝</u-button>
				<u-button v-if="type==1" hover-class="none" type="primary" shape="circle" :custom-style="{ width: '90%'}"
					@click="getnickshow=true" >
					允许
				</u-button>
				<u-button v-if="type==2" hover-class="none" type="primary" shape="circle" open-type="getPhoneNumber"
					@getphonenumber='getphonenumber' :custom-style="{ width: '90%' }">
					获取手机号
				</u-button>
				<!-- #endif -->
			</view>
		</view>

		<u-popup mode="bottom" :show="getnickshow" @close="getnickshow = false">
			<view class="getnickbox">
				<view class="flex_align_center">
					<image :src="project.logo" class="logoimg" mode="aspectFit"></image>
					<view class="name">
						{{project.name}}
						<text>申请</text>
					</view>
				</view>
				<view class="m1 mt30">获取你的头像、昵称</view>
				<view class="m2">展示个人信息</view>
				<view class="xin1">
					<button type="default" class=" buttoncss" open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<view class=" toubox">
							<view class="t1">头像</view>
							<view v-if="avatar == ''" class="avatarbox">
								<u-icon name="account-fill" size="50" color="#999"></u-icon>
							</view>
							<image v-else :src="avatar" class="avatarimg"></image>
						</view>
						<u-icon name="arrow-right" size="25" color="#999"></u-icon>
					</button>
				</view>
				<view class="nick">
					<view class="n1">昵称:</view>
					<input type="nickname" v-model="nickname" placeholder="请输入昵称">
				</view>
				<view class="fixedBtn wan">
					<button size="mini" open-type="getUserInfo" @click="getUserInfo" class="btn">完成</button>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
import baseUrl from "@/api/baseUrl.js"
export default {
	data() {
		return {
			getnickshow: false,
			type: 1, // 1获取昵称头像 2获取手机号 
			project: {
				name: '',
				logo: '',
			},
			nickname: '',
			avatar: '',
		};
	},
	onShow() {
		// 获取项目的 logo 和 名称
		uni.getSystemInfo({
			success: (res) => {
				this.project.name = res.appName
			}
		})
		this.project.logo = __wxConfig.accountInfo.icon
	},
	methods: {
		handleRefuse() {
			this.$u.toast('未授权');
			setTimeout(() => {
				uni.$u.route({
					type: 'back'
				})
			}, 1000);
		},
		getCode: async function() {
			return new Promise((resolve, reject) => {
				uni.login({
					// #ifdef MP-ALIPAY
					scopes: 'auth_user',
					// #endif
					success: function(res) {
						if (res.code) {
							resolve(res.code);
						} else {
							//login成功，但是没有取到code
							reject('未取得code');
						}
					},
					fail: function(res) {
						reject('用户授权失败wx.login');
					}
				});
			});
		},
		//用户授权得到用户的信息 微信授权
		// #ifdef MP-WEIXIN

		// 选择用户头像， 重点， 得调用下上传图片接口
		chooseavatar(e) {
			let that = this;
			uni.uploadFile({
				url: baseUrl + 'upload',
				filePath: e.detail.avatarUrl,
				name: 'file',
				formData: {
					file: e.detail.avatarUrl
				},
				header: {},
				success: r => {
					let imgData = JSON.parse(r.data)
					that.avatar = imgData.url;
				}
			});
		},

		async getUserInfo() {
			let that = this;
			if (this.avatar == "") {
				uni.showToast({
					title: '请选择头像',
					icon: 'none'
				})
				return
			}
			if (this.nickname == "") {
				uni.showToast({
					title: '请编辑用户昵称或昵称不能使用特殊字符',
					icon: 'none'
				})
				return
			}
			this.getnickshow = false;
			this.type = 2;
		},

		// 获取手机号 登录
		getphonenumber(e) {
			console.log(e, '手机号')
			var detail = e.detail;
			let that = this;
			if (detail.errMsg == "getPhoneNumber:ok") {
				console.log("用户同意授权")
				uni.login({
					scopes: 'weixin',
					success: function(res) {
						if (res.code) {
							let data = {
								nickName: that.nickname,
								avatarUrl: that.avatar,
								encryptedData:detail.encryptedData,
								iv:detail.iv,
								code:res.code,
							}
							uni.request({
								url: baseUrl + 'login', //调用登录接口
								method: 'POST',
								header: {
									'Content-Type':'application/x-www-form-urlencoded' 
								},
								data: data,
								success(e) {
									if(e.data.code == 0){
									uni.setStorageSync('id', e.data.data.id); // 存储用户id
									let pages = getCurrentPages();
									//当从其它页面跳转到当前页面时，只跳转一次
									let level = pages.length > 2 && (pages[pages.length - 2].route.indexOf("wxlogin") > -1) ? 2 : 1;
									uni.$u.route({
										type: 'back',
										delta: level
									})
								} else {
									that.$u.toast(e.data.msg);
									return;
								}
							},
							fail(e) {
								uni.showToast({
									icon: 'none',
									title: '网络错误！'
								})
							}
						})
					} 
				}
			});
				
				
			} else {
				console.log('拒绝获取手机号');
			}
		},
		// #endif
	}
};
</script>

<style lang="scss">
	.content {
		background-color: #fff;
		height: 100vh;
		padding: 100rpx 60rpx 0;
	}

	.login-item {
		display: flex;
		justify-content: center;
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #dddddd;
	}

	.logo {
		display: block;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.login-tip {
		padding: 60rpx 0;

		&-big {
			font-size: 28rpx;
			line-height: 80rpx;
		}

		&-small {
			font-size: 12px;
			color: #9e9e9e;
		}
	}

	// 微信授权新规则
	.getnickbox {
		padding: 40rpx 20rpx;

		.logoimg {
			width: 50rpx;
			height: 50rpx;
		}

		.name {
			margin-left: 20rpx;

			text {
				margin-left: 10rpx;
			}
		}

		.m1 {
			font-weight: 500;
		}

		.m2 {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #f2f2f2;
			color: #999;
			padding-top: 10rpx;
			font-size: 24rpx;
		}

		.xin1 {
			border-bottom: 1rpx solid #f2f2f2;
			margin-bottom: 30rpx;

			.toubox {
				padding: 10rpx 0;
				display: flex;
				align-items: center;

				.t1 {
					font-size: 28rpx;
					margin-right: 30rpx;
				}

				.avatarbox {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}

				.avatarimg {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}
			}
		}

		.buttoncss {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 0px;
			border: 0rpx solid transparent;
		}

		button::after {
			border: 0px solid rgba(0, 0, 0, .2);
		}

		.nick {
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #f2f2f2;
			display: flex;
			align-items: center;
			padding-left: 14px;
			padding-right: 14px;

			.n1 {
				font-size: 28rpx;
				margin-right: 30rpx;
			}
		}

		.wan {
			height: 80rpx;
			box-shadow: 0rpx 0rpx 0rpx 0rpx;
			width: 650rpx;
			border-radius: 38rpx;
			// border: 2rpx solid #FFF579;
			margin: 30rpx auto 0;

			.btn {
				width: 650rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 38rpx;
				text-align: center;
				background: #3c9cff;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				color: #fff;
				// border: 2rpx solid #FFF579;
			}
		}

		.flex_align_center {
			display: flex;
			align-items: center;
		}

		.mt30 {
			margin-top: 30rpx;
		}
	}
.u-flex-center, .flex_align_center, .u-flex{
	display: flex;
	align-items: center;
}
.flex_jus_between,.u-row-between{
	justify-content:space-between;
}
.u-flex-center, .flex_align_center, .u-flex{
	display: flex;
	align-items: center;
}
</style>

到了这里，关于【uniapp，样式，登录】【微信小程序】获取用户昵称和头像 新规则 写法，以及获取手机号登录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！