微信小程序直接获取用户头像、昵称等（无需按钮授权）

最新推荐文章于 2025-06-24 15:14:08 发布
原创 最新推荐文章于 2025-06-24 15:14:08 发布 · 6.1k 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

直接使用微信提供的组件

在这里插入图片描述

在页面使用获取用户头像、昵称

在这里插入图片描述

头像是直接返回图片需要对样式进行修改，其它数据也是直接展示

在这里插入图片描述
头像圆角需要加这个，否则实现不了

微信小程序 - 获取用户头像昵称等信息（带授权检测）
🏆 前端领域优质创作者
10-11 1万+
前言 接口调整官方文档：https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 在以前，是否授权可以直接弹出询问用户，但现在微信更改了策略，必须由用户点击按钮触发。下面将用代码来实现用户授权及获取用户信息。 功能介绍 无论确认授权还是拒绝授权，都会跳转对应页面，不让用户卡在界面。 点击授权后，下次不在出现授权页面了，如果拒绝，下次依然出现。 以下代码可直接复制粘贴，具体功能如下：
【微信小程序：获取用户头像和昵称】
m0_67893784的博客
08-19 1474
微信小程序获取用户头像和昵称
微信小程序获取头像昵称
weixin_45249454的博客
06-07 2857
微信小程序获取头像昵称
小程序获取微信头像与昵称
byf5229的博客
04-21 3136
选择使用微信头像或者从相册选择以及拍照返回的都是临时路径（注意临时路径不能作为真正的路径存在数据库用户信息中）
微信小程序获取微信头像和昵称
weixin_43580692的博客
11-08 4012
1、先编写静态页面，数据使用插值表达式，动态获取值，便于后期更改头像和昵称做准备 open-type="getUserInfo"表示激活获取微信用户信息功能 bindgetuserinfo=“自定义名称”：表示获得的数据传递给自定义函数getMyInfo(名称自定义) 2、给静态页面增加样式 3、 重点来了 编写逻辑.js文件： ...
微信小程序获取头像和昵称
weixin_60631847的博客
07-23 9981
在微信小程序中，获取用户的头像和昵称通常需要用户授权。从微信小程序的版本更新来看，获取用户信息的方式有所变化，特别是从微信官方加强对用户隐私保护的角度出发，现在更多地依赖于用户主动触发授权。
微信小程序-获取头像和昵称
weixin_42284031的博客
10-23 1784
1.将button组件open-type的值设置为chooseAvatar2.通过bindchooseavatar事件回调获取到头像信息的临时路径。
微信小程序如何获取用户头像和昵称
10-16
微信小程序获取用户头像和昵称是小程序开发中的常见需求，它主要涉及到微信小程序的前端页面与后端API的交互。具体的知识点包括： 1. 微信小程序基础框架介绍 首先，了解微信小程序的基础框架是非常重要的。微信小...
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
10-14
在微信小程序开发中，获取用户的基本信息，如头像和昵称，是常见的需求。本文将详细介绍如何使用`wx.getUserInfo`接口实现这一功能。`wx.getUserInfo`接口是微信小程序提供的一种授权方式，用于在用户同意的情况下...
微信小程序如何获取用户头像昵称
weixin_43401380的博客
03-04 7408
微信小程序如何获取用户头像昵称
微信小程序最新获取头像昵称方式
日积月累
05-19 7623
通过wx.getUserProfile或者wx.getUserInfo就可以获取到。 但是获取的昵称是”微信用户“获取的头像是灰色的头像。 开发前要经常留意版本的升级调整
微信小程序 - - - - - 如何获取微信头像 & 如何获取微信昵称
Dark_programmer的博客
06-25 3199
微信小程序 - - - - - 如何获取微信头像 & 如何获取微信昵称
小程序免授权登录服务，并获取用户资料，需要联系微信LeeBo8899。
m0_37970152的博客
01-24 823
小程序免授权登录服务，并获取用户资料，需要联系微信LeeBo8899。
最新微信小程序一键获取真实微信头像和昵称方法
最新发布
think_about_it的博客
06-24 8716
本文介绍了通过微信小程序插件获取用户真实头像和昵称的解决方案。针对微信官方接口限制，推荐使用《安全注册》或《微注册》免费插件，详细说明了在uniapp和微信开发者工具中的配置方法，包括插件申请、页面引入和组件使用。文章还提供了登录成功/失败/取消的回调处理建议，并指出付费版《安全注册服务》插件可避免广告。该方案比手动输入方式更便捷，能有效获取真实用户信息。
微信小程序免授权获取用户头像昵称
weixin_41614732的博客
12-13 2552
可以通过微信小程序提供的open-data标签获取微信开放的数据 //获取用户的头像 <open-data type="userAvatarUrl"></open-data> //获取用户的微信昵称 <open-data type="userNickName" lang="zh_CN"> 头像设置成圆形方法。给一个父级标签，修改父级标签的样式border-ra...
HBuilderX(uniapp)实现微信小程序获取用户头像、昵称、授权登录、获取用户手机号
monkeier的博客
11-14 1万+
微信文档写的零零散散的，网上搜的教程，23年的教程还在教22年改版之前的东西，导致踩坑无数，所以自己写一下文档记录一下，帮助后来者，记录于2024.11.14一.获取用户头像和昵称首先阅读微信小程序官方文档，wx.getUserInfo接口。
微信小程序登录获取不到头像和昵称解决办法
专注java二开部署
11-23 1845
在根目录App.vue中加入判断基础库是否大于2.21.2版本（大于此版本支持头像/昵称填写能力）这里有一个公共方法uploadImgs需要在/utils/util.js中添加。2.修改/pages/users/wechat_login.vue文件。（1）调整pages/users/user_info.vue文件。(3) methods中加入方法userLogin。(1) 在data中加入基础库判断，决定授权逻辑。/api/public.js 文件添加接口。（3）methods中加入方法。
微信小程序学习实录10:轻松获取用户昵称、头像与登录openid实战攻略
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-07 2993
在微信小程序开发中，获取用户的个人信息（如昵称和头像）以及用户的唯一标识OpenID是非常常见的需求。本文将详细介绍如何通过微信提供的API来实现这些功能，并提供一个完整的实战案例。
微信小程序——最新获取用户昵称和头像的方法总结
热门推荐
jilinmly的博客
06-21 8万+
前段时间微信小程序对获取用户昵称和头像方法进行了更新，网上很多的文章都已经不适用了，这里简单总结一下   首先，传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗，需要用户授权，经过测试传统的wx.getUserInfo目前还是能用的，但是在使用时候会有官方log提醒你，这个方法需要升级。 然后就是官方提供的最新方法Open-data标签，使用这个标签可以不用用户授权直接获...
微信小程序授权获取用户头像昵称
06-21
### 微信小程序中使用 `open-type=getUserInfo` 无法获取真实昵称的解决方案 在微信小程序开发中，当使用 `open-type="getUserInfo"` 获取用户信息时，可能会遇到返回默认值（如昵称为“微信用户”）而非真实用户昵称的情况。以下是对该问题的详细分析及解决方案。 --- #### 1. 用户未完成授权 如果用户尚未对小程序进行完整的授权操作，则即使调用了 `wx.getUserInfo` 或通过 `open-type="getUserInfo"` 触发授权，返回的用户信息可能仅为默认值[^1]。解决方法是确保用户明确同意授权，可通过按钮触发授权流程实现。 ```html <!-- WXML --> <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">获取授权</button> ``` ```javascript // JS Page({ bindGetUserInfo(e) { if (e.detail.errMsg === "getUserInfo:ok") { console.log("用户昵称：", e.detail.userInfo.nickName); console.log("用户头像：", e.detail.userInfo.avatarUrl); } else { console.error("用户拒绝授权"); } } }); ``` --- #### 2. 检查微信版本兼容性 部分旧版本微信可能无法正确处理新的授权机制，导致无法获取真实昵称和头像。建议提示用户更新至最新版本微信以确保兼容性。 --- #### 3. 开发者工具配置校验 在开发者工具中，若未正确配置小程序的 AppID 或调试模式下的模拟环境与实际运行环境不匹配，也可能导致授权失败或返回默认值[^2]。需确保开发者工具已正确填写 AppID，并切换至真机调试模式。 --- #### 4. 引导用户重新授权 如果用户曾拒绝授权，可通过以下方式引导用户重新开启权限： ```javascript wx.openSetting({ success(res) { if (res.authSetting["scope.userInfo"]) { wx.getUserInfo({ success(res) { console.log("重新获取用户信息成功：", res.userInfo); } }); } } }); ``` --- #### 5. 处理隐私政策更新 微信隐私政策更新后，某些情况下即使用户已授权，小程序也可能仅能获取到有限的用户信息。这是为了增强用户隐私保护，避免滥用用户数据。因此，在用户授权前应明确告知所需权限及其用途，提升用户信任度。 --- #### 6. 示例代码：完整授权逻辑 以下是一个完整的授权逻辑示例，用于获取用户的头像和昵称： ```javascript Page({ data: { canIUse: wx.canIUse('button.open-type.getUserInfo'), result: "", nickName: "", avatarUrl: "" }, onLoad() { const that = this; wx.getSetting({ success(res) { if (res.authSetting['scope.userInfo']) { wx.getUserInfo({ success(res) { that.setData({ result: "ok", nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl }); } }); } else { that.setData({ result: "null" }); } } }); }, bindGetUserInfo(e) { if (e.detail.userInfo) { this.setData({ result: "ok", nickName: e.detail.userInfo.nickName, avatarUrl: e.detail.userInfo.avatarUrl }); } else { this.setData({ result: "null" }); } } }); ``` --- #### 7. 注意事项 - 若用户选择“不再询问”，则需通过 `wx.openSetting` 手动引导用户重新开启权限。 - 在开发和测试阶段，建议使用真机调试以避免开发者工具中的模拟环境与实际运行环境不一致的问题[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值