uniapp在小程序中登录，获取用户信息，获取手机号

<template>
	<view class="content"
		<view class="conLogin">
			<!-- button里@getphonenumber获取手机号 -->
			<button class="login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">登录</button>
			<view class="login" @click="get_user()">获取用户信息</view>
		</view>
	</view>
</template>

<script>
	import WXBizDataCrypt from "@/common/Node/WXBizDataCrypt.js" // 需要引入
	export default {
		data() {
			return {
				code: '',
				encryptData: '',
				iv: '',
				openid: '',
				phone: '',
			}
		},
		onLoad() {
			// 建议一进页面就调用uni.login,否则可能会报错
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					console.log('登录', loginRes);
					this.code = loginRes.code // 获得的code
				}
			})
		},
		methods: {
			getPhoneNumber(e) {
				console.log(e, '获取手机号');
				this.phone_code = res.detail.code // 获得的手机code
				this.phone_encryptedData = res.detail.encryptedData //用于解密
				this.phone_iv = res.detail.iv // 用于解密
				// 下载引入的文件链接地址  (开放数据校验与解密=>(下滑到)加密数据解密算法=>点击下载)
				// https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html

				// 解密需要的内容
				// appID：小程序的appid
				// session_key：第二步返回的会话密钥
				// encryptedData：第三步返回的内容
				// iv：第三步返回的内容
				let pc = new WXBizDataCrypt('这里是appid', this.session_key);
				let data = pc.decryptData(this.phone_encryptedData, this.phone_iv);
				console.log(data) //data就是最终解密的用户信息  
				this.phone = data.phoneNumber // 手机号
				
				// 获取openid
				let that = this
				uni.request({
					url: 'https://api.weixin.qq.com/sns/jscode2session', // 请求微信服务器
					method: 'GET',
					data: {
						appid: '这里是你的小程序aphid', //你的小程序的APPID
						secret: '这里是你小程序生成的密钥', //你的小程序秘钥secret,  
						js_code: this.code, //wx.login 登录成功后的code
						grant_type: 'authorization_code'
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					success: res => {
						console.log('登录', res); //获取到用户的手机号和openid 然后调登录接口把手机号和openid传过去就可以了
						if (res.data.code === 200) {
							console.log('获取openid', res); // 换取成功后 暂存这些数据 留作后续操作
							this.openid = res.data.openid //openid 用户唯一标识
							this.session_key = res.data.session_key //session_key  会话密钥
							uni.request({
								url: that.BaseUrl + "后端登录接口",
								method: "POST",
								data: {
									phone: this.phone,
									openId: this.openid
								},
								header: {
									"Content-Type": "application/x-www-form-urlencoded",
								},
								success: res => {
									console.log('登录页面', res);
									if (res.data.code === 200) {
										uni.setStorageSync('userId', res.data.data.id)
										uni.showLoading({
											title: '登录中...'
										})
										setTimeout(function() {
											uni.hideLoading();
											uni.showToast({
												title: '登录成功',
												icon: 'none'
											})
											uni.switchTab({
												url: '/pages/index/index'
											})
										}, 1000)
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										})
									}
								},

							});
						}

					},

				});

			},
			get_user() { // 获取用户信息
				uni.getUserProfile({
					desc: '用户登录',
					success: res => {
						console.log(res) // 用户的信息
						this.user_img = res.userInfo.avatarUrl //微信头像
						this.user_name = res.userInfo.nickName // 微信昵称
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f1f1f1;
		position: relative;
	}



	.conLogin {
		position: absolute;
		bottom: 114rpx;
		left: 119rpx;



		.login {
			width: 512rpx;
			height: 95rpx;
			line-height: 95rpx;
			border-radius: 47.5rpx;
			background: #002bd4;
			opacity: 0.89;
			font-size: 40rpx;
			text-align: center;
			color: #fff;
		}
	}
</style>

在uniapp开发微信小程序的过程中，需要在微信端登录，获取用户的信息（头像，昵称内容，手机号），为了方便用户，直接通过微信授权的方式进行登录获取