微信小程序商家頭像怎么更換?更換方法
Hi商學院消息,小程序是目前最火熱的一種商家前沿形式,當然在小程序運營的過程中會面對各種各樣的問題,比如微信小程序商家頭像怎么更換?更換方法。微信小程序商家頭像的更換屬于微信小程序開發(fā)的內容了哦,各位微信小程序商家,您可以去更換微信小程序商家頭像哦,以下就是微信小程序商家頭像更換的方法了。
微信小程序商家頭像怎么更換?
以下是微信小程序商家微信頭像更換實現(xiàn)的方法:
首先,小程序提供了自己的視圖層描述語言 WXML 和 WXSS,以及基于 JavaScript 的邏輯層框架,并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng),可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
整個系統(tǒng)分為兩塊視圖層(View)和邏輯層(App Service)。簡單的來說,就是不能使用html 、div 、p等等這些標簽。另外,小程序使用FLex布局。
這是做好的一個頁面,現(xiàn)在需要點擊頭像,更換自己喜歡的頭像。
代碼截圖:
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;
}
微信小程序商家頭像在更換的時候需要用到微信小程序代碼,所需要的微信小程序代碼都為大家整理出了,各位微信小程序開發(fā)者,希望以上的內容對你設置微信小程序商家頭像有幫助,大家請多多的關注Hi商學院。
推薦閱讀:2017年微信小程序注冊流程詳細圖解
第二部分:如何開通一個小商店