微信小程序学习笔记之登录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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 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
一个MYSQL操作类
2006/11/16 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
暑期教师培训方案
2014/06/07 职场文书
中秋节活动总结
2014/08/29 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
中学生学习保证书
2015/02/26 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书