本文章参考小程序的开发文档
在我的个人信息页面,想要更换个人头像,使用wx.chooseImage(Object object)
主要参数如下:
在我实际操作时,需要自己设的参数很少,就设置了选择图片最多的张数为1。具体代码如下:
wxml部分:
<view class="avatar">
<image class="bgimg" src='https://hbimg.huabanimg.com/9cf2d584caf323cbacd85210e385ee18bc60065724646-0kPnvG_fw658/format/webp'></image>
<image class="img_avatar" src="{
{userInfo.avatarUrl}}" mode="cover" bindtap="changeAvatar"></image>
<text class="userNickName">{
{
userInfo.nickName}}</text>
</view>
在前端页面部分,要头像在image标签中,头像src为userInfo对象中的avatarUrl,通过userInfo.avatarUrl可以取到头像图片。
给image标签绑定changeAvatar事件,触发事件时,选择头像。
wxjs部分:
数据:
data: {
UserInfo:{
},
},
changeAvatar事件:
changeAvatar: function (e){
let that = this
wx.chooseImage({
count: 1,
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
// console.log(res.tempFilePaths) 打印选择的图片路径
var avatarUrl = 'userInfo.avatarUrl';
that.setData({
[avatarUrl]:res.tempFilePaths
})
}
})
},
值得注意的是,在wx.chooseImage(Object object)选择图片成功时,要修改头像src,即userInfo对象中的avatarUrl的值。本菜鸡在这又翻车了,
根据某人的讲解是因为“set.data里边对象深度超过1了,可以在外面用=的方式赋值”,然后我就又去看了setData ,使用了两种改法,都成功了。
(1)直接在data里改数组对象为JSON对象,降低深度。
页面部分:
js部分:
(2)根据网友一丝墨的文章,将要改变的属性转换成字符串,再用中括号包起来修改就行了。如下:
wxml部分:
<!-- 头像及昵称 -->
<view class="avatar">
<image class="bgimg" src='https://hbimg.huabanimg.com/9cf2d584caf323cbacd85210e385ee18bc60065724646-0kPnvG_fw658/format/webp'></image>
<image class="img_avatar" src="{
{userInfo.avatarUrl}}" mode="cover" bindtap="changeAvatar"></image>
<text class="userNickName">{
{
userInfo.nickName}}</text>
</view>
wxjs部分:
data: {
UserInfo:{
},
}
changeAvatar: function (e){
let that = this
wx.chooseImage({
count: 1,
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
// console.log(res.tempFilePaths) 打印选择的图片路径
var avatarUrl = 'userInfo.avatarUrl';
that.setData({
[avatarUrl]:res.tempFilePaths
})
}
})
},
至于为啥要在changeAvatar里写let that = this,是因为this指向不同。
在chooseImage中的this指向的是chooseImage函数中的this,而要在chooseImage函数中改变页面的data数据,需要在chooseImage函数外增加that指针(that指针指向页面中this指向的位置),在chooseImage函数操作that即可以操作页面的数据,这样把函数的this和页面的this区分开使用。
效果如下:
实现完成!