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常用功能
详解微信登录流程
微信的登录流程具体是什么呢？微信登录是前端进行获得用户权限允许，后端真正去和微信接口服务对接
小程序登录 | 微信开放文档
记得点赞哦！