小程序如何获取用户名和头像？

微信小程序获取头像的基本方法是调用小程序自带的API wx.getUserProfile(),这也是小程序官方目前最推荐的做法。

但是为了避免用户感到自己的隐私被自动调取，小程序要求调用 getUserProfile() 必须是用户主动点击请求才可以，因此可以在前端设置一个弹窗（或者其他的按钮），用户主动点击之后才可以调用getUserProfile（）。

成功获取用户名头像之后，小程序允许保存调用的结果，以便下一次打开页面的时候自动显示头像和名字。保存用户名和头像并不是保存在用户自己的手机上，也不能保存在小程序的云、或者服务器上，而是调用小程序的另一个官方API wx.setStorage（），由小程序官方统一保管。而自动调用这个保存好的用户名和头像，则需要wx.getStorage()

完整的代码如下：

1.在onload（）中先尝试获取用户名和头像，如果获取失败，则弹窗提示用户允许小程序获取其用户名和头像。

 onLoad(options) {let that=thiswx.getStorage({//异步获取缓存key:"name",//本地缓存中指定的 keysuccess:(res)=>{ console.log('获取缓存成功',res.data)      this.setData({name:res.data.nickName, //将得到的缓存给key avatarUrl:res.data.avatarUrl         })        },fail(res){console.log(res)wx.showModal({title: '感谢您使用！',content: '请允许小程序可以使用您的头像和名字！',success (res) {if (res.confirm) {console.log('用户点击确定')that.getUserProfile()} else if (res.cancel) {console.log('用户点击取消')}}})}   })},

2.获取用户名和头像的函数

 getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗    wx.getUserProfile({desc: '用于保存用户的昵称', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {console.log(res)this.setData({userInfo: res.userInfo,})wx.setStorage({key:'name',//本地缓存中指定的 key(类型：string)data:res.userInfo,//需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象(类型:any)success:(s)=>{  this.setData({avatarUrl:res.userInfo.avatarUrl,         name:res.userInfo.nickName})},fail:(f)=>{//  console.log('存储缓存失败====',f);    }})}})},

3.在data{}中记录的用户名和头像

  data: {avatarUrl:'',userInfo:""},

小程序如何获取用户名和头像？相关推荐

微信小程序登录获取不到头像和昵称解决办法！
微信小程序登录获取不到头像和昵称主要原因是:小程序wx.getUserProfile接口被收回! 大家可以按照文档操作↓ PS: 针对小程序wx.getUserProfile接口将被收回后做出的授权调 ...
微信小程序【获取用户昵称头像和昵称（附源码）】
获取用户昵称头像和昵称 wx.getUserProfile bindgetuserinfo 登录过程前端源码:https://pan.baidu.com/s/1uz2Gm2FMB-8RFVkhlHY ...
uniapp微信小程序新版本获取用户的头像和昵称，手机号
新版本微信小程序通过getUserInfo获取到用户的头像是灰色,昵称显示为微信用户,这是微信版本更新了,现在需要用getUserProfile来获取用户的头像和昵称,并且只能页面产生点击事件(例如 ...
uniapp微信小程序最新获取昵称和头像
1.微信获取头像和昵称最新需要用户上传头像和手动输入昵称ps(会提示使用微信头像和微信昵称) <template><view><view class="cx_c ...
微信小程序 - 最新获取用户昵称 / 头像（wx.getUserProfile 接口被废弃后的代替方案）详细教程，2022 年之后的所有微信小程序，获取用户信息最新详细教程，附带示例源代码
前言由于官方修改了 "用户头像昵称获取规则" ,导致网上几乎所有教程全部失效,本文来做最新详细教程. 2022 年往后(官方废弃了 wx.getUserProfile 接口),本 ...
服务器客服获取小程序头像,微信小程序自动获取微信用户头像
Xml页面: css页面: .userinfo { margin-left: 48rpx; margin-top: 48rpx; width: 120rpx; height: 120rpx; back ...
微信小程序通过数据绑定获取用户名和头像
微信小程序通过数据绑定获取用户名和密码 1.获取用户名和头像 <view>数据绑定</view> <view>数据:{{message}}</view> ...
php取微信名字和头像,微信小程序如何获取用户头像和昵称
本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: {{userInfo.nickName}} user.js //sort.js //獲取應用實例 var ...
微信小程序最新获取头像以及昵称方法
微信小程序最新获取头像信息之前是使用open-dada获取微信头像和昵称,但是后面由于官网更新,此方法被收回了,所以不能使用此方法了. 之前方法代码: <open-data type=&quo ...

小程序如何获取用户名和头像？

小程序如何获取用户名和头像？相关推荐

最新文章

热门文章