uni-app获取用户信息

1.uni-app获取用户信息首先需要获取到code,和微信小程序获取用户信息步骤一样,只不过微信小程序是从wx.login里获取,而uni-app是从uni.login里获取。代码如图一
在这里插入图片描述
图一

2.通过获取到的code,向后台换区openid和session_key,可以直接请求接口来获取,以code为参数来请求接口,就可以获取到openid和秘钥了,获取之后用缓存将获取到的数据用setStorageSync存储起来代码,如图二
uni-app获取用户信息_第1张图片
图二

通过uni.getUserInfo来获取用户信息,如图三
uni-app获取用户信息_第2张图片
图三

详细代码如下:

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
			<view>
				<view class='header'>
					<image src='../../static/wx_login.png'></image>
				</view>
				<view class='content'>
					<view>申请获取以下权限</view>
					<text>获得你的公开信息(昵称,头像、地区等)</text>
				</view>
				<button class='bottom' type='primary' open-type="getUserInfo" @getuserinfo="wxGetUserInfo">
					授权登录
				</button>
			</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			wxGetUserInfo(){
				var url = this.Global.url
				uni.login({
					success: res => {
						var code = res.code;
						console.log(code);
						uni.getUserInfo({
							success: res => {
								console.log(res);
								uni.request({
									url: url + 'Api/Login/getsessionkey',
									method: 'POST',
									data: {
										code: code
									},
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									success: ress => {
										console.log(ress.data);
										// 通过微信自带code,向后台获取openID、session_key
										uni.setStorageSync('openid', ress.data.openid);
										uni.setStorageSync('session_key', ress.data.session_key);
										uni.request({
											url: url + 'Api/Login/authlogin',
											method: 'POST',
											data: {
												openid: uni.getStorageSync('openid'),
												NickName: res.userInfo.nickName,
												HeadUrl: res.userInfo.avatarUrl,
												gender: res.userInfo.gender
											},
											header: {
												'content-type': 'application/x-www-form-urlencoded'
											},
											success: res => {
												// 获取用户ID
												var id = res.data.arr.ID;
												uni.setStorageSync('id', id);
												uni.switchTab({
												    url: '../index/index'
												})
											}
										})
									}
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}
</style>

你可能感兴趣的:(uni-app)