微信小程序如何获取用户头像昵称

微信小程序登录用户头像昵称已经不支持支持获取,因为用户的scope.userInfo权限已经回收,可以使用昵称头像填写进行完善用户信息，按照官方推荐会显示用户在微信的头像和昵称，本文介绍一下实现方案.最终实现效果:修改头像会默认显示微信头像,修改昵称时会默认显示用户的昵称.

实现代码:

<template><view class="content"><image class="user_img" :src="userImg"></image><view class="text-area"><button type="default" open-type="chooseAvatar" @chooseavatar="getUserImg">更改用户微信头像</button></view><view class="nick_class"><text class="title">昵称:</text><input type="nickname" class="weui-input" placeholder="请输入昵称"/></view></view>
</template><script>export default {data() {return {userImg:"../../static/logo.png"}},onLoad() {},methods: {wxLogin(){wx.login({success (res) {if (res.code) {//发起网络请求console.log("登录成功返回信息"+JSON.stringify(res))} else {console.log('登录失败！' + res.errMsg)}}})},decryptPhoneNumber(res){console.log(res)},getUserInfo(){wx.getUserInfo({success: function(res) {console.log("授权返回的用户信息:"+JSON.stringify(res))}})},getUserImg(res){console.log("获取用户头像:"+JSON.stringify(res.detail.avatarUrl)),uni.uploadFile({url: 'http://127.0.0.1:8080/aliyun/uploadImg', //仅为示例，非真实的接口地址filePath: res.detail.avatarUrl,name: 'multipartFile',formData: {'user': 'test'},success: (uploadFileRes) => {console.log("上传返回信息:"+JSON.stringify(uploadFileRes.data))let responseInfo=JSON.parse(uploadFileRes.data)if(responseInfo.code == 200){this.userImg=responseInfo.data,console.log("图片上传地址:"+this.userImg)}else{uni.showToast({title:"图片上传失败,请重试!",duration:3000})}}});// 上传图片// uni.chooseImage({//   success: (chooseImageRes) => {//        const tempFilePaths = chooseImageRes.tempFilePaths;//      console.log("微信选择头像信息:"+tempFilePaths)//     }// });},// 获取用户微信运动步数getRunData(){wx.getWeRunData({success (res) {console.log("获取运动信息:"+JSON.stringify(res))// 拿 encryptedData 到开发者后台解密开放数据const encryptedData = res.encryptedData// 或拿 cloudID 通过云调用直接获取开放数据// const cloudID = res.cloudID}})}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.user_img {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}.nick_class{display: flex;flex-direction: row;}
</style>

参考内容:
用户信息接口调整说明,官方头像昵称填写规范

微信小程序如何获取用户头像昵称相关推荐

php取微信名字和头像,微信小程序如何获取用户头像和昵称
本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: {{userInfo.nickName}} user.js //sort.js //獲取應用實例 var ...
微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称代码仓库地址一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序完成开发者注 ...
微信小程序直接获取用户头像、昵称等（无需按钮授权）
直接使用微信提供的组件在页面使用获取用户头像.昵称头像是直接返回图片需要对样式进行修改,其它数据也是直接展示头像圆角需要加这个,否则实现不了
【微信小程序】获取用户头像和ID
课程中国海洋大学22夏<移动软件开发> 实验名称实验1:第一个微信小程序一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步 ...
关于微信小程序如何获取用户头像（保存到本地）新方法
传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,但是在使用时候会有官方log提醒你,这个方法需要升级.新方法则无需用户授权,使用方法如下: <open-data ...
【微信小程序开发】用户头像昵称获取规则调整 2022
之前通过wx.getUserInfo获取用户的头像.昵称等信息 2021年4月调整为通过wx.getUserProfile获取用户的头像.昵称等信息详情请看:https://developers.w ...
微信小程序无法获取用户头像和昵称，微信小程序获取昵称为微信用户，头像为灰色，请使用下面方式过去
getUserProfile(e) { wx.getUserProfile({ desc: '使用户得到更好的体验', success: (res) => { console.log(" ...
微信小程序——最新获取用户昵称和头像的方法总结
前段时间微信小程序对获取用户昵称和头像方法进行了更新,网上很多的文章都已经不适用了,这里简单总结一下首先,传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,经过测试传统 ...
小程序获取不到用户头像和昵称返回微信用户问题解决，即小程序授权获取用户头像规则调整的最新解决方案
最近好多同学在学习石头哥小程序课程的时候,遇到了下面这样的问题,在小程序授权获取用户头像和昵称时,获取到的是下面这样的. 到底是什么原因导致的呢,去小程序官方文档一看,又是官方改规则了. 点进去一看, ...

微信小程序如何获取用户头像昵称

微信小程序如何获取用户头像昵称相关推荐

最新文章

热门文章