微信小程序|如何更换头像

2021/6/29 17:24:04

编程Tag： 微信配置头像绑定更换 head headimage

本文主要是介绍微信小程序|如何更换头像，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

问题描述

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

效果图：

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

解决方案

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

})

}

})

结语

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

END

主编 | 王楠岚

责编 | 吴怡辰

where2go 团队

微信号：算法与编程之美

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！

这篇关于微信小程序|如何更换头像的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

微信小程序|如何更换头像

相关编程文章