提供微商城·微分销·小程序开店需求
5分钟开通你的微信商城店铺!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年微信小程序注册流程详细图解
推荐文章
最近在微信社群都可以看到拼多多的拆红包的界面,这又是一款拼多多的裂变营销方式,很多朋友对此表示很怀疑,到底是不...
Hishop最新消息,有这样一个小程序可以无需询问,就知道朋友的位置了,那么是如何定位分享位置的呢。...
小程序小游戏很火,现在开发小程序游戏成为一个热门的行业,下面来开始进入小程序小游戏开发基础快速入门课程。...
微信小程序的商业化进程越来越快,随着微信官方公布的相关数据显示,85%的小程序和电商有关。...
天店收银系统有星耀、星云、标准三个版本,每套系统版本的价格都有所不同,价格从800元起,下面小编就为大家从适用业态...
收银系统小程序的开通流程 1. 选择合适的收银软件 目前市场上有多种收银软件提供小程序店铺功能。例如,店益就是一款能...
在互联网高速发展的今天,线上线下一体化的商业模式已成为主流。特别是对于零售行业而言,将收银系统与微信公众号对接...
收银系统对接微信小程序的流程 准备工作:首先,商家需要准备好收银系统和小程序的开发环境。对于收银系统,可以使用...
直接说答案:目前是不能直接推送自己的小程序的。 不过也不是说没有办法,可以通过视频号小店,然后跳转到自己的微信...
第一:线上线下收银系统 线上线下收银系统是一种结合了实体店铺与在线销售渠道的技术解决方案。这种系统不仅提高了收...