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


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 相关文章推荐
Javascript 强制类型转换函数
May 17 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
JavaScript执行机制详细介绍
Dec 06 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
杏林同学录(三)
2006/10/09 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
python range()函数取反序遍历sequence的方法
2018/06/25 Python
django 环境变量配置过程详解
2019/08/06 Python
Python读取实时数据流示例
2019/12/02 Python
python如何把字符串类型list转换成list
2020/02/18 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
怎样创建、运行java程序
2014/08/01 面试题
物流管理毕业生自荐信范文
2014/03/15 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
python之基数排序的实现
2021/07/26 Python