专栏首页编程微刊小程序新方法 open-type获取头像昵称

小程序新方法 open-type获取头像昵称

小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的知识储备和应用技能。

参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

以下是原公告:

为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。

开发者可使用以下方式获取或展示用户信息:

一、小程序

1、使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。

详情参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/button.html

2、使用 open-data 展示用户基本信息。

详情参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

新的方法的使用

wxml:

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" >授权登录</button>

js:

Page({
  data: {},
  bindGetUserInfo: function(e) {
    var that = this;
    //此处授权得到userInfo
    console.log(e.detail.userInfo);
    //接下来写业务代码

    //最后,记得返回刚才的页面
    wx.navigateBack({
      delta: 1
    })
  }
})

效果如图所示:控制台之中打印出昵称,微信头像等个人信息。

再来一波demo示范一下

wxml:

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>

js:

var pageObject = {
  data: {
  
  },
  
  onGotUserInfo: function (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },
}

Page(pageObject)

效果如下:控制台之中打印出昵称,微信头像等个人信息。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序云开发实现删除更新功能

    用id:options.id把id先直接赋值过来,在页面加载的时候,页面里面就有了id,后续操作更加方便简单.

    王小婷
  • 前端切图:自制简易音乐播放器

    王小婷
  • 前端切图:自制简易音乐播放器

    王小婷
  • 浏览器前端优化

    这不仅会给我们带来快乐的用户和快乐的开发者,而且由于 Google 偏向于优化,SEO 排名也会显著提高。

    前端博客 : alili.tech
  • 2019-08-06 vue中使用bootstrapt jquery less

    用户4344670
  • Appium自动化(9) - appium元素定位的快速入门

    https://www.cnblogs.com/poloyy/category/1693896.html

    小菠萝测试笔记
  • 百度指数之图像数字识别(2)

    作者介绍: 叶成,数据分析师,就职于易居中国,热爱数据分析和挖掘工作,擅长使用Python倒腾数据。 在开始本位之前,这里先感谢一下本人公司的伟哥和孟哥(虽然孟...

    企鹅号小编
  • 王欣复出后的第一款产品

    说起「快播」,估计 80 后的人无人不知,无人不晓。那可是当时一个非常牛逼的视频播放软件。我今天要说的就是曾经的王铁匠「王欣」,也就是前快播的 CEO。

    叉叉敌
  • 已解决:No 'Access-Control-Allow-Origin' header is present on the requested resource'(跨域问题)

    这是常见的跨域请求问题,在前后端分离的项目中常见,前端项目中的请求路径直接用后台请求路径(例如:http://192.168.1.1:8080/demo/get...

    陈哈哈
  • THANKS GIVING

    童琪琳 ?   生活总是给予我们太多的东西,有些点滴、有些记忆,总是在不经意间被遗失。 从现在开始,试着去改变,让自己停下来,用心去感受那些点...

    用户1279178

扫码关注云+社区

领取腾讯云代金券