微信小程序頭像怎么改

獲取用戶頭像

一、獲取用戶頭像

制作自定義頭像的第一步就是先選擇圖片。在【海豚趣圖】的交互設(shè)計(jì)中，用戶有三種選擇圖片的方式：微信頭像、本地相冊和相機(jī)拍攝。獲取用戶頭像的產(chǎn)品設(shè)計(jì)如下圖所示：

1、由于微信官方不再支持通過wx.getUserInfo接口來獲取用戶信息，我們必須通過使用button組件并將open-type指定為getUserInfo類型來獲取或展示用戶信息。

為優(yōu)化用戶體驗(yàn)，使用wx.getUserInfo接口直接彈出授權(quán)框的開發(fā)方式將逐步不再支持。從2018年4月30日開始，小程序與小游戲的體驗(yàn)版、開發(fā)版調(diào)用wx.getUserInfo接口，將無法彈出授權(quán)詢問框，默認(rèn)調(diào)用失敗。正式版暫不受影響。

上圖中彈出底部菜單的交互方式無法通過wx.showActionSheet來實(shí)現(xiàn)（因?yàn)樵摻涌谥荒苤付ㄗ址谋?，不能使用button,navigator等組件）。

因此，只能通過自定義actionSheet組件來實(shí)現(xiàn)以上功能。

mmp-action-sheet組件

以下是mmp-action-sheet組件的代碼。

index.wxml

{{closeText}}

2、通過slot在action-sheet中插入自定義的內(nèi)容，比如button、navigator等。

index.wxss

.mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999;

}.actionSheet{width:100%;position:absolute;top:100%;z-index:1000;overflow:hidden;

}.actionSheetbutton,.actionSheetnavigator{color:#000;text-align:center;background:#fff;border-radius:0;line-height:3.5;font-size:32rpx;border-bottom:1rpxsolidrgb(236,236,236);opacity:1;

}.actionSheetbutton:active,.actionSheetnavigator:active{color:#000;background:rgb(236,236,236);

}.actionSheetbutton::after,.actionSheetnavigator::after{border:none;border-radius:0;

}.actionSheet.close{border-bottom:none;border-bottom:50rpxsolid#fff;border-top:16rpxsolidrgb(236,236,236);

}.animated{animation-timing-function:ease-out;animation-duration:0.2s;animation-fill-mode:both;

}@keyframesfadeInBottom{from{transform:translate3d(0,0,0);

}to{transform:translate3d(0,-100%,0);

}.fadeInBottom{animation-name:fadeInBottom;

}@keyframesfadeOutBottom{from{transform:translate3d(0,-100%,0);

}to{transform:translate3d(0,0,0);

}.fadeOutBottom{animation-name:fadeOutBottom;

}@keyframesfadeIn{from{opacity:0;

}to{opacity:1;

}.fadeIn{animation-name:fadeIn;

}@keyframesfadeOut{from{opacity:1;

}to{opacity:0;

}.fadeOut{animation-name:fadeOut;

index.js

Component({properties:{actionSheetStatus:{type:Boolean,value:false,

observer(newVal){

if(newVal){

this.setData({actionSheetStatus:true,animationMask:'fadeIn',animationSheet:'fadeInBottom'

}else{this.setData({actionSheetStatus:false,animationMask:'fadeOut',animationSheet:'fadeOutBottom'

},closeText:{type:String,value:'取消'

},data:{animationMask:'fadeIn',animationSheet:'fadeInBottom'

},methods:{

closeActionSheet(){

this.setData({animationMask:'fadeOut',animationSheet:'fadeOutBottom'

setTimeout(()=>{

this.setData({actionSheetStatus:false})

},300)

組件只有兩個(gè)參數(shù)：

actionSheetStatus指定組件的初始展示狀態(tài)，默認(rèn)為false，表示不顯示組件。

closeText指定關(guān)閉按鈕的名字，默認(rèn)為取消。

index.json

{"component":true,"usingComponents":{}

接下來在頁面中調(diào)用組件，在組件中插入了3個(gè)button組件來實(shí)現(xiàn)來獲取用戶頭像：

使用微信頭像

使用本地相冊

拍照

以上我們通過自定義組件mmp-action-sheet就解決了原生的actionsheet無法指定button，從而無法獲取用戶微信頭像的問題。

該組件我已經(jīng)發(fā)布到npm包，需要用到的同學(xué)可以通過npm安裝，也可以在github上查看源碼和使用文檔。

二、圖片模板

有了原圖，接下來我們需要選擇圖片模板。如果模板數(shù)量不多或者模板變化不頻繁，我們可以直接把模板放在本地。鑒于我提供的模板比較多，放在本地會(huì)增大小程序源碼的大小，我把模板上傳到了小程序的云存儲(chǔ)中，通過云函數(shù)來動(dòng)態(tài)獲取圖片模板，方便以后模板擴(kuò)展。

云函數(shù)tpl的代碼如下：

//云函數(shù)入口文件constcloud=require('wx-server-sdk')

cloud.init()//云函數(shù)入口函數(shù)exports.main=async(event,context)=>{constwxContext=cloud.getWXContext()//1.獲取數(shù)據(jù)庫引用

constdb=cloud.database()constMAX_LIMIT=100

//2.構(gòu)造查詢語句

constcountResult=awaitdb.collection('template').count()consttotal=countResult.total//計(jì)算需分幾次取

constbatchTimes=Math.ceil(total/100)consttasks=[]for(leti=0;i

tasks.push(promise)

}return(awaitPromise.all(tasks)).reduce((acc,cur)=>{return{

data:acc.data.concat(cur.data),

errMsg:acc.errMsg,

頁面中調(diào)用云函數(shù)拉取模板：

getTpl(){constself=this

//調(diào)用云函數(shù)獲取圖片模板

wx.cloud.callFunction({

name:'tpl'

}).then(res=>{

self.setData({

templates:res.result.data

到這里模板的獲取邏輯已經(jīng)沒有問題了，但在開發(fā)過程中遇到了一個(gè)問題。模板圖片的鏈接我使用的是云文件ID，當(dāng)有大量圖片并行加載的時(shí)候，只有部分圖片能夠顯示，我看了一下dom節(jié)點(diǎn)其實(shí)都已經(jīng)存在了，image的src的地址也都是正確的。

1、微信官方自2.3.0開始已經(jīng)支持在image中使用云文件ID。云文件ID的格式為：。

我猜測可能是對微信云存儲(chǔ)并發(fā)請求過多導(dǎo)致的（有知道的同學(xué)可以告知），因?yàn)槲以嚵艘幌聦⒃莆募蘒D換成正常的HTTPS的鏈接是沒問題的。

由此可知，可以想到有三種可行的解決方案：

2、將圖片模板存儲(chǔ)到外部OSS，使用https協(xié)議的鏈接。

3、使用wx.getTempFileURL用云文件ID換取真實(shí)鏈接，也就是https形式的鏈接。

4、控制圖的并行加載數(shù)量。我的實(shí)踐是將并行加載數(shù)量控制在20，當(dāng)用戶滾動(dòng)的時(shí)候再發(fā)起下一次請求。

小程序怎么換頭像

進(jìn)入微信公眾平臺(tái)，登錄小程序帳號(hào)，點(diǎn)擊左側(cè)菜單 “設(shè)置” -> 在右側(cè)中找到 “小程序頭像” 點(diǎn)擊 同行右側(cè)的 “修改”即可。如圖所示

微信怎么更改頭像啊?

微信里面，點(diǎn)我，再點(diǎn)自己頭像，然后會(huì)出現(xiàn)頭像，里面會(huì)出現(xiàn)拍照和從手機(jī)相冊選擇

微信頭像怎么更換？？

在微信里右下角有個(gè)我——然后看頭像——點(diǎn)擊頭像，頭像旁邊有個(gè)>的剪頭點(diǎn)一下，換你喜歡的頭像就行了！

以上就是【你一定要看到最后！微信上京東小程序能修改頭像嗎】的全部內(nèi)容。

微信:N915888888

(歡迎您前來咨詢)