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

2024-07-09 10:56| 来源: 网络整理| 查看: 265

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常用功能

详解微信登录流程

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

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

记得点赞哦！

【本文地址】

公司简介

联系我们