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

APP微信授权登录需要到微信开放平台申请,在HBuilderX配置APP SDK中微信登录的appId,另外需要跟小程序、公众号授权账号互通的话也需要在微信开放平台申请

1、在微信公众平台申请应用,获取相应的appid和appsecret

2、在HBuilderX配置APP SDK中微信登录的appId和appsecret

一、解题思路:

微信授权登录(获取用户信息)| 小程序登录 | 微信开放文档 

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>

三、总结

以上就是微信登录的流程,可能存在问题但是整体流程是没错的,还是那句话:代码千千万,适合自己的最重要

 

 

 

 

 

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
### 回答1: 要在uniapp实现获取微信授权登录功能,需要进行以下步骤: 1. 首先,在微信公众平台中注册账号,并进入开发者中心,创建小程序获取小程序APP ID。 2. 在uniapp中引入并使用uni.login()接口,以获取用户的登录凭证code。 3. 接着,使用uni.request()或uni.requestPayment()接口向微信服务器发送请求,将code和APP ID传递给微信服务器,并获取用户的openid等信息。 4. 对于用户已授权的情况,可以在uni.login()的success回调函数中获取用户信息和用户信息签名,并进行相关处理。 5. 对于用户未授权的情况,需要使用uni.authorize()接口主动向用户请求获得授权,并在其回调函数中进行用户信息的获取和处理。 总的来说,通过在uniapp中调用微信API实现微信授权登录,可以方便地获取用户的openid等信息,并基于此实现个性化的小程序应用。 ### 回答2: 如今,微信小程序已经成为搭建企业或商家自有移动应用的重要渠道,而Uniapp则成为了众多开发者、 IT公司使用的一款优秀的跨平台开发框架,在Uniapp平台下实现微信授权登录功能,也成为了开发者的必备技能。接下来,本文将围绕如何利用Uniapp开发小程序实现获取微信授权登录功能进行探讨。 首先,我们在小程序管理后台进行小程序账户的设置操作,具体操作如下: 1. 开发设置-开发权限,将“网页授权获取用户基本信息”权限打开; 2. 个人资质认证,将小程序认证为个人小程序,然后在“认证信息”页面中进行身份证和联系方式的填写。 接下来,我们就可以正式开始使用Uniapp进行小程序开发以及微信授权登录功能实现,步骤如下: 1. 登陆微信公众平台登录授权获取code; 2. 通过code获取access_token和openid; 3. 通过access_token和openid获取用户信息。 既然以上步骤大家已经心知肚明,下面我就重点说明一下第一个步骤在uniapp平台下的实现原理。 步骤一,在uniapp平台下实现微信授权登录功能 Uniapp平台下实现微信授权登录功能,需要通过uni-app-plugin-uni-wxapi插件进行实现。具体步骤如下: 1. 在HBuilderX中创建项目,然后在目录下跳转到dcloudio\uni-ui\uni-app-plugin-uni-wxapi插件下; 2. 打开公众号开发者平台,接着进入“基本配置”页面,将“OAuth2.0网页授权”启用。在可信域名中填写h5的域名; 3. 在插件下找到“common.js”和“instance.js”文件,修改获取微信Appid和AppSecret,接着将文件进行增加至static文件夹下; 4. 在App.vue同级目录中,创建wxLogin.vue页面,用于页面的初始渲染。 事实上,Uni-app-plugin-uni-wxapi插件真的是非常好用的插件,只需要通过简单的设置,我们就可以轻松实现微信授权登录功能。而本文,重点讲解的即为步骤一的功能实现原理。 实现微信授权登录功能,从而获取用户信息,是Uniapp开发小程序的核心功能。相较于其他开发语言,Uniapp不仅提供了完善的指引,而且还拥有庞大的社区,开发者可以在社区中学习交流,从而更好地解决问题,提升开发效率。因此,我们只需要需要在uniapp平台下正常操作,按照顺序完成上面的四个步骤,就能够实现微信授权登录功能获取用户信息,不再为此而烦恼。 ### 回答3: 在开始使用uniapp开发小程序前,你需要先注册微信小程序,并使用微信开发者工具创建一个小程序项目。当你完成这些步骤后,就可以开始使用uniapp开发小程序了。为了实现获取微信授权登录功能,你需要遵循以下步骤。 1. 在小程序项目中创建一个按钮,当用户点击它时,触发获取微信授权登录的操作。 2. 在uniapp的公共方法中,定义一个获取微信授权登录的方法。 3. 在该方法中,使用uniapp的api向微信服务器发送请求,获取用户的授权信息。 4. 在接收到服务器返回的信息后,使用uniapp的方法将该信息保存在本地存储中。 5. 对于已经授权过的用户,可以通过读取本地存储中的信息来快速完成登录操作。 6. 对于未授权过的用户,需要在此时弹出微信授权登录窗口,提示用户进行授权。 7. 当用户完成授权后,我们可以通过微信提供的方法获取用户的基本信息。 8. 最后,我们需要将用户的基本信息和授权状态保存在数据库中,以便后续使用。 总之,uniapp提供了一些便捷的方法和api,可以很容易地实现获取微信授权登录功能。使用这些方法,你可以在小程序中创建出一个完整的、具有用户注册与登录功能的应用程序。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海棠花未眠I

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值