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

2023-08-12 07:48| 来源: 网络整理| 查看: 265

一、返回页面刷新

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:

授权登录

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是否有值，没有值再弹出去登录，参考第一点。

【本文地址】

公司简介

联系我们