微信小程序获取用户信息的两种方法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 最近浏览过的商品的功能实现代码
May 14 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
详解package.json版本号规则
Aug 01 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
小程序自动化测试的示例代码
Aug 11 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.MVC的模板标签系统(三)
2006/09/05 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php实现微信支付之现金红包
2018/05/30 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
js 提交和设置表单的值
2008/12/19 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python 文件操作实现代码
2009/10/07 Python
python练习程序批量修改文件名
2014/01/16 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
详解Python用户登录接口的方法
2019/04/17 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
Python Merge函数原理及用法解析
2020/09/16 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
楚门的世界观后感
2015/06/03 职场文书
矛盾论读书笔记
2015/06/29 职场文书
五一晚会主持词
2015/07/01 职场文书