微信小程序获取头像昵称 保存头像到服务器

news/2024/11/28 6:48:34/

微信官方推荐的替代做法:

头像昵称填写 | 微信开放文档 (qq.com)

 wxml

<button class="avatar" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><image src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

js

// pages/my/my.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({/*** 页面的初始数据*/data: {avatarUrl: defaultAvatarUrl,},onChooseAvatar(e) {const {avatarUrl} = e.detailthis.setData({avatarUrl,})//  将头像上传到服务器wx.uploadFile({filePath: avatarUrl,header: {'content-type': 'multipart/form-data'},name: 'avatarImg',url: 'xxxxxxx', //服务器端接收图片的路径success: function (res) {console.log(res); //发送成功回调},fail: function (res) {console.log(res); //发送失败回调,可以在这里了解失败原因}})},onLoad: function (n) {},onShow: function () {wx.login({success(res) {if (res.code) {//发起网络请求console.log('登录' + res.code)} else {console.log('登录失败!' + res.errMsg)}}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},
})

wxss

.avatar{width: 80px;height: 80px;padding:0;background: none;
}
.avatar image{width: 80px;height: 80px;border-radius: 100px;
}
.weui-input{width: 90%;height: 60px;margin:20px auto;background: #eee;border-radius: 5px;padding-left: 15px;
}


http://www.ppmy.cn/news/629165.html

相关文章

通过QQ号获取QQ头像、昵称以及空间头像

前言 有时候设置了QQ头像之后&#xff0c;想获取自己的QQ头像却不知道怎么办&#xff0c;于是就有了下面的方法&#xff0c;从网上找了一堆方法&#xff0c;发现有几个是可用的&#xff0c;特此记录一下。 QQ头像 http://q1.qlogo.cn/g?bqq&nk945794520&s100http://q1…

微信小程序最新获取头像和昵称的方法 直接用!

调整背景 微信小程序获取用户头像和昵称一个开放接口是wx.getUserInfo&#xff0c;2021年4月5日被废弃&#xff0c;原因是很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗&#xff0c;如果用户点击拒绝&#xff0c;无法使用小程序&#xff0c;这种做法打断了用户正…

微信小程序获取用户头像和昵称(填写头像昵称能力)

开放能力调整公告 总体来说就是通过按钮来授权获取用户基础信息的能力都没啦&#xff08;wx.getUserProfile&#xff0c;wx.getUserInfo都不行了&#xff09;&#xff0c;都要使用新版本的 【头像昵称填写能力】啦。小程序用户头像昵称获取规则调整公告 获取头像 获取头像代码…

关于微信小程序获取头像和昵称

不知道为什么微信一直对开发者获取&#xff1a;微信头像微信昵称。一直抱以限制态度&#xff0c;关于接口调用方法&#xff0c;也是一直在修改&#xff01; open-type“getUserInfo” 在2021年4月13日停用 wx.getUserInfo 在2021年4月28日停用 wx.getUserProfile 在2022年11月8…

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

微信小程序获取头像昵称问题解决 文章目录 微信小程序获取头像昵称问题解决前言和传统方法问题描述解决方案实现效果 前言和传统方法 微信小程序是一种基于微信开发平台的轻应用&#xff0c;用户可以通过微信扫码、搜索等方式进入小程序并使用。在小程序中&#xff0c;获取用户…

微信小程序获取用户头像和昵称(头像昵称填写能力)

开放能力调整公告 总体来说就是通过按钮来授权获取用户基础信息的能力都没啦&#xff08;wx.getUserProfile&#xff0c;wx.getUserInfo都不行了&#xff09;&#xff0c;都要使用新版本的 【头像昵称填写能力】啦。 小程序用户头像昵称获取规则调整公告 获取头像 获取头像代…

微信小程序授权获取头像昵称的最新形式——头像昵称填写

微信小程序授权用户信息&#xff0c;不知道有没有人像我一样&#xff0c;从wx.getUserInfo到wx.getUserProfile再到头像昵称填写获取用户头像昵称全部尝试了一遍&#xff0c;怪就怪自己一开始没仔细看官方文档&#xff0c;没注意到小程序的官方公告&#xff0c;不多说了&#x…

Map集合-根据宠物昵称查找宠物

1 package collection;2 3 /**4 * 宠物类5 * @author 6 *7 */8 public class Pet {9 private