uniapp

//小程序获取用户信息 获取手机号
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title" @click="login">{{title}}</text>
			<button type="default" open-type="getPhoneNumber" @getphonenumber="getPhone">手机号</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '登录',
				sessionKey:undefined,
				openid: undefined
			}
		},
		onLoad() {

		},
		methods: {
			getPhone(res){
				console.dir(res);
				uni.request({
					method:'PUT',
					url:"https://xxxx/api/front/player/wechat/phoneDecypt",
					data: {
						sessionKey: this.sessionKey,
						openid: this.openid,
						encryptedData:res.detail.encryptedData,
						iv:res.detail.iv
					},
					success: (res) => {
						console.log(res.data.data);
					}
				})
			},
			login() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes)=>{
						console.dir(loginRes);
						uni.request({
							method:'POST',
							url:"https://xxxxx/api/front/player/wechat/login",
							data: {
								code: loginRes.code,
								avatar:'https://up.enterdesk.com/edpic_source/96/4b/65/964b6599cee4e1ff834a8486963e1db1.jpg',
								nickname:'kuangke'
							},
							success: (res) => {
								this.sessionKey = res.data.data.sessionKey;
								this.openid = res.data.data.openid;
								console.log(res.data.data);
							}
						})
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
posted @ 2023-03-21 00:24  狂客  阅读(71)  评论(0编辑  收藏  举报