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

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

欢迎加入团队圈子!与作者面对面!直接点击!

问题描述

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

效果图:

解决方案

1 wxml 配置

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

代码如下:

<view>  

<image  bindtap="headimage" src='{{head}}'></image> 

<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 团队

   

微信号:算法与编程之美          

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

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

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章