微信小程序获取用户信息的两种方法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实用代码片段集合
Aug 12 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
在视频前插入广告
2006/11/20 Javascript
jQuery的一些注意
2006/12/06 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
实例浅析js的this
2016/12/11 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
js实现数字滚动特效
2019/12/16 Javascript
Python解析树及树的遍历
2016/02/03 Python
一张图带我们入门Python基础教程
2017/02/05 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python实现图片识别汽车功能
2018/11/30 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
预备党员入党思想汇报
2014/01/04 职场文书
父母寄语大全
2014/04/12 职场文书
《穷人》教学反思
2016/02/19 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android