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


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 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
JS返回顶部实例代码
Aug 09 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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内存使用情况如何获取
2015/10/10 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
Python字典操作简明总结
2015/04/13 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python字符串格式化方式解析
2019/10/19 Python
python滑块验证码的破解实现
2019/11/10 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
心理咨询专业自荐信
2014/07/07 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
节约用电倡议书
2015/04/28 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
公司财务管理制度
2015/08/04 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python