超详细的uniapp实现微信登录功能

uniapp实现微信授权登录功能,微信授权登录主要是用到了三个api,分别是uni.getProvider,uni.login,uni.getUserInfo

但是在此之前,先要做一些准备

前期准备

如果是APP端

微信授权登录的前提是有微信appid,和appsercret 

需要去微信开发者平台创建app,或者小程序填写相关信息申请应用的appid和appSecret,直接登录微信开发者平台微信开放平台 然后登录,按照提示进行申请就好啦,然后在manifest.json中进行配置

如果是没有appid和appSecret是无法是现在功能的

三个api

uni.getProvider - 获取服务供应商

uni-app官网

注意-在H5端是不能使用的,其实获取服务供应商也就是获取权限,它的参数 - 授权登录,分享,支付,推送,在白话一点理解,就是调用这个api,可以获取到当前手机允许该权限的软件

uni.login - 登录

uni-app官网

这里就具体讲微信的登录,这里只讲微信登录,登录接口可以是qq,微博登录,不同的登录在成功的返回函数中会有不同的值

在微信端,调用login后,会在authResult里面拿到下面的数据

 uni.getUserInfo-获取用户信息

uni-app官网

在这个api里面的成功回调里面,我们可以拿到用户信息对象,里面含有了用户的名称等信息

完整实现代码

微信小程序微信登录完整代码:

	getUserInfo() {
		return new Promise((resolve, reject) => {
			uni.getUserProfile({
				lang: 'zh_CN',
				desc: '用户登录', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,
				success: (res) => {
					console.log(res, 'resss')
					resolve(res.userInfo)
				},
				fail: (err) => {
					reject(err)
				}
			})
		})
	},
			
	getLogin() {
		return new Promise((resolve, reject) => {
			uni.login({
				success(res) {
					console.log(res, 'res')
					resolve(res)
				},
				fail: (err) => {
					console.log(err, 'logoer')
					reject(err)
				}
			})
		})
	},

   weixinLogin() {
		let that = this;
		uni.getProvider({
			service: 'oauth',
			success: function(res) {
			   //支持微信、qq和微博等
			   if (~res.provider.indexOf('weixin')) {
					console.log(res, 'ress')
					let userInfo = that.getUserInfo();
					let loginRes = that.getLogin();
					Promise.all([userInfo, loginRes]).then((result) =>{
						let userInfo = result[0];
						let loginRes = result[1];
						let access_token = loginRes.authResult.access_token;
						let openid = loginRes.authResult.openid;
						let data = Object.assign(loginRes.authResult, userInfo);
						that.$store.dispatch('Login', {
								type: 'weixin',
								url: that.url,
								data
						}).then(r => {
								if (r == 'ok') {
									uni.hideLoading()
								}
								}).catch(err => {
									uni.hideLoading();
									uni.showToast({
									icon: 'none',
									title: err
								})
							})
						})

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

对于微信小程序的微信登录,不用去配置权限,也不用使用getProvider,直接调用uni.login,uni.getUserInfo就可以啦

这里出现了新的api,uni.getUserProfile (微信基础库2.10.4版本对用户信息相关接口进行了调整,使用 uni.getUserInfo 获取得到的 userInfo 为匿名数据,建议使用 uni.getUserProfile 获取用户信息。)

为什么要用promise拉成平级?

在实践过程中,如果在uni.login中嵌套uni.getUserProfile会出现直接不能弹出获取授权弹框,因为login失败就不会在调用getUserProfile(授权行为) - 用户提现会相对较差

因此promise在这个时候就重出江湖  - 和上面是一样的,只是删除了其他多么的代码

	       getUserInfo() {
				return new Promise((resolve, reject) => {
					wx.getUserProfile({
						lang: 'zh_CN',
						desc: '用户登录', 
						success: (res) => {
							resolve(res.userInfo)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
 
			getLogin() {
				return new Promise((resolve, reject) => {
					wx.login({
						success(res) {
							resolve(res.code)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
 
            login() {
                let userInfo = this.getUserInfo();
				let wxCode = this.getLogin();
				
 
				Promise.all([userInfo, wxCode]).then((res) => {
					//都获取权限成功
				}).catch(err => {
					
				})
            }

app实现微信登录

	uni.getProvider({
		service: 'oauth',
		success: function(res) {
		  //支持微信、qq和微博等
		  if (~res.provider.indexOf('weixin')) {
				uni.login({
					provider: 'weixin',
				    success: function(loginRes) {
						// 获取用户信息
					    uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
							let data = Object.assign(loginRes.authResult, infoRes);
													
							that.$store.dispatch('Login', {
										type: 'weixin',
										url: that.url,
										data
										}).then(res => {
										if (res == 'ok') {
											uni.hideLoading()
										}
										fail: function(err) {
											uni.hideLoading();
											uni.showToast({
												icon: 'none',
												title: err
											})
										}
									})
								},
								fail: function(err) {
									uni.hideLoading();
									uni.showToast({
										icon: 'none',
										title: err
									})
								}
							});

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

app的微信登录需要进行前面的配置,其次是不用进行getUserProfile。

简易版本

直接登录获取用户信息

uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(loginRes.authResult);
    // 获取用户信息
    uni.getUserInfo({
      provider: 'weixin',
      success: function (infoRes) {
        console.log('用户昵称为:' + infoRes.userInfo.nickName);
      }
    });
  }
});

微信功能就到这里啦,还想看其他uniapp常见功能的可以看这个啦

注意:

关于拉成平级,实践过程中发现 - 微信程序的开发,平级可以避免授权登录弹框每次出现,但是在APP开发过程中,ios对于promise拉成平级,有时候会出现问题,这个时候建议嵌套使用

对于H5的微信登录,推荐使用引入js - UNI-APP 开发微信公众号(H5)JSSDK 的使用方式 - DCloud问答

uniapp实现常用功能_哆来A梦没有口袋的博客-CSDN博客_uniapp常用功能

记得点赞哦! 

相关推荐

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论 29

打赏作者

哆来A梦没有口袋

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值