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


Posted in Javascript onMay 22, 2020

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

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。

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

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

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小程序登录授权内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
React-router4路由监听的实现
Aug 07 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
微信小程序实现音乐播放器
Nov 20 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
uni-app使用微信小程序云函数的步骤示例
May 22 #Javascript
AutoJs实现刷宝短视频的思路详解
May 22 #Javascript
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
微信小程序转化为uni-app项目的方法示例
May 22 #Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 #Javascript
You might like
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
JavaScript 实现继承的几种方式
2021/02/19 Javascript
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
Python  Django 母版和继承解析
2019/08/09 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
求网格中的黑点分布
2013/11/06 面试题
C# .NET面试题
2015/11/28 面试题
人事主管岗位职责范本
2013/12/04 职场文书
国培教师自我鉴定
2014/02/12 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
企业文化演讲稿
2014/05/20 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
婚礼答谢词
2015/01/04 职场文书
党员评议自我评价
2015/03/03 职场文书
2015年药房工作总结
2015/04/25 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python