微信小程序学习笔记之登录API与获取用户信息操作图文详解


Posted in Javascript onMarch 29, 2019

本文实例讲述了微信小程序学习笔记之登录API与获取用户信息操作。分享给大家供大家参考,具体如下:

前面介绍了微信小程序跳转页面、传递参数获得数据,这里来分析一下登录API与获取用户信息操作方法。

【小程序登录】wx.login()

app.js:

App({
 onLaunch: function () {
  // 登录
  wx.login({
   success: function (res) {
    if (res.code) {
     //发起网络请求
     wx.request({
      url: 'https://www.msllws.top/delcode.php',
      data: {
       code: res.code
      }
     })
    } else {
     console.log('登录失败!' + res.errMsg)
    }
   }
  });
 }
})

初始化后得到了临时登录凭证code,使用wx.request()发送code,请求后台接口获取【会话密钥session_key】和【用户唯一标识openid】,满足UnionID下发条件时还可以获得【用户在开放平台的唯一标识符unionid】。

后台接收code的接口delcode.php:

<?php 
  $code = $_GET['code'];
  $appid = 'wx1aebd07bdcf596b8';
  $secret = '9ee8211007b81efd8c11d7d82d3b8658';
  $url = 'https://api.weixin.qq.com/sns/jscode2session?appid='.$appid.'&secret='.$secret.'&js_code='.$code.'&grant_type=authorization_code';
  $res = file_get_contents($url);

  //(省略业务逻辑:保存返回结果中的openid与用户userid关联......)

  echo $res;

 请求返回结果:

微信小程序学习笔记之登录API与获取用户信息操作图文详解

(unionid需要小程序绑定已认证的微信开放平台才可以获得)

【获取用户信息】wx.getUserInfo()

首先借助button来授权登录,login.wxml:

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>

login.js如下:

Page({
 data: {
  //判断getUserInfo是否在当前版本可用
  canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 bindGetUserInfo(e) {
  console.log(e.detail.userInfo)
 }
})

首次点击button按钮提示微信授权,允许后调用bindGetUserInfo函数打印获得的用户信息

微信小程序学习笔记之登录API与获取用户信息操作图文详解

微信小程序学习笔记之登录API与获取用户信息操作图文详解

此时修改login.js如下,使用wx.getSetting()获得用户信息 

(调用wx.getUserInfo()之前需要调用wx.getSetting()获取用户当前的授权状态,返回结果中如果包含【scope.userInfo】,说明用户已对用户信息进行授权,可以直接调用wx.getUserInfo()获取用户信息)

Page({
 data: {
  //判断getUserInfo是否在当前版本可用
  canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 onLoad: function () {
  // 查看是否授权
  wx.getSetting({
   success(res) {
    if (res.authSetting['scope.userInfo']) {
     // 已经授权,直接调用getUserInfo获取用户信息
     wx.getUserInfo({
      success: function (res) {
       console.log(res.userInfo)
      }
     })
    }
   }
  })
 },
 bindGetUserInfo(e) {
  console.log(e.detail.userInfo)
 }
})

重新编译,页面加载获得同上用户信息:

微信小程序学习笔记之登录API与获取用户信息操作图文详解

此时再点击button按钮不再提示授权确认信息。 

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
JavaScript运算符小结
Jun 03 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 #Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 #Javascript
详解a标签添加onclick事件的几种方式
Mar 29 #Javascript
node(koa2) web应用模块介绍详解
Mar 29 #Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 #Javascript
浅谈js闭包理解
Mar 28 #Javascript
微信小程序中转义字符的处理方法
Mar 28 #Javascript
You might like
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP连接access数据库
2015/03/27 PHP
JS获取父节点方法
2009/08/20 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
vue实现购物车小案例
2019/09/27 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python实现简单登陆系统
2018/10/18 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
python 读取、写入txt文件的示例
2020/09/27 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
科学育儿宣传标语
2014/10/08 职场文书
学习十八大的感悟
2015/08/11 职场文书
导游词之山东孔庙
2019/11/04 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL