微信小程序获取用户信息的两种方法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 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
jQuery简单实现日历的方法
May 04 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
vue 实现input表单元素的disabled示例
Oct 28 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中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
PHP输入流php://input介绍
2012/09/18 PHP
jquery下checked取值问题的解决方法
2012/08/09 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JavaScript 基本概念
2015/01/20 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
大学军训感言300字
2014/03/09 职场文书
法人委托书的范本格式
2014/09/11 职场文书
离婚协议书怎么写
2014/09/12 职场文书
离婚代理词范文
2015/05/23 职场文书
我的长征观后感
2015/06/09 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python