微信小程序获取用户信息的两种方法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 相关文章推荐
lib.utf.js
Aug 21 Javascript
img的onload的另类用法
Jan 10 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
Javascript原型链及instanceof原理详解
May 25 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
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
Python爬虫爬验证码实现功能详解
2016/04/14 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python实现FM算法解析
2019/06/18 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
Python logging模块handlers用法详解
2020/08/14 Python
python从PDF中提取数据的示例
2020/10/30 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
努力学习演讲稿
2014/05/10 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
党支部季度考核意见
2015/06/02 职场文书
2016中秋节问候语
2015/11/11 职场文书
学术会议开幕词
2016/03/03 职场文书
安全生产协议书
2016/03/22 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python