【微信授权登录】uniapp开发小程序,实现获取微信授权登录功能

导读:本篇文章讲解 【微信授权登录】uniapp开发小程序,实现获取微信授权登录功能,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、解题思路:

微信授权登录(获取用户信息)
1.先获取用户信息——用户授权允许后,通过调用uni.login 可以获取到code。
2.拿着获取到的code去调用——登录接口,可以获取到token。
3.把token存入缓存。就可以在页面判断是否登录了。

二、代码

<view @click="getUserInfo()">点击登录</view>

<script>
	export default {
		data() {
			return {
				localtoken: ''
			}
		},
		
		onLoad() {},
		onHide() {},
		onShow() {
			this.localtoken = uni.getStorageSync('localtoken');
		},

		methods: {
			getUserInfo() {
				var that = this;
				uni.showLoading({ // 展示加载框
					title: '加载中',
				});
				uni.getUserProfile({ //获取到用户信息
					desc: '登录后可同步数据',
					success: async (obj) => {
						console.log('obj', obj);
						that.nickName = obj.userInfo.nickName //用户名
						that.avatarUrl = obj.userInfo.avatarUrl //用户头像

						// 调用 action ,请求登录接口
						uni.login({
							provider: 'weixin',
							success: (res) => {
								console.log('res-login', res);
								//获取到code
								that.code = res.code;
								// console.log('code', res.code);

								//请求登录接口
								if (res.errMsg == 'login:ok') {
									var params = {
										code: that.code,
										nickname: that.nickName,
										avatar: that.avatarUrl
									}
									that.$api.appPlateForm('POST', 'auth/login', params, function(
										res) {

										if (res.code == 200) {
											uni.showToast({
												title: '登录成功',
												icon: 'success',
												mask: true,
											});
											//获取到token 存入缓存。通过有无token来判断是否登录

											// console.log('登录接口',res)
											uni.setStorageSync('localtoken', res.data.data.access_token)
											that.myProfile()  //用户信息接口
											that.getHistoryList()   //足迹接口

										}
									}, function(err) {
										uni.showToast({
											icon: 'none',
											title: err.msg
										})
									});

								}
							},
						});
					},
					fail: () => {
						uni.showToast({
							title: '授权已取消',
							icon: 'error',
							mask: true,
						});
					},
					complete: () => {
						// 隐藏loading
						uni.hideLoading();
					},
				});
			},

			//退出登录
			logOut() {
				var that = this
				uni.showModal({
					title: '确定要退出登录吗?',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('token')
							that.nickname = ''
							that.headimgurl = ''

						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});

			},


		}
	}
</script>

三、效果展示

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

ending~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/96021.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!