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>

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

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在uniapp中使用企业微信小程序登录获取用户信息,需要完成以下步骤: 1. 在企业微信开发者中心创建小程序,并获取AppID和AppSecret。 2. 在uniapp中引入wx-server-sdk插件,并初始化: ``` import { init } from 'wx-server-sdk' init({ env: 'your-env-id', traceUser: true, }) ``` 3. 创建云函数,用于获取企业微信小程序登录凭证code: ``` const cloud = require('wx-server-sdk') const qywx = require('wx-server-sdk/qywx') exports.main = async (event, context) => { const wxContext = cloud.getWXContext() const code = event.code const res = await qywx.getQrCodeLoginInfo({ appid: 'your-appid', secret: 'your-appsecret', code: code, }) return res } ``` 4. 在uniapp中调用云函数,获取登录凭证code: ``` wx.qy.login({ success: res => { const code = res.code // 调用云函数,获取登录凭证信息 uniCloud.callFunction({ name: 'getQrCodeLoginInfo', data: { code: code }, success: res => { const loginInfo = res.result console.log(loginInfo) }, fail: err => { console.log(err) } }) }, fail: err => { console.log(err) } }) ``` 5. 使用登录凭证code获取用户信息: ``` wx.qy.getUserInfo({ withCredentials: true, success: res => { const userInfo = res.userInfo console.log(userInfo) }, fail: err => { console.log(err) } }) ``` 注意:在使用企业微信小程序登录时,需要在企业微信管理后台配置登录授权域名和JS安全域名,并且需要在小程序中配置企业微信授权登录AppID和AppSecret。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值