注冊(cè)登錄

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

2017-09-25
導(dǎo)讀:Hi商學(xué)院消息,小程序是目前最火熱的一種商家前沿形式,當(dāng)然在小程序運(yùn)營(yíng)的過(guò)程中會(huì)面對(duì)各種各樣的問(wèn)題,比如微信小程序商家頭像怎么更換?更換方法。微信小程序商家頭像的更換屬于微信...

  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ì)圖解

重磅推薦:小程序開(kāi)店目錄

第一部分:小商店是什么

第二部分:如何開(kāi)通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開(kāi)店任務(wù)常見(jiàn)問(wèn)題

第五部分:小商店可以賣(mài)什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開(kāi)發(fā)

電話(huà)咨詢(xún) 微信咨詢(xún) 預(yù)約演示 0元開(kāi)店