超详细的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常用功能

详解微信登录流程

微信的登录流程具体是什么呢？微信登录是前端进行获得用户权限允许，后端真正去和微信接口服务对接

小程序登录 | 微信开放文档 

记得点赞哦！