微信小程序获取用户信息的两种方法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 EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
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中explode与split的区别介绍
2012/10/03 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
javascript 作用于作用域链的详解
2017/09/27 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
用js实现放大镜效果
2020/10/28 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python实现门限回归方式
2020/02/29 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
导游实习生自荐书
2014/01/28 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
电台实习生求职信
2014/02/25 职场文书
职务说明书范文
2014/05/07 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis