微信小程序获取用户头像昵称
微信小程序获取头像昵称问题解决
文章目录
- 微信小程序获取头像昵称问题解决
- 前言和传统方法
- 问题描述
- 解决方案
- 实现效果
前言和传统方法
微信小程序是一种基于微信开发平台的轻应用,用户可以通过微信扫码、搜索等方式进入小程序并使用。在小程序中,获取用户昵称和头像是非常常见的需求,因为这些信息可以用来个性化展示内容,提高用户体验。以下是获取用户头像昵称的传统方法:
在小程序中,可以通过调用微信提供的API获取用户信息。具体步骤如下:
(1) 在小程序的app.json文件中添加“scope.userInfo”权限,表示需要获取用户信息。
(2) 在小程序中使用wx.getUserInfo()方法获取用户信息。
(3) 获取到用户信息后,可以通过userInfo.nickName和userInfo.avatarUrl属性获取用户昵称和头像。
代码示例:
wx.getUserInfo({success: function(res) {var userInfo = res.userInfovar nickName = userInfo.nickNamevar avatarUrl = userInfo.avatarUrl}
})
- 另外,如果只需要获取用户头像,可以直接调用微信提供的wx.getUserProfile()方法。
(1) 在小程序的app.json文件中添加“scope.userProfile”权限,表示需要获取用户头像。
(2) 在小程序中使用wx.getUserProfile()方法获取用户头像。
(3) 获取到用户头像后,可以通过userProfile.avatarUrl属性获取用户头像。
代码示例:
wx.getUserProfile({desc: '用于展示用户头像',success: function(res) {var userProfile = res.userInfovar avatarUrl = userProfile.avatarUrl}
})
问题描述
但如果我们现在再使用类似的方法时,往往无法得到自动获取用户头像昵称的效果。微信小程序开发现已不支持使用wx.getUserProfile 接口获取用户头像,同时也无法使用wx.getUserInfo 接口获取用户头像和昵称,因此在使用微信小程序获取头像昵称时,可能出现模拟器中成功但真机调试无法获取头像昵称的情况。
解决方案
- 头像选择:需要将 button 组件
open-type
的值设置为chooseAvatar
,当用户选择需要使用的头像之后,可以通过bindchooseavatar
事件回调获取到头像信息的临时路径。
//js文件// 用户选择头像onChooseAvatar(e) {const {avatarUrl} = e.detailconsole.log(avatarUrl);this.setData({['userInfo.avatarUrl']: avatarUrl,})},
<!-- wxml文件 --><button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">修改头像 </button>
- 昵称填写:需要将 input 组件
type
的值设置为nickname
,当用户在此input进行输入时,键盘上方会展示微信昵称。
//js文件// 用户修改昵称changeNickName(e) {let name = e.detail.value;if (name.length === 0) return;this.setData({['userInfo.nickName']: e.detail.value})},
<!-- wxml文件 --><input type="nickname" class="nick-name-input" placeholder="请输入昵称" bindblur="changeNickName"/>
实现效果
通过以上代码示例,我们可以实现获取微信小程序用户的昵称和头像的功能。当用户进入小程序后,程序会请求用户授权,用户同意授权后,即可获取到用户的信息。按照上述步骤修改代码后,无法直接获取到用户的昵称和头像,但可以在用户修改默认头像和昵称时选择使用自己的昵称和头像。
在小程序中,我们可以根据用户的昵称和头像信息,实现个性化展示,比如在页面顶部显示用户头像,页面中显示用户昵称等等。这些个性化的展示方式可以提高用户的体验,增强用户对小程序的好感度。
如在WXSS文件中进行如下设置:
.userinfo {display: flex;flex-direction: column;align-items: center;color: #aaa;
}.userinfo-avatar {overflow: hidden;width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.avatar-wrapper{margin: 10px 0;
}.nick-name-input{border: 1px solid #f1f1f1;padding:5px;
}
此外,由于小程序的用户信息获取需要用户授权,因此我们需要在代码中加入相应的授权请求代码,保障用户隐私安全,提升小程序的信誉度。
具体的实现代码以及小程序项目完整功能源码:https://github.com/WYXNICK/The-evening-scenery-is-like-spring
微信小程序获取用户头像昵称相关推荐
- 微信小程序获取用户头像昵称组件封装(最新版)
一.前言 微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大. 更多详情查看公告:公告直达链接 我的项目比较多,而且大部分都是只需要获取用户的头像以及昵 ...
- 微信小程序获取用户头像昵称等信息规则更新
以前是这样的 <button open-type="getUserInfo" @getuserinfo="getuserinfo">获取</b ...
- php获取微信小程序用户头像,微信小程序获取用户头像+昵称+openid,小程序登录!附前端后端源码!...
做一款小程序,如果需要判断用户,当然要获取一些基本信息,例如头像,昵称,openid.所以本次案例就直接上代码了. 小程序前端 index.wxml 获取头像昵称 {{userInfo.nickNam ...
- 微信小程序获取用户头像和昵称(填写头像昵称能力)
开放能力调整公告 总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...
- 微信小程序—获取用户头像、昵称
博客概要 针对使用微信小程序时获取用户头像.昵称的三种方法,做一个简单分享~ 文章目录 博客概要 1.wx.getUserInfo接口 2.button触发 3.open-data标签 总结 1.wx ...
- 微信小程序最新用户头像昵称获取规则调整应对措施(2022)
目录 一.调整 二.应对措施 2.1 更新头像 2.2 更新昵称 三.完整代码 一.调整 小程序用户头像昵称获取规则调整公告 以前通过wx.getUserProfile获取用户信息,用户点击同意以后, ...
- 微信小程序获取用户头像和昵称(头像昵称填写能力)
开放能力调整公告 总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...
- 微信小程序获得用户头像昵称调整(2022年9月28日修改)
最近修改概要 主要关于 wx.getUserProfile() 接口和 wx.getUserInfo() 接口获得用户头像昵称的修改 微信小程序官方发布的公告 https://developers.w ...
- 微信小程序获取用户头像并显示出来,很简单一行代码搞定!
<open-data type="userAvatarUrl"></open-data> 小程序提供的组件,可以自己获取用户头像并显示出来:效果图如下:
最新文章
- 字符串声明太大出现错误_搜索框输入中文出现单引号报错问题
- 删除条目时的确认对话框
- 服务器远程管理app,用什么软件远程管理服务器最好? - 选择攻略!
- c++智能指针 示例讲解
- 华人科学家量子计算机,华人科学家在美国研发出性能强大的光子计算机,能够与中国的量子计算机一战高下!...
- 同步、互斥锁、死锁、异步
- bzoj2242 [SDOI2011]计算器 exgcd+ksm+bsgs
- MySQL索引设计与EXPLAIN
- dism++封装系统使用教程_win7系统部署工具Dism的操作方法
- 英特尔固态硬盘测试软件,Intel SSD Toolbox
- handler机制原理
- UE4蓝图基础04-变量和数组
- 堆料堆不出电视头部玩家
- P6974 [NEERC2015]Adjustment Office 题解
- 【自制小工具】快速批量查询IP归属地(自动去重、按国内外汇总,并智能识别出错误IP)
- 58同城2021校招笔试真题-前端
- 电脑可以聊微信但是无法上网页的解决方法
- 考研英语核心词汇梳理三
- protoc 命令参数
- 江苏具有计算机博士点的大学排名,不愧为高教强省, 江苏27所大学拥有博士点, 有你母校么...
热门文章
- mybatis面试题
- Live555学习笔记(一)—— live555概述
- web前端字体居中_DIV中文字水准、垂直居中
- chap2 kNN算法 2.2.2 分析数据:使用Matplotlib创建散点图
- 【链塔DApp日报】BDI指数上涨46.43%,以太坊 24h交易额增长64.98%
- Java Web项目结构(idea)——项目命名规范——idea包层级结构设置
- linux重启shutdown命令,linux中shutdown命令关机与重启
- python文件操作(一看就懂)
- sessionID一直变化。
- 《杀生》4月28日上映 黄渤首演床戏频笑场网易娱乐