一、返回页面刷新
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>
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是否有值,没有值再弹出去登录,参考第一点。