微信小程序学习笔记之登录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 相关文章推荐
二级域名转向类
Nov 09 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
Vue波纹按钮组件制作
Apr 30 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 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-fpm 参数的深入理解
2013/06/03 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
php实现文件上传基本验证
2020/03/04 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python实现大文件排序的方法
2015/07/10 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
简单介绍python封装的基本知识
2019/08/10 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
如何真正的了解python装饰器
2020/08/14 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
毕业生大学生活自我总结
2014/01/31 职场文书
创意婚礼策划方案
2014/05/18 职场文书
亚运会口号
2014/06/20 职场文书
远程教育培训心得体会
2016/01/09 职场文书