uni-app中使用微信一键登录-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app中使用微信一键登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

一、微信一键登录是什么？

二、使用步骤

1.在onLoad获取用户登录信息code

2.编写页面button按钮

3.根据pen-type="getPhoneNumber"获取的用户信息传值给后端

总结

前言

在uni-app中使用微信一键登录分析和操作流程

一、微信一键登录是什么？

示例：微信一键登录可以获取客户的code,encryptedData,iv进行登录，后端根据appid和secret获取用户信息

二、使用步骤

1.在onLoad获取用户登录信息code

代码如下（示例）：

uni.login({
                    provider: 'weixin',
                    success: (res) => {
                        console.log(res)
                        this.wxcode = res.code
                    }
                })

2.编写页面button按钮

代码如下（示例）：

<button shape="circle" type="primary" link="true" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信一键登录</button>

3.根据pen-type="getPhoneNumber"获取的用户信息传值给后端

// 微信一键登录
           getPhoneNumber(e) {

               if (e.detail.errMsg.indexOf('deny') > -1) {
                   // e.detail.errMsg
                   //获取手机号失败，前往手机登录界面
                   uni.showToast({
                       title: "获取手机号失败，请前往手机登录界面",
                       icon: "none"
                   })
                   this.routeTo();
                   return;
               } else {
                   const encryptedData = e.detail.encryptedData;
                   if (typeof encryptedData === 'undefined' || encryptedData == null || encryptedData === '') {
                       //前往手机登录界面
                       uni.showToast({
                           title: "获取手机号失败，请前往手机登录界面",
                           icon: "none"
                       })
                       this.routeTo();
                       return;
                   }
               }

               uni.showLoading({
                   title: '加载中...'
               });

// 后端请求 bindWxMobileLogin接口
               bindWxMobileLogin({
                       code: this.wxcode,
                       iv: e.detail.iv,
                       encryptedData: e.detail.encryptedData,
                       // inviter_mobile: "",
                   })
                   .then((res) => {
                       uni.hideLoading()
                       // 缓存token,user，opendId的值
                       uni.setStorageSync('token', res.token)
                       uni.setStorageSync('pUser', res.pUser)
                       uni.setStorageSync('openId', res.openId)
                       uni.reLaunch({
                           url: this.route,
                           animationType: 'pop-in'
                       });

                   })
                   .catch((e) => {
                       uni.showToast({
                           title: "获取手机号失败，请前往手机登录界面",
                           icon: "none"
                       })
                       this.routeTo();
                       return;
                       // uni.hideLoading()
                       // this.getwxLogin()
                       // this.disabled = false;
                   });
           },

// 请求失败想要跳转的页面
           routeTo() {
               return uni.navigateTo({
                   url: "./phone-login",
                   animationDuration: "pop-in",
               })
           },

总结

微信一键登录很简单，只需要调用uni.login(),根据 open-type="getPhoneNumber"获取手机号信息，使用@getphonenumber方法，但是有一点很重要，那就是前后端想要保持一样的appid ，还有您使用的appid一定是认证过的，不然可能会报错，或者调不通等情况。文章来源地址https://www.toymoban.com/news/detail-492665.html

到了这里，关于uni-app中使用微信一键登录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！