首先，小程序提供了自己的视图层描述语言WXML和WXSS，以及基于Java的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。

整个系统分为两块视图层(View)和逻辑层(AppService)。简单的来说，就是不能使用html、div、p等等这些标签。另外，小程序使用FLex布局。

这是做好的一个页面，现在需要点击头像，更换自己喜欢的头像。

代码截图：

bindtap是事件绑定，相当于java里的onclick,对最外层的view绑定了setPhotoInfo方法，方便用户点击所以绑定在最外层。

添加了一个变量imgurl，对image进行判断，如果imgurl不为空，则显示我们上传的图片，如果为空，就使用用户自己的头像，userInfo.avatarUrl是获取用户头像。setPhotoInfo方法中，调用微信获取头像的API【wx.chooseImage】。

设置imgurl默认为空

that.setData({imgUrl:tempFilePaths})获取到上传的文件，赋值给imgurl。

页面完整WXSS:

/*pages/more/info/info.wxss*/

.info-cont{

border-top:solid1px#f0f0f0;

padding-top:30rpx;

display:flex;

flex-direction:column;

}

.infoMain{

border-bottom:solid1px#f0f0f0;

display:flex;

background-color:#fff;

flex-direction:column;

margin-bottom:30rpx;

}

.info-items{

display:flex;

justify-content:space-between;

align-items:center;

padding:20rpx40rpx;

border-top:solid1px#f0f0f0;

}

.infotext{

display:flex;

align-items:center;

}

.userinfo-avatar{

width:128rpx;

height:128rpx;

margin:020rpx;

border-radius:50%;

}

.info-motto{

margin:020rpx;

color:#888;

}

.buttonExit{

margin:040rpx;

}

微信小程序商家头像在更换的时候需要用到微信小程序代码，所需要的微信小程序代码都为大家整理出了，各位微信小程序开发者，希望以上的内容对你设置微信小程序商家头像有帮助