微信小程序获取用户信息的两种方法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代码优化 遍历篇
Nov 01 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP 数组基础知识小结
2010/08/20 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
小程序tab页无法传递参数的方法
2018/08/03 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
python中正则表达式与模式匹配
2019/05/07 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
Python爬取某平台短视频的方法
2021/02/08 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
社区母亲节活动记录
2014/03/06 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
家长对孩子的寄语
2015/02/26 职场文书
员工辞退通知书
2015/04/17 职场文书
灵魂歌王观后感
2015/06/17 职场文书
电工实训心得体会
2016/01/14 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python