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:



js

			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
											.avatarUrl
											console.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,uni-app)