微信小程序商家頭像怎么更換？更換方法

　　Hi商學(xué)院消息，小程序是目前最火熱的一種商家前沿形式，當(dāng)然在小程序運(yùn)營(yíng)的過(guò)程中會(huì)面對(duì)各種各樣的問(wèn)題，比如微信小程序商家頭像怎么更換?更換方法。微信小程序商家頭像的更換屬于微信小程序開(kāi)發(fā)的內(nèi)容了哦，各位微信小程序商家，您可以去更換微信小程序商家頭像哦，以下就是微信小程序商家頭像更換的方法了。

　　微信小程序商家頭像怎么更換?

　　以下是微信小程序商家微信頭像更換實(shí)現(xiàn)的方法：

　　首先，小程序提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開(kāi)發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。

　　整個(gè)系統(tǒng)分為兩塊視圖層(View)和邏輯層(App Service)。簡(jiǎn)單的來(lái)說(shuō)，就是不能使用html 、div 、p等等這些標(biāo)簽。另外，小程序使用FLex布局。

　　這是做好的一個(gè)頁(yè)面，現(xiàn)在需要點(diǎn)擊頭像，更換自己喜歡的頭像。

　　代碼截圖：

　　bindtap是事件綁定，相當(dāng)于javascript里的onclick, 對(duì)最外層的view綁定了setPhotoInfo方法，方便用戶(hù)點(diǎn)擊所以綁定在最外層。

　　添加了一個(gè)變量imgurl，對(duì)image進(jìn)行判斷，如果imgurl不為空，則顯示我們上傳的圖片，如果為空，就使用用戶(hù)自己的頭像，userInfo.avatarUrl 是獲取用戶(hù)頭像。setPhotoInfo方法中，調(diào)用微信獲取頭像的API【wx.chooseImage】。

　　設(shè)置imgurl默認(rèn)為空

　　that.setData({imgUrl:tempFilePaths}) 獲取到上傳的文件，賦值給imgurl。

　　頁(yè)面完整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;

　　}

　　微信小程序商家頭像在更換的時(shí)候需要用到微信小程序代碼，所需要的微信小程序代碼都為大家整理出了，各位微信小程序開(kāi)發(fā)者，希望以上的內(nèi)容對(duì)你設(shè)置微信小程序商家頭像有幫助，大家請(qǐng)多多的關(guān)注Hi商學(xué)院。

　　推薦閱讀：2017年微信小程序注冊(cè)流程詳細(xì)圖解