微信小程序-用户授权获取信息

别盯着我的名字看

发布于 2022-06-09 03:16:44

1.7K00

代码可运行

文章被收录于专栏：前端专栏前端专栏

运行总次数：0

代码可运行

从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败(但不意味着 wx.getUserInfo 不能用了)。小程序官网上提供两种方式来获取用户信息。

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

open-data是小程序提供的不需要用户授权获取用户信息的组件，但是不能通过js来拿值，所以只能作为开发人员快速开发显示用的。

<open-data type="userAvatarUrl"></open-data> 获取用户头像
<open-data type="userNickName"></open-data> 获取用户昵称
...

官网文档：open-data开放展示用户信息组件

2、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息（重要）

在之前使用wx.getUserInfo不受限制，在js任何地方都可以使用，可能是为了防止滥用它，微信就改成必须通过button组件来获取

用户点击按钮授权

wxml:

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">登陆</button>

js:

getUserInfo: function (e) {
    const userInfo = e.detail.userInfo;
    console.log(userInfo);
},

通过上面的代码就能获取授权弹窗

定义一个方法判断用户是否授权

在上面的代码基础上增加一个判断是否授权的方法wx.getSetting 这是微信提供的API，获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。

Page({
  data: {
    
  },
  onLoad: function (options) {
    const that = this;
    that.userAuthorized();
  },
  //判断用户是否授权
  userAuthorized: function (e) {
    var that = this;
    wx.getSetting({
      success: function (data) {
        if (data.authSetting["scope.userInfo"]) {
          wx.getUserInfo({
            success: function (data) {
              console.log("用户已经授权")
            }
          })
        }
      }
    })
  },
  //点击登陆 授权
  getUserInfo: function (e) {
    const userInfo = e.detail.userInfo;
    console.log(userInfo);
  },
})