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.userInfowx.setStorageSync('userInformation',userInformation)// this.userInformation=userInformationwx.reLaunch({url:'/pages/personal/personal'})},fail: () => {wx.showToast({title:'授权失败',icon:'error',duration:2000})}})},

此时的页面效果

登录成功之后，在个人中心页获取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>

成功后的页面效果：

uniapp获取用户信息（登录及个人中心页面的实现）相关推荐

一分钟学会uniapp获取用户信息
一分钟学会uniapp获取用户信息 uniapp提供的getUserInfo()方法示例 uniapp提供的getUserInfo()方法参数说明 userInfo 用户信息对象 rawData ...
微信授权登录，authorize不执行；uniapp 获取用户信息权限失败；无法通过wx.getUserInfo与＜button open-type=“getUserInfo“/＞获取用户个人信息
微信登录的接口又又又又改了微信官方本次修改说明 wx.getUserProfile 小程序的open-data uniapp的open-data 为优化用户的使用体验,平台将进行以下调整: 202 ...
小程序：登录页获取用户信息并传递用户数据到个人中心页
步骤一:个人中心页添加"立即登录"按钮跳转至登录页一.个人中心页的me.wxml代码 <view class="userinfo"><but ...
uniapp微信支付宝小程序获取用户信息
我们也知道微信小程序前段时间更新了获取用户信息方法(区别),今天介绍一下,最新版uniapp获取用户信息(支付宝和微信小程序) 直接上代码: <view class='bottom flex'& ...
调用API接口登录后，获取用户信息保存到Vuex中并渲染到Vue页面
文件封装步骤核心请求文件在 apiUse 文件夹中的 index.js 文件写 API接口方法 baseURL + url 后台完整地址将信息写入 store 文件夹中的 index.js 文 ...
微信网页授权并获取用户信息
介绍在很多微信H5应用里,当用户访问第三方应用时就需要进行微信网页授权,并且很多涉及安全的操作我们必须要先获取用户信息才能继续,本文章简单介绍了微信授权流程,并通过申请微信测试账号来模拟网页授权,用 ...
uniapp在小程序中登录，获取用户信息，获取手机号逻辑记录
这里写目录标题概述 uniapp小程序的授权描述授权的详细说明及使用 1.微信小程序通过`uni.login()`方法可以获取到微信提供的`code` 2.通过登录获取的`code`码可以以获取用 ...
H5网页使用支付宝授权登录获取用户信息详解
用户信息授权用户信息授权主要是为了获取支付宝用户ID(USER_ID).授权令牌(access_token),便于开发者处理自身业务逻辑的时候使用,例如:获取支付宝用户信息.发会员卡.快捷登录等.授 ...
java支付宝网页授权登录界面_支付宝开发平台之第三方授权登录与获取用户信息...
对于第三方登录,我们常见了,很多应用可以进行第三方登录,我常用的有:QQ.微信.新浪.支付宝等等,今天我们就一起来简单学习一下支付宝第三方授权登录. 打开支付宝开发平台,注册成为开发者,点击开发者中心 ...

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

uniapp获取用户信息（登录及个人中心页面的实现）相关推荐

最新文章

热门文章