Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序wx.getUserInfo接口获取用户信息失败,新版SDK怎样获取用户信息

微信小程序wx.getUserInfo接口获取用户信息失败,新版SDK怎样获取用户信息

作者头像
极客开发者
发布于 2022-01-18 03:11:30
发布于 2022-01-18 03:11:30
3.2K01
代码可运行
举报
文章被收录于专栏:极客开发者极客开发者
运行总次数:1
代码可运行

一、简述

微信小程序的官方文档中提到,调用wx.getUserInfo接口将能获取小程序用户的信息,接口返回的信息格式如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "nickName": "Band",
  "gender": 1,
  "language": "zh_CN",
  "city": "Guangzhou",
  "province": "Guangdong",
  "country": "CN",
  "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}

不过,你会发现调用这个接口并没有返回用户信息。逛论坛才知道,这个接口被抛弃了。哎!但是腾讯也提供了新的方式,以下演示获取用户信息的流程。

参考链接: https://developers.weixin.qq.com/community/develop/doc/000aee01f98fc0cbd4b6ce43b56c01

二、实现过程

1.使用 button 组件,并将 open-type 指定为 getUserInfo 类型,用户允许授权后,可获取用户基本信息。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<button open-type="getUserInfo" lang="zh_CN" bindtap="onGotUserInfo" bindgetuserinfo="bindGetUserInfo">获取用户信息</button>

属性说明

  1. open-type:通过不同属性值,小程序会弹出一个不同的授权提示窗口,让用户选择是否授权。我们要获取用户信息,所以值指定的是getUserInfo,更多属性值可以参考微信小程序
  2. bindtap:绑定一个授权结果回调函数,在js文件中创建对应方法,详细代码如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
onGotUserInfo: function(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  }

点击按钮之后,弹出授权窗口,如下图:

  1. bindgetuserinfo:可以从bindgetuserinfo回调中获取到用户信息,在这里我填写的是bindGetUserInfo,要在js文件中创建对应的方法,详细代码如下
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
bindGetUserInfo: function(e) {
    console.log('回调成功')
    console.dir(e)
  }

上面回调方法中,我们打印返回的数据,结果如下截图所示:

可以看到,在回调信息中,包含的微信用户基本信息的键值对,如下示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
userInfo:
avatarUrl: "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL8G6eBq1K7sk3CiceZ1vbY9IHO4kmJWQyFcEPc9trIGADva7ricI1ic7Zia8eWYAy4LLJwueejXOwKcg/132"
city: ""
country: "中国"
gender: 1
language: "zh_CN"
nickName: "碧海蓝天"
province: "贵州"

用户第一次点击按钮时弹出授权窗口,授权之后将不再弹出,bindtap回调方法第二次执行也不会再有返回数据。因此可以使用bindgetuserinfo回调方法,获取用户信息,方便提交给业务服务器

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

open-data控件用于展示微信开放的数据。不过呢,这个控件只能显示数据,在写这篇博客的时候,微信是不支持读取open-data上的数据的,不知道将来会不会支持! 详细代码如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view class="panel">
    <view>昵称:
      <open-data type="userNickName" lang="zh_CN"></open-data>
    </view>
    <view>头像:
      <open-data class="avatar" type="userAvatarUrl" lang="zh_CN"></open-data>
    </view>
    <view>性别:
      <open-data type="userGender" lang="zh_CN"></open-data>
    </view>
    <view>城市:
      <open-data type="userCity" lang="zh_CN"></open-data>
    </view>
    <view>省份:
      <open-data type="userProvince" lang="zh_CN"></open-data>
    </view>
    <view>国家:
      <open-data type="userCountry" lang="zh_CN"></open-data>
    </view>
    <view>语言:
      <open-data type="userLanguage" lang="zh_CN"></open-data>
    </view>
  </view>

运行项目后,看到效果如下图:

在open-data标签中,最关键的属性是type,标志开放数据类型。详细说明可以参考微信小程序open-data的开放文档

3.所有代码

以下是此博客涉及的所有代码

index.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--index.wxml-->
<view class="container">
  <view class="panel">
    <button open-type="getUserInfo" lang="zh_CN" bindtap="onGotUserInfo" bindgetuserinfo="bindGetUserInfo">获取用户信息</button>
  </view>

  <view class="panel">
    <view>昵称:
      <open-data type="userNickName" lang="zh_CN"></open-data>
    </view>
    <view>头像:
      <open-data class="avatar" type="userAvatarUrl" lang="zh_CN"></open-data>
    </view>
    <view>性别:
      <open-data type="userGender" lang="zh_CN"></open-data>
    </view>
    <view>城市:
      <open-data type="userCity" lang="zh_CN"></open-data>
    </view>
    <view>省份:
      <open-data type="userProvince" lang="zh_CN"></open-data>
    </view>
    <view>国家:
      <open-data type="userCountry" lang="zh_CN"></open-data>
    </view>
    <view>语言:
      <open-data type="userLanguage" lang="zh_CN"></open-data>
    </view>
  </view>

</view>

index.wxss

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**index.wxss**/

.panel{
  margin-top: 20px;
}

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//index.js
//获取应用实例
const app = getApp()

Page({
  onGotUserInfo: function(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },

  bindGetUserInfo: function(e) {
    console.log('回调成功')
    console.dir(e)
  },
})

三、总结

总之,微信小程序不再开放wx.getUserInfo接口,也就是说,我们要获取用户信息,需要引导用户手动点击一个button按钮弹出授权窗口,让用户手动授权,开发者才能成功获取用户信息。也许这样对开发者来说麻烦了点,不过,如果以用户的角度来看,这样确实比较安全。

管它呢,它是腾讯它说了算!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-12-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极客开发者up 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
零基础学小程序006---小程序获取用户信息用户昵称
上一节给大家讲了零基础学小程序005---小程序登陆注册功能实现。我们有时候只需要获取到微信用户的用户名和用户信息就可以了,不一定非得让用户去注册。所以这一节来给大家讲一下如何获取用户信息。 先来看下请求到的结果
编程小石头
2020/10/22
6070
零基础学小程序006---小程序获取用户信息用户昵称
小程序新方法 open-type获取头像昵称
小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的知识储备和应用技能。
王小婷
2018/12/04
2.4K0
小程序新方法 open-type获取头像昵称
微信小程序-用户授权获取信息
open-data是小程序提供的不需要用户授权获取用户信息的组件,但是不能通过js来拿值,所以只能作为开发人员快速开发显示用的。
别盯着我的名字看
2022/06/09
1.6K0
微信小程序获取用户信息(wx.getUserInfo)
微信小程序获取用户信息API:wx.getUserInfo(Object object)
德顺
2019/11/13
2.6K0
微信小程序获取用户信息(wx.getUserInfo)
微信小程序获取用户基本信息的几种方式
打印传过来的事件对象可以看到事件对象detail中的userInfo属性就是用户信息
peng_tianyu
2022/12/15
3.2K0
微信小程序获取用户基本信息的几种方式
【微信小程序开发】使用button标签的open-type="getUserInfo"引导用户去授权
> wx.getUserInfo(OBJECT) 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用
TimothyJia
2022/05/05
1.8K0
微信小程序之获取并解密用户数据(获取openid,nickName等)
本文主要总结微信小程序通过后台请求访问微信用户信息 创建一个微信小程序工程(自行百度) 微信小程序index.js代码 //index.js //获取应用实例 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, backUserInfo:{},//后台得到的微信用户信息 hasUserInfo: false, canIUse: wx.canIUse('button.o
小帅丶
2021/12/28
5.2K0
微信小程序之获取并解密用户数据(获取openid,nickName等)
微信小程序获取用户信息、获取用户手机号码
button 按钮中open-type有两种方式获取用户的信息:getUserInfo/getPhoneNumber
前端小tips
2021/12/11
2.6K0
微信小程序获取用户信息、获取用户手机号码
微信小程序获取用户信息
在微信小程序中,如果想获取用户的昵称等信息可以不用另外写后台,如果需要获取用户的unionId,则需要后台来提供获取sessionKey和解码encryptedData。
OECOM
2020/07/01
3.4K0
微信使用getUserInfo和getUserProfile获取用户信息
getUserProfile是推荐使用的,官方在2021年4月之后,就不在推荐使用getUserInfo来获取用户信息(昵称和头像)。
软件小生活
2021/09/10
2.5K0
小程序最新标准授权登录流程+逻辑
小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的知识储备和应用技能。
王小婷
2018/12/25
1.7K0
微信小程序授权登录与用户信息保存详解(微信报修小程序源码讲解六)
提醒:小程序端源码已经更新整理,相比旧源码,新源码简洁、结构清晰、需要的同学及时找我获取源码。
热心的程序员
2020/04/02
8.7K0
微信小程序授权登录与用户信息保存详解(微信报修小程序源码讲解六)
微信小程序获取用户信息
微信小程序获取用户手机号码(类似膜拜手机号授权),自己写的程序也用到了,查看微信小程序文档,原来微信提供了方法, <button open-type="getPhoneNumber" bindget
honey缘木鱼
2018/06/13
19.2K1
微信网页授权并获取用户信息
这一篇写的还是很清楚的,所以推荐一下,后面我会补一个Vue版本微信授权登录的例子。
前端黑板报
2018/12/26
3.2K1
uniapp 微信小程序获取用户信息、手机号
风花一世月
2024/03/19
1.3K0
[小程序]微信小程序登陆并获取用户信息
1.小程序js端调用框架登陆API,获取到一个临时code,拿着这个code去调用自己的服务端接口
唯一Chat
2019/09/10
2.1K0
[小程序]微信小程序登陆并获取用户信息
微信小程序官方组件展示之表单组件button源码
以下将展示微信小程序之表单组件button源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。
软件事业部
2022/08/19
8990
【微信小程序+Python后台从0到1实战开发】02微信小程序基础事件及数据获取
day02 微信小程序 1. 跳转 1.1 对标签绑定点击事件 <view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view> Page({ ... /** * 点击绑定的事件 */ clickMe:function(e){ var nid = e.currentTarget.dataset.nid; console.log(nid); } }) 1.2 页面跳转 wx.navigateTo({
天道Vax的时间宝藏
2021/08/11
1.1K0
微信小程序微信登录
开发接口 登录 wx.login wx.checkSession 签名加密
达达前端
2019/07/15
35.5K0
微信小程序微信登录
【学习】微信小程序开发
赋值: 在方法中: this.setData({ msg: “World” })
devi
2021/08/18
6210
推荐阅读
相关推荐
零基础学小程序006---小程序获取用户信息用户昵称
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验