uni-app微信小程序登录授权的实现

 更新时间:2020年05月22日 14:11:08   作者:南之骄阳  
这篇文章主要介绍了uni-app微信小程序登录授权的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

微信小程序授权是非常简单和常用的功能,但为了方便,还是在此记录一下要点:

首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接口写到该事件里面去

<button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx">{{loginInfo.openid != "" && loginInfo.openid != undefined ? "已授权" : "小程序授权"}}</button>

方法如下:

appLoginWx(){
        // #ifdef MP-WEIXIN
          uni.getProvider({
           service: 'oauth',
           success: function (res) {
            if (~res.provider.indexOf('weixin')) {
              uni.login({
                provider: 'weixin',
                success: (res) => {
                  _self.authorization = res.code;
                  uni.getUserInfo({
                    provider: 'weixin',
                    success: (info) => {//这里请求接口
                      console.log(res);
                      console.log(info);
                      
                    },
                    fail: () => {
                      uni.showToast({title:"微信登录授权失败",icon:"none"});
                    }
                  })
              
                },
                fail: () => {
                  uni.showToast({title:"微信登录授权失败",icon:"none"});
                }
              })
              
            }else{
              uni.showToast({
                title: '请先安装微信或升级版本',
                icon:"none"
              });
            }
           }
          });
          //#endif
      }

在 uni.login 和 uni.getUserInfo 被调用后,你可以获取到以下值用于继续请求后端给你的接口:

常用的值大概有:code 、iv 、encryptedData 和 个人基本信息,这些可以传给后端交换得到openid。

如果需要知道用户当前是否已经授权,则可以使用如下代码:

uniapp的授权文档,可以判断不同的授权类型:https://uniapp.dcloud.io/api/other/authorize?id=authorize

// #ifdef MP-WEIXIN
      uni.getSetting({
       success(res) {
        console.log("授权:",res);
        if (!res.authSetting['scope.userInfo']) {
          //这里调用授权
          console.log("当前未授权");
        } else {
          //用户已经授权过了
          console.log("当前已授权");
        }
       }
      })
      //#endif

到此这篇关于uni-app微信小程序登录授权的实现的文章就介绍到这了,更多相关uni-app小程序登录授权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • ES6 更易于继承的类语法的使用

    ES6 更易于继承的类语法的使用

    这篇文章主要介绍了ES6 更易于继承的类语法的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 微信小程序ibeacon三点定位详解

    微信小程序ibeacon三点定位详解

    这篇文章主要为大家详细介绍了微信小程序ibeacon三点定位的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 基于JS实现导航条flash导航条

    基于JS实现导航条flash导航条

    flash导航条在网站建设中应用比较广泛,此种效果给浏览者带来极好的视觉效果,非常棒,下面小编给大家介绍基于JS实现导航条flash导航条,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • js 表格排序(编辑+拖拽+缩放)

    js 表格排序(编辑+拖拽+缩放)

    js 表格排序(编辑+拖拽+缩放)实现代码,需要的朋友可以参考下。
    2010-05-05
  • javascript获取div的内容 精华篇

    javascript获取div的内容 精华篇

    用js获取div的内容的方法,其实原理就是利用innerText或innerHTML
    2009-05-05
  • uniapp微信小程序无法获取Vue.prototype值的解决方法

    uniapp微信小程序无法获取Vue.prototype值的解决方法

    在uniapp开发过程中,各端的一些高度会有区别,为了方便就要统一放到全局变量中,下面这篇文章主要给大家介绍了关于uniapp微信小程序无法获取Vue.prototype值的解决方法,需要的朋友可以参考下
    2022-10-10
  • 详解JavaScript对象类型

    详解JavaScript对象类型

    这篇文章主要为大家详细介绍了JavaScript对象类型,分析了JavaScript六种数据类型,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 基于JS制作一个网页版的猜数字小游戏

    基于JS制作一个网页版的猜数字小游戏

    这篇文章主要为大家详细介绍了如何利用HTML+CSS+JavaScript实现一个简单的网页版的猜数字小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 浅谈webpack4.x 入门(一篇足矣)

    浅谈webpack4.x 入门(一篇足矣)

    这篇文章主要介绍了浅谈webpack4.x 入门(一篇足矣),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 本地JS文件批量压缩的操作方法

    本地JS文件批量压缩的操作方法

    这篇文章主要介绍了本地JS文件批量压缩的方法,由于之前压缩的JS文件都比较少,都是手动压缩的。这次需要压缩的文件比较多,所以用了批量压缩,特此记录一下,方便大家和自己以后再用到的时候备忘
    2022-12-12

最新评论