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

所属分类: 网络编程 / JavaScript 阅读数: 1428
收藏 0 赞 0 分享

本文实例讲述了微信小程序学习笔记之登录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按钮不再提示授权确认信息。 

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

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多