微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析


Posted in Javascript onMay 03, 2019

本文实例讲述了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data。分享给大家供大家参考,具体如下:

在此之前,小程序获取微信的头像,昵称之类的用户信息,我用的都是wx.getUserInfo,例如:

onLoad: function (options) {
  var that = this;
  //获取用户信息
  wx.getUserInfo({
    success: function (res) {
      console.log(res);
      that.data.userInfo = res.userInfo;
      that.setData({
        userInfo: that.data.userInfo
      })
    }
  })
},

wx.getUserInfo需要用户授权scope.userInfo,也就是那个授权弹窗。

微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

但是!!!重点来了,自从微信接口有了新的调整之后 这个wx.getUserInfo()便不再出现授权弹窗了,需要使用button做引导~

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

js:

Page({
 data: {
  canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 onLoad: function() {
  // 查看是否授权
  wx.getSetting({
   success: function(res){
    if (res.authSetting['scope.userInfo']) {
     // 已经授权,可以直接调用 getUserInfo 获取头像昵称
     wx.getUserInfo({
      success: function(res) {
       console.log(res.userInfo)
      }
     })
    }
   }
  })
 },
 bindGetUserInfo: function(e) {
  console.log(e.detail.userInfo)
 }
})

这就是等于一步变两步了~现在用button的话 可以在产品上多加引导,不会显得那么突兀的出来一个弹窗了

然鹅,如果你仅仅只是想展示用户信息的话,那便使用open-data 吧,如下:

<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

只需要这两行wxml的代码,便可展示微信昵称和头像,是不是很惊喜!

微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

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

Javascript 相关文章推荐
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
基于javascript实现放大镜特效
Dec 03 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 #Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 #Javascript
详解微信小程序缓存--缓存时效性
May 02 #Javascript
详解如何使用router-link对象方式传递参数?
May 02 #Javascript
详解Vue底部导航栏组件
May 02 #Javascript
微信小程序搭建自己的Https服务器
May 02 #Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 #Javascript
You might like
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
php微信开发之百度天气预报
2016/11/18 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
Python标准库itertools的使用方法
2020/01/17 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
八一建军节活动方案
2014/02/10 职场文书
促销活动方案模板
2014/02/24 职场文书
贷款担保申请书
2014/05/20 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
实习协议书
2015/01/27 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
小学三年级数学教学反思
2016/02/16 职场文书