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


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控制table某列不显示的方法
Mar 16 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
javascript文本模板用法实例
Jul 31 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
angular4+百分比进度显示插件用法示例
May 05 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
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
python合并同类型excel表格的方法
2018/04/01 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
手机业务员岗位职责
2013/12/13 职场文书
给老师的道歉信
2014/01/11 职场文书
社区工作者先进事迹
2014/01/18 职场文书
三峡大坝导游词
2015/01/31 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
小程序自定义轮播图圆点组件
2022/06/25 Javascript