100字范文 > 微信小程序wx.getUserInfo接口获取用户信息失败新版SDK怎样获取用户信息

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

时间：2019-06-09 21:01:52

一、简述

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

{"nickName": "Band","gender": 1,"language": "zh_CN","city": "Guangzhou","province": "Guangdong","country": "CN","avatarUrl": "/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"}

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

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

二、实现过程

1.使用 button 组件，并将 open-type 指定为 getUserInfo 类型，用户允许授权后，可获取用户基本信息。

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

属性说明

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

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

点击按钮之后，弹出授权窗口，如下图：

bindgetuserinfo：可以从bindgetuserinfo回调中获取到用户信息，在这里我填写的是bindGetUserInfo，要在js文件中创建对应的方法，详细代码如下

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

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

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

userInfo:avatarUrl: "/mmopen/vi_32/Q0j4TwGTfTL8G6eBq1K7sk3CiceZ1vbY9IHO4kmJWQyFcEPc9trIGADva7ricI1ic7Zia8eWYAy4LLJwueejXOwKcg/132"city: ""country: "中国"gender: 1language: "zh_CN"nickName: "碧海蓝天"province: "贵州"

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

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

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

详细代码如下

运行项目后，看到效果如下图：

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

3.所有代码

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

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

/**index.wxss**/.panel{margin-top: 20px;}

index.js

//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)},})