返回

提供微商城·微分销·小程序开店需求

5分钟开通你的微信商城店铺!
HiShop > Hi小程序 > 小程序热点 >

微信小程序商家头像怎么更换?更换方法

2017-09-25 作者:杨先生

  Hi商学院消息,小程序是目前最火热的一种商家前沿形式,当然在小程序运营的过程中会面对各种各样的问题,比如微信小程序商家头像怎么更换?更换方法。微信小程序商家头像的更换属于微信小程序开发的内容了哦,各位微信小程序商家,您可以去更换微信小程序商家头像哦,以下就是微信小程序商家头像更换的方法了。

  微信小程序商家头像怎么更换?

  以下是微信小程序商家微信头像更换实现的方法:

  微信小程序商家头像怎么更换?更换方法

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

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

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

  代码截图:

  微信小程序商家头像怎么更换?更换方法

  bindtap是事件绑定,相当于javascript里的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:solid 1px #f0f0f0;

  padding-top: 30rpx;

  display: flex;

  flex-direction: column;

  }

  .infoMain{

  border-bottom:solid 1px #f0f0f0;

  display: flex;

  background-color: #fff;

  flex-direction: column;

  margin-bottom: 30rpx;

  }

  .info-items{

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:20rpx 40rpx;

  border-top:solid 1px #f0f0f0;

  }

  .infotext{

  display: flex;

  align-items: center;

  }

  .userinfo-avatar {

  width: 128rpx;

  height: 128rpx;

  margin: 0 20rpx;

  border-radius: 50%;

  }

  .info-motto{

  margin: 0 20rpx;

  color:#888;

  }

  .buttonExit{

  margin:0 40rpx;

  }

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

  推荐阅读:2017年微信小程序注册流程详细图解

推荐文章

微分销 产品资料 领取开店礼包 免费体验
门店管理 裂变获客 商城开发 免费注册