微信小程序授权登陆及每次检查是否授权实例代码


Posted in Javascript onSeptember 18, 2019

授权登录

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo" class="fix">登录</button>
//index.js
//获取应用实例
var APPID ='xxx'
var SECRET = 'xxx'
const app = getApp()
Page({
 data: {
  list:[],
  userInfo:null
 },
 //事件处理函数
 onGotUserInfo:function (e) {
  if (e.detail.userInfo != undefined && app.globalData.isok == false) {
   console.log(e.detail.userInfo)
     wx.login({
      success: function (data) {
       console.log('获取登录 Code:' + data.code)
       var postData = {
        code: data.code
       };
       wx.request({
        // url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + APPID + '&secret=' + SECRET + '&js_code=' + postData.code + '&grant_type=authorization_code',
        url: 'https://m.renyiwenzhen.com/rymember.php?mod=xcxlogin&code=' + postData.code + '&nickname=' + e.detail.userInfo.nickName,
        data: {},
        header: {
         'content-type': 'application/json'
        },
        success: function (res) {
         // openid = res.data.openid //返回openid
         console.log(res.data);
         wx.setStorage({
          key: "unionid",
          data: res.data.unionid
         })
         wx.navigateTo({
          url: '../archives/archives'
         })
        },
        fail: function () {
         console.log('1');
        }
       })
      },
      fail: function () {
       console.log('登录获取Code失败!');
      }
     })


  }
  else if (app.globalData.isok==true) {
      wx.navigateTo({
       url: '../archives/archives'
      })
  }
 },
 onLoad: function () {
  var that =this
  wx.request({
   url: 'https://m.xxx.com/xcx_ajax.php?action=yimiaolist', //仅为示例,并非真实的接口地址
   method: 'post',
   header: {
    'content-type': 'application/json' // 默认值
   },
   success(res) {
    console.log(res.data)
    that.setData({
     list: res.data
    })
   }
  })
   if (app.globalData.userInfo) { //获取用户信息是一个异步操作,在onLoad函数加载的时候app.js中的onLaunch可能还没有加载,所以需要判断是否获取成功
    this.setData({
     userInfo: app.globalData.userInfo,
     hasUserInfo: true
    })
   } else if (this.data.canIUser) { //判断canIUser的值是否为true,实则在判断微信小程序版本是否支持相关属性 
    app.userInfoReadyCallback = (res) => { // userInfoReadyCallback:userInfo的回调函数,声明一个回调函数,将回调函数传给app.js,userInfo加载完成后会执行这个回调函数,这个回调函数会将获取的getUserInfo的结果直接传回来
     // 在app.js中获取用户信息之后调用这个函数,结果放在函数的参数中
     this.setData({
      userInfo: res.userInfo,
      hasUserInfo: true
     })
    }
   } else {
    wx.getUserInfo({ //在老的版本中是可以直接调用授权接口并获取用户信息
     success: (res) => {
      this.setData({
       userInfo: res.userInfo,
       hasUserInfo: true
      })
     }
    })
   }
 }
})

每次检查是否授权

//app.js
App({
  globalData: {
   userInfo: null,
   isok:false,
   unionid:null
  },
 onLaunch: function () {
 /* 已授权之后,自动获取用户信息 */
 // 判断是否授权
 wx.getSetting({
  success: (res) => { //箭头函数为了处理this的指向问题 
   if (res.authSetting["scope.userInfo"]) {
    console.log("已授权");
    // 获取用户信息
    wx.getUserInfo({
     success: (res) => { //箭头函数为了处理this的指向问题
      this.globalData.isok=true
      var that =this
      console.log(res.userInfo); //用户信息结果
      wx.getStorage({
       key: 'unionid',
       success(res) {
        that.globalData.unionid=res.data
       }
      })
      this.globalData.userInfo = res.userInfo;
      if (this.userInfoReadyCallback) { //当index.js获取到了globalData就不需要回调函数了,所以回调函数需要做做一个判断,如果app.js中有和这个回调函数,那么就对这个函数进行调用,并将请求到的结果传到index.js中
       this.userInfoReadyCallback(res.userInfo);
      }
     }
    })
   }
   else{
    console.log("未授权");
    wx.removeStorage({
     key: 'unionid'
    })
   }
  }
 })
 }
})

总结

以上所述是小编给大家介绍的微信小程序授权登陆及每次检查是否授权实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
用js实现博客打赏功能
Oct 24 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
layui的layedit富文本赋值方法
Sep 18 #Javascript
vue语法自动转typescript(解放双手)
Sep 18 #Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 #Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 #Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 #Javascript
过滤器vue.filters的使用方法实现
Sep 18 #Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 #Javascript
You might like
PHP Mysql编程之高级技巧
2008/08/27 PHP
PHP抽象类 介绍
2012/06/13 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python中操作符重载用法分析
2016/04/29 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
Python 实现向word(docx)中输出
2020/02/13 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
python3处理word文档实例分析
2020/12/01 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
UNIX文件系统分类
2014/11/11 面试题
公司企业表扬信
2014/01/11 职场文书
父母寄语大全
2014/04/12 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
Redis实现分布式锁的五种方法详解
2022/06/14 Redis