uniapp 返回页面刷新/小程序获取用户信息之后登录和退出登录_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 {
			}
		},
1
2
3
4
5
6
7
8
9

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>

1
2
3

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")
									}

								});
							}
						});

					}
				});
			},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

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

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