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

 更新时间:2019年03月29日 09:52:58   作者:李维山  
这篇文章主要介绍了微信小程序学习笔记之登录API与获取用户信息操作,结合实例形式分析了微信小程序登陆请求及后台交互相关操作技巧,并结合图文形式进行说明,需要的朋友可以参考下

本文实例讲述了微信小程序学习笔记之登录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;

 请求返回结果:

(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函数打印获得的用户信息

此时修改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)
 }
})

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

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

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

相关文章

  • 防止页面url缓存中ajax中post请求的处理方法

    防止页面url缓存中ajax中post请求的处理方法

    这篇文章主要介绍了防止页面url缓存中ajax中post请求的处理方式的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • 使用uni-app打包H5的图文教程

    使用uni-app打包H5的图文教程

    uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS,Android,H5,以及各种小程序(微信/支付宝/百度/头条/ QQ /钉钉)等多个平台,这篇文章主要给大家介绍了关于使用uni-app打包H5的相关资料,需要的朋友可以参考下
    2022-11-11
  • uniapp获取底部安全距离以及状态栏高度等

    uniapp获取底部安全距离以及状态栏高度等

    最近在用uniapp开发的时候遇到了一些问题,下面这篇文章主要给大家介绍了关于uniapp获取底部安全距离以及状态栏高度等的相关资料,需要的朋友可以参考下
    2022-10-10
  • 整理一下常见的IE错误

    整理一下常见的IE错误

    多年以来,IE一直都是最难于调试JavaScript 错误的浏览器。IE给出的错误消息一般很短又语焉不详。而且上下文信息也很少,有时甚至一点都没有。下面几小节将分别探讨一些在IE中难于调试的JavaScript 错误
    2016-11-11
  • JS读取XML文件示例代码

    JS读取XML文件示例代码

    读取XML文件的方法有很多,在本文为大家详细介绍下使用js是如何做到的,感兴趣的朋友可以参考下本文
    2013-11-11
  • 使用JavaScript实现一个小程序之99乘法表

    使用JavaScript实现一个小程序之99乘法表

    这篇文章主要介绍了使用JavaScript实现一个小程序之99乘法表的相关资料,需要的朋友可以参考下
    2017-09-09
  • JavaScript中apply与call的用法意义及区别说明

    JavaScript中apply与call的用法意义及区别说明

    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别。
    2010-04-04
  • JavaScript实现的斑马线表格效果【隔行变色】

    JavaScript实现的斑马线表格效果【隔行变色】

    这篇文章主要介绍了JavaScript实现的斑马线表格效果,通过javascript针对table表格的遍历与运算实现隔行变色功能,非常简单实用,需要的朋友可以参考下
    2017-09-09
  • JavaScript深拷贝的一些踩坑记录

    JavaScript深拷贝的一些踩坑记录

    这篇文章主要给大家介绍了关于JavaScript深拷贝的一些踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • JavaScript数组的5种迭代方法

    JavaScript数组的5种迭代方法

    这篇文章主要为大家详细介绍了JavaScript数组的5种迭代方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09

最新评论