问题

在使用小程序的时候，注册个人账号通常会有要更换个人头像的情况，那么这个上传图片文件更换头像的过程该如何实现呢？

效果图：

方法

1）wxml配置

wxml中要配置一个bindtap绑定事件headimage；以及对要作为头像的图片进行head的数据绑定进行配置。

代码如下：

<view>

<view mode="aspecFill" bindtap="headimage">点击更换头像</view>

</view>

（2）wxss配置

wxss中只需要配置所需的头像边框形式（border-radius）、颜色以及图文大小、位置即可。代码如下：

.v1{

display: flex;

flex-direction: column;

align-items: center;

}

.head {

margin-top: 30rpx;

width: 200rpx;

height: 200rpx;

border-radius: 50%;

border: 1px solid dimgrey;

}

.text {

line-height: 50rpx;

color: lightgray;

font-size: 35rpx;

}

（3）js配置

js中配置绑定对数据内容或已绑定的事件处理函数。head数据配置初始呈现头像图片，headimage作为事件处理函数中使用一个API wx.chooseImage来从本地相册选择图片或使用相机拍照。

代码如下：

data{

showModal: false,

head: "/images/touxiang.jpg",

// 点击更换手机相册或者电脑本地图片

headimage: function () {

var _this = this;

wx.chooseImage({

count: 1, // 默认9

sizeType: ['original', 'compressed'],

// 指定是原图还是压缩图，默认两个都有

sourceType: ['album', 'camera'],

// 指定来源是相册还是相机，默认两个都有

success: function (res) {

_this.setData({

head: res.tempFilePaths

})

}

})

结语

更换头像是小程序日常使用非常普遍的操作，应用广泛值得掌握，但是本次配置存在的不足时更换头像之后无法保存的问题。请持续关注，后续会继续改进。

微信小程序如何更换头像相关推荐

微信小程序官方调整头像昵称获取问题；微信扫码链接wifi，wifi地推，两种可行的解决方案
微信小程序官方调整头像昵称获取问题:微信扫码链接wifi,wifi地推更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访 ...
微信小程序最新获取头像以及昵称方法
微信小程序最新获取头像信息之前是使用open-dada获取微信头像和昵称,但是后面由于官网更新,此方法被收回了,所以不能使用此方法了. 之前方法代码: <open-data type=&quo ...
微信小程序最新获取头像和昵称的方法直接用！
调整背景微信小程序获取用户头像和昵称一个开放接口是wx.getUserInfo,2021年4月5日被废弃,原因是很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗,如果用户点击拒绝 ...
微信小程序图片（头像）裁剪工具we-cropper含2d版-完整版
微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版本教程基于 we-cropper v1.4.0,非本人同意禁止任何形的转载 we-cropper官方下载链接效果图一.非2d版 ...
微信小程序获取个人头像和昵称，和地图选点功能
微信小程序获取个人头像和昵称,有技巧 1.可以直接获取 2.通过用户点击获取过程中,有什么问题,可以加我微信号yizheng369探讨先分析这里面隐含了很多默认的规则,大家要注意: 1.可以直接 ...
微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...
微信小程序：随机头像大全,多分类带历史记录小程序源码
这是一款头像小程序用户可以在每一个分类随机头像然后觉得满意可以保存到相册支持多个分类,基本都是全了如下: 动漫头像男生头像女生头像动漫男生动漫女生另外还支持多种流量主模式具体大家自行 ...
微信小程序：纯头像微信小程序源码下载,多分类头像自动采集无需服务器和域名
这是一款纯头像的微信小程序除了头像没有其它功能头像有多种分类,功能简洁实用支持流量主模式收益另外该小程序无需服务器和域名该小程序安装方法如下: 解压域名以后然后使用微信开发者工具打开该小程序 ...
微信小程序：用户头像的更改与保存
在小程序中一般使用用户的微信头像作为其小程序头像,但有时用户不用微信头像,我们就要提供可更改的方法. 完成这项功能需要两个微信官方的api wx.chooseImage和wx.uploadFile w ...

微信小程序如何更换头像

问题

方法

结语

微信小程序如何更换头像相关推荐

最新文章

热门文章