微信小程序授权获取用户信息之wx.getUserInfo 切换到 wx.getUserProfile的使用(已弃用)

news2025/1/22 9:19:17

目录

      • 更新:wx.getUserProfile() 已弃用
      • 背景
      • 一、小程序获取用户信息相关接口调整说明
      • 二、wx.getUserProfile的使用
        • 1. 之前的wx.getUserInfo接口的使用
        • 2. 现在的wx.getUserProfile接口的使用
      • 三、wx.getUserInfo 切换到 wx.getUserProfile前后对比
        • 更多问题可参考:

更新:wx.getUserProfile() 已弃用

wx.getUserProfile()官方也已弃用,详情可参考我的微信小程序授权获取头像昵称的最新形式——头像昵称填写这篇文章。感兴趣的小伙伴儿也可往下看。

背景

最近在做一个小程序的项目,需要微信授权获取用户信息(用户头像、昵称、性别及地区信息等),在微信小程序官方文档中查看这部分内容,由于一开始没有仔细看到wx.getUserInfo已经被回收,于是,尝试使用wx.getUserInfo进行授权获取用户信息时并不会有弹框,而是直接返回了用户信息,相信很多人也有同样的经历,在此总结一下解决方式。
官网链接
官网链接

一、小程序获取用户信息相关接口调整说明

  • 2021年4月28日24时后发布的小程序新版本,开发者无法通过wx.getUserInfo<button open-type="getUserInfo"/>获取用户个人信息(头像、昵称、性别与地区)不再弹出弹窗,将直接获取匿名数据(包括userInfo与encryptedData中的用户个人信息),获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响,但如果要进行版本更新则需要进行适配。
  • 新增getUserProfile接口(基础库2.10.4版本开始支持),可获取用户头像、昵称、性别及地区信息,开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档:《wx.getUserProfile接口文档》,也可参考下面我的整理

二、wx.getUserProfile的使用

1. 之前的wx.getUserInfo接口的使用

<!--index.wxml-->
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">某个按钮</button>
// index.js
    // // 查看是否授权
    // wx.getSetting({
    //   success(res) {
    //     console.log(res.authSetting); // 现在res.authSetting['scope.userInfo']始终为true
    //     if (res.authSetting['scope.userInfo']) {
    //       // 已经授权,可以直接调用 getUserInfo 获取头像昵称
    //       wx.getUserInfo({
    //         success: function(res) {

    //           that.data.userInfo = res.userInfo;
    //           console.log(that.data.userInfo)
    //         }
    //       })
    //     }
    //   }
    // })
  }, 

wx.getUserInfo接口的返回参数不变,不再弹出弹窗,将直接获取匿名数据(包括userInfo与encryptedData中的用户个人信息)但开发者获取的userInfo为匿名信息。*同时,wx.getSetting 接口请求用户的授权状态,返回匿名数据 scope.userInfo 也为 true,所以现在通过调用wx.getSetting并不能够判断出是否授权了用户信息;

2. 现在的wx.getUserProfile接口的使用

<!--index.wxml-->
<button bindtap="GetUserInfo">某个按钮</button>
// index.js
 /**
   * 获取用户信息授权
   */
  GetUserInfo () {
    var that = this
      wx.getUserProfile({
        desc:'用户信息授权',
        success:(res)=>{
            that.data.userInfo = res.userInfo;
            console.log(that.data.userInfo)
        },
        fail:(res)=>{
          // debugger
          console.log(res)
        }
      }

效果如下:
在这里插入图片描述
采用wx.getUserProfile接口不需要在使用 button 中的open-type="getUserInfo"bindgetuserinfo=""属性,直接使用在页面产生点击事件(例如 button 上 bindtap 的回调中)后可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo;

三、wx.getUserInfo 切换到 wx.getUserProfile前后对比

在这里插入图片描述
在这里插入图片描述

更多问题可参考:

微信开放社区—>小程序登录、用户信息相关接口调整说明
微信开放社区—>小程序登录、用户信息相关接口调整更新说明

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408455.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

详解v-for中:key属性的作用

举个栗子 不设置key <div id"app"><div><input type"text" v-model"name"><button click"add">添加</button></div><ul><li v-for"(item, i) in list"><input type&qu…

众多mock工具,这一次我选对了

文章目录写在前面Mock介绍Mock能解决什么问题?传统Mock解决方案Postman接口测试工具Mock js第三方库Eolink解决方案全局Mock高级Mock返回结果Mock智能内置Mock智能自定义Mock约束条件MockEolink的Mock解决方案的优势:写在最后写在前面 交战之前&#xff0c;战士必先利其兵器&…

【node拓展】web开发模式 | express应用程序生成器

✅ 作者简介&#xff1a;一名普通本科大三的学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强&a…

JavaScript 30 JavaScript 日期格式

JavaScript 文章目录JavaScript30 JavaScript 日期格式30.1 JavaScript 日期输出30.2 JavaScript ISO 日期30.3 ISO 日期&#xff08;年和月&#xff09;30.4 ISO 日期&#xff08;只有年&#xff09;30.5 ISO 日期&#xff08;完整的日期加时、分和秒&#xff09;30.6 时区30.…

关于hash和history的区别和使用

一、区别 1、 history和hash都是利用浏览器的两种特性实现前端路由&#xff0c;history是利用浏览历史记录栈的API实现&#xff0c;hash是监听location对象hash值变化事件来实现 2、 history的url没有’#号&#xff0c;hash反之 3、 相同的url&#xff0c;history会触发添加…

最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云

本文首发&#xff1a;《最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云》 Vue 拖拽组件库&#xff08;drag-and-drop&#xff09;组件在使用 Vue 框架开发中非常常见的需求&#xff0c;做个内容行排序&#xff0c;拖拽小组件到网页上这类都需要用到拖拽组件。本文记录了我自己用过…

vue中使用echarts实现中国地图

第一种效果&#xff1a;不同省份颜色不同 代码&#xff1a; 注意&#xff1a; ①要实现这种效果&#xff0c;地图数据的name一定要是省份的名字&#xff0c;要不然颜色出不来&#xff1b; ②一定要有visualMap配置&#xff0c;并且它的seriesIndex属性 对应的是series的数组下标…

Vue项目打包部署

前几天看[小猪课堂发布的nginx部署](https://zhuanlan.zhihu.com/p/431796992)&#xff0c;跟着做了一遍&#xff0c;由于本人是第一次尝试&#xff0c;遇见了很多问题。经过查阅和搜索&#xff0c;终于解决掉了。下面给大家介绍一下我的流程和遇见的问题&#xff0c;我们可以多…

Vue3:探讨一下mixin

一、Vue2中的mixin 1、定义要混入的数据对象 // 定义一个 mixin 对象 export const myMixin {created() {this.hello()},methods: {hello() {console.log(hello from mixin!)}} } 2、在需要这些东西的地方去通过mixins获得mixin对象 <template><div><h1>…

浅识WebGL和Three.js

WebGL 想必各位看官大大都了解过&#xff0c;进行3D图形渲染&#xff0c;主要依赖显卡&#xff08;GPU&#xff09;为我们提供强大的运算支持。GPU也像不同CPU架构具备不同的指令集一样&#xff0c;不同的显卡厂商也为不同的GPU型号提供了不同的底层指令逻辑&#xff0c;所支持…

Axios发送请求

--- axios是什么: Axios&#xff0c;是一个基于promise的网络请求库&#xff0c;作用于node.js和浏览器中。 一、axios的特点&#xff1a; 1.在浏览器中发送XMLHttpRequest请求。 2.在node.js中可以发送请求 3.支持PromiseAPI 4.拦截请求和响应数据 二、axios的请求方式…

thinkphp5.0.24反序列化漏洞分析

thinkphp5.0.24反序列化漏洞分析 文章目录thinkphp5.0.24反序列化漏洞分析具体分析反序列化起点toArraygetRelationData分析$modelRelation生成进入__call前的两个if__call虚假的写文件setTagItem绕过exitexppop链图解决windows下的文件名问题参考链接thinkphp5框架&#xff1a…

webstorm使用指南

前言 前端开发比较推荐的两款编辑器JetBrains的WebStorm和微软的VsCode&#xff0c;本人之前开发一直用的VsCode&#xff0c;日常开发其实基本上就满足了&#xff0c;但有几个地方对于我来说一直都是痛点&#xff0c;体验感非常不好。 首先是Git分支管理和提交&#xff0c;虽然…

漂亮的弹出框,javascript库bootbox介绍

传统的javascript的警告框、确认框、提示框&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>弹出框</title> </head> <body> <button onclick"f1()">…

Javaweb实验:静态网页制作

Javaweb实验&#xff1a; 1.静态网页制作 目录 Javaweb实验&#xff1a; 前言 一、实验目的 二、实验原理 三、实验内容 四、实验步骤 五、实验结果 六、实验内容 七、实验步骤 八、实验结果 九、思考 1、frameset和frame标签的作用是什么&#xff1f; 2、个人主…

不用AI也能实现的文字自动播报

背景如果注意观察的话&#xff0c;在现实生活中&#xff0c;你一定会遇到下列几个场景&#xff0c;一起来看看有没有熟悉的感觉。场景一、某周某&#xff0c;小明和朋友一起去某美食街进行聚餐&#xff0c;到了美食街找到一家推荐度非常高的美食店。由于推荐度非常高&#xff0…

【JavaScript 进阶教程】对象新增方法 defineProperty 与 keys 的说明与使用

文章导读&#xff1a; 这篇文章给大家讲解在 ES5 中对象新增的两个常用方法&#xff1a;defineProperty()&#xff0c;keys()&#xff0c; 这两个方法可以让我们更方便的操作对象&#xff0c;获取对象属性&#xff0c;赋值修改等等操作&#xff0c;最重要的是&#xff0c;这些方…

JS的同步与异步

js的同步与异步 ​ 众所周知&#xff0c;js是一个单线程的语言&#xff0c;学过java、c之类的都知道&#xff0c;其他语言有个叫类继承的东西&#xff0c;就相当于开辟另个一个流水线&#xff0c;是多线程 ​ 而javascript就像一条流水线&#xff0c;它无法开辟别的流水线&am…

猿创征文|【React 三】组件实例的三大属性(state、props、refs)

目录 一、 State 1.概念 2.State的简单用法3. JS绑定事件 4.react 绑定事件 5.react this指向问题 6.修改state值 7.代码简写 二、props 1.概念 2.传参的基础方法、运算符传参 三、refs 定义 字符串形式的ref、回调函数下ref、createRef 创建ref容器 一、 State 1…

【微信小程序】-- 分包(四十四)

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…