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年微信小程序注冊流程詳細圖解