uniapp 返回页面刷新/小程序获取用户信息之后登录和退出登录

一、返回页面刷新

1.进页面获取数据 onload
当返回页面时，比如从a页面到b页面，b页面返回a页面时，不会再执行onload，要用onshow。

二、小程序登录和退出登录

1.先在首页onload里判断是否有登录存的数据

onLoad() {//是否登录let loginShow = uni.getStorageSync('uerInfo');console.log(loginShow)if (!loginShow) {this.loginshow = true;//是否显示登录弹窗的控制隐藏，如果loginshow为空，就是没有登录，就显示是否去登录弹窗} else {}},

2.如果没登录，在点击弹窗去的去登录后，用uniapp的button open-type=“getUserInfo” 属性获取用户信息，如头像姓名等，（必须是button,否则没有获取授权的弹窗）
html:

<button @click="test" open-type="getUserInfo" type="primary"style="height: 60upx;line-height: 60upx;font-size: 32upx;">授权登录</button>

         test() {let that = this;let dataVuex = {};//用来放循序存储的数据uni.login({ //uniapp login方法，可以看文档provider: 'qq',success: (loginRes) => {//console.log(loginRes);通过login获取到code,把code传给后台，uni.request({url: 'https://api.qqxy.os.yunyoulf.com/api/getCode?code=' +loginRes.code, data: {},header: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},success: (res) => {//后台返回个人openid（重要），先用dataVuex存起来dataVuex.openid = res.data.openid;dataVuex.session_key = res.data.ssession_key;再用button 的uni.getUserInfo方法，获取用户信息，名字头像等uni.getUserInfo({provider: 'qq',success: (infoRes) => {//获取之后保存起来dataVuex.name = infoRes.userInfo.nickName;dataVuex.avUrl=infoRes.userInfo.avatarUrlconsole.log(dataVuex,11111)//方法一存储，用的vuex里的方法,里面有setStorage存储this.$store.commit("login", dataVuex);//方法二，直接在这里用setStorage存储，不经过vuex，任选一种uni.setStorage({ //将用户信息保存在本地  key: 'uerInfo',data: dataVuex})//组装谈书 获取的openid和用户信息const {avatarUrl,city,nickName,country,gender,province} = infoRes.userInfo;let param = {avatarurl: avatarUrl,city,nickname: nickName,country,gender,province,openid: dataVuex.openid};//把组装好的参数一起传给后台，后台添加用户//uniapp封装的方法，这里直接调用，下一篇讲封装this.$api.addUser(param).then(resinfor => {console.log(“登录成功”)this.loginshow = false;//关闭弹窗}).catch(res => {//失败进行的操作console.log(“登录失败”)})},fail: (res) => {console.log(res, "err")}});}});}});},

看着长，其实不复杂，讲一下大概思路；
先用uni.login获取code
再把code传给后台，后台返回一个openid先存起来，再用uni.getUserInfo获取用户信息头像名称等，拿到之后，把openid和用户信息存起来，传给后台，后台创建用户，成功之后就登录成功了。另外要用setStorage把用户常用信息，比如头像和名称，还有openid存起来，用来判断用户是否登录。

3.退出登录
当用户点击退出登录时，直接把setStorage存的值清空就行了。下次进入页面判断setStorage是否有值，没有值再弹出去登录，参考第一点。

uniapp 返回页面刷新/小程序获取用户信息之后登录和退出登录相关推荐

微信小程序获取用户信息（纯前端）
特别说明 2022年10月25日起,小程序 wx.getUserProfile 接口将被收回. 微信官方不希望开发者直接拿用户的昵称和头像,若小程序需要设置昵称和头像,可以单独开发一个设置页,由用户手 ...
小程序获取用户信息的两种方法
小程序获取用户信息的两种方法第一种使用 getUserProfile 代码示例第二种使用头像昵称填写相信大家之前也经常使用open-data获取用户的头像和昵称吧,但微信的这个改编意味着我们要 ...
微信小程序获取用户信息（含服务端）
本文获取用户信息方式需要服务端配合,纯前端的可查看微信小程序获取用户信息(纯前端) 若需获取 openid 和用户信息,可使用 wx.getUserInfo() 获取加密后的信息,传给服务端后解密. ...
钉钉小程序获取用户信息
钉钉小程序获取用户信息 1.钉钉小程序只允许开发办公类的程序,不能开发娱乐型的程序. 2.钉钉小程序审核需要产品说明书,最大大小不能超过30M(文档). 3.貌似可以用IP,暂时没有看到有关https ...
微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ
微信公众号/微信小程序获取用户信息以及推送微信模版消息_MQ 一.获取用户信息 1.首先我们需要了解什么是微信用户的OpenID 在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密 ...
微信小程序获取用户信息流程（2022年版）
开门见山地说,本文主要讲述微信小程序在2022年以后获取用户信息的主要方法,如果想要了解2022年之前微信小程序获取用户信息的相关知识或者是微信小程序之前这部分的设计思想的话,推荐博主的下面这篇博客 ...
小程序获取用户信息无法得到问题
小程序获取用户信息无法得到问题 1.前言因为小程序是由js代码编写的,我js学得不是特别的好,所以,刚开始以为js跟java一行,一行一行的执行,后面才发现,完全不是,所以有时候,我们在获取用户信息 ...
小程序获取用户信息
小程序获取用户信息 1.先判断是否授权 wx.getSetting({ success: (data) => { console.log(data); if (data.authSetting[ ...
微信小程序获取用户信息并保存登录状态
微信小程序获取用户信息并保存登录状态:http://www.360doc.com/content/18/0124/11/9200790_724662071.shtml 转载于:https://www ...
微信小程序获取用户信息
微信小程序获取用户信息微信小程序获取用户信息接口做了调整: 2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo与获取用户个人信息(头像.昵称.性别与地区),将直接获 ...

uniapp 返回页面刷新/小程序获取用户信息之后登录和退出登录

一、返回页面刷新

二、小程序登录和退出登录

uniapp 返回页面刷新/小程序获取用户信息之后登录和退出登录相关推荐

最新文章

热门文章