uniapp获取用户信息（登录及个人中心页面的实现）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp获取用户信息（登录及个人中心页面的实现）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

因为在微信小程序中wx.getuserInfo已经失效，所以我们在uniapp中也应该使用wx.getUserProfile来获取用户信息
页面的逻辑

一上来加载个人中心页，当用户点击未登录三个字时跳转登录页
登录页点击微信登录应该跳出授权弹窗获取用户的授权信息（使用wx.getUserProfile）
当用户点击同意授权时，应该将获取的用户信息使用同步或者异步存储存储到storage中（wx.setStorageSync），以便个人中心页使用，并且同时跳转到个人中心页（wx.reLaunch）
login.vue

			getuserinfo(e) {
				wx.getUserProfile({
					desc:'用户完善个人信息',
					success: (res) => {
						// console.log(res)
						let userInformation=res.userInfo
						wx.setStorageSync('userInformation',userInformation)
						// this.userInformation=userInformation
						wx.reLaunch({
							url:'/pages/personal/personal'
						})
					},
					fail: () => {
						wx.showToast({
							title:'授权失败',
							icon:'error',
							duration:2000
						})
					}
				})
			},

此时的页面效果
uniapp获取用户信息（登录及个人中心页面的实现）
登录成功之后，在个人中心页获取storage中存储的个人信息（wx.getStorageSync），渲染到页面,并且再次点击登录按钮不跳转到登录页面

		mounted(){
			this.userInfo=wx.getStorageSync('userInformation')
		},
		methods: {
			toLogin(){
				// 如果有nickName说明以及登录，所以点击不跳转
				if(this.userInfo.nickName){
					return
				}
				wx.navigateTo({
					url:'/pages/login/login'
				})
			}
		},

获取用户的头像以及昵称信息（判断是否获取用户信息成功，成功就显示用户信息，不成功显示默认值）：

<image class="userImg" :src="userInfo.avatarUrl?userInfo.avatarUrl:'../../static/images/personal/personal.png'" mode=""></image>
<div class='userInfo' @click='toLogin'>
	<p>{{userInfo.nickName?userInfo.nickName:'未登录'}}</p>
</div>