頭像小程序源碼

㈠ 微信頭像製作小程序

製作自己的卡通頭像，可以通過微信小程序。具體操作方法如下：

手機：iPhone13

系統：iOS15.1.1

軟體：微信8.0.20

1、也可以從微信小程序進行生成，打開手機微信app，點擊搜索標志。

㈡ 微信小程序頭像怎麼改

主要步驟

• 獲取用戶頭像

• 圖片模板

• 圖片合成

一、獲取用戶頭像

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

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

• 為優化用戶體驗，使用 wx.getUserInfo 介面直接彈出授權框的開發方式將逐步不再支持。從2018年4月30日開始，小程序與小游戲的體驗版、開發版調用 wx.getUserInfo 介面，將無法彈出授權詢問框，默認調用失敗。正式版暫不受影響。

上圖中彈出底部菜單的交互方式無法通過wx.showActionSheet來實現（因為該介面只能指定字元串文本，不能使用button,navigator等組件）。

因此，只能通過自定義actionSheet組件來實現以上功能。

mmp-action-sheet 組件

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

index.wxml

• <view hidden="{{!actionShow}}" class="mask {{mask}}" bindtap="actionHide"> <view class="actionSheet animated {{animation}}">


• <slot></slot>


• <button class="close" bindtap="actionHide">{{closeText}}</button>


• </view></view>



2、通過slot在 action-sheet 中插入自定義的內容，比如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;


• }.actionSheet button,.actionSheet navigator{ color: #000; text-align: center; background: #fff; border-radius: 0; line-height: 3.5; font-size: 32rpx; border-bottom: 1rpx solid rgb(236, 236, 236); opacity: 1;


• }.actionSheet button:active,.actionSheet navigator:active{ color:#000; background: rgb(236, 236, 236);


• }.actionSheet button::after,.actionSheet navigator::after{ border: none; border-radius: 0;


• }.actionSheet .close{ border-bottom: none; border-bottom: 50rpx solid #fff; border-top: 16rpx solid rgb(236, 236, 236);


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


• }@keyframes fadeInBottom {from{ transform: translate3d(0, 0, 0);


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


• }


• }.fadeInBottom { animation-name: fadeInBottom;


• }@keyframes fadeOutBottom {from{ transform: translate3d(0, -100%, 0);


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


• }


• }.fadeOutBottom { animation-name: fadeOutBottom;


• }@keyframes fadeIn {from{ opacity: 0;


• } to { opacity: 1;


• }


• }.fadeIn { animation-name: fadeIn;


• }@keyframes fadeOut {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)


• }


• }


• })



組件只有兩個參數：

• actionSheetStatus指定組件的初始展示狀態，默認為false，表示不顯示組件。

• closeText指定關閉按鈕的名字，默認為取消。

index.json

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


• }



接下來在頁面中調用組件，在組件中插入了3個button組件來實現來獲取用戶頭像：

• <action-sheet actionSheetStatus="{{actionSheetStatus}}">


• <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">使用微信頭像</button>


• <button bindtap="pickPic" data-source-type="album">使用本地相冊</button>


• <button bindtap="pickPic" data-source-type="camera">拍照</button>


• </action-sheet>



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

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

二、圖片模板

有了原圖，接下來我們需要選擇圖片模板。如果模板數量不多或者模板變化不頻繁，我們可以直接把模板放在本地。鑒於我提供的模板比較多，放在本地會增大小程序源碼的大小，我把模板上傳到了小程序的雲存儲中，通過雲函數來動態獲取圖片模板，方便以後模板擴展。

雲函數tpl的代碼如下：

• // 雲函數入口文件const cloud = require('wx-server-sdk')



• cloud.init()// 雲函數入口函數exports.main = async (event, context) => { const wxContext = cloud.getWXContext() // 1. 獲取資料庫引用


• const db = cloud.database() const MAX_LIMIT = 100


• // 2. 構造查詢語句


• const countResult = await db.collection('template').count() const total = countResult.total // 計算需分幾次取


• const batchTimes = Math.ceil(total / 100) const tasks = [] for (let i = 0; i < batchTimes; i++) { const promise = db.collection('template').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()


• tasks.push(promise)


• } return (await Promise.all(tasks)).rece((acc, cur) => { return {


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


• errMsg: acc.errMsg,


• }


• })


• }



頁面中調用雲函數拉取模板：

• getTpl() { const self = this


• // 調用雲函數獲取圖片模板


• wx.cloud.callFunction({


• name: 'tpl'


• }).then(res => {


• self.setData({


• templates: res.result.data


• })


• })


• }



三、問題

到這里模板的獲取邏輯已經沒有問題了，但在開發過程中遇到了一個問題。模板圖片的鏈接我使用的是雲文件ID，當有大量圖片並行載入的時候，只有部分圖片能夠顯示，我看了一下dom節點其實都已經存在了，image的src的地址也都是正確的。

• 1、微信官方自2.3.0開始已經支持在image中使用雲文件ID。雲文件ID的格式為：cloud://xxx.xxx/templates/01.png。

我猜測可能是對微信雲存儲並發請求過多導致的（有知道的同學可以告知），因為我試了一下將雲文件ID換成正常的HTTPS的鏈接是沒問題的。

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

• 2、將圖片模板存儲到外部OSS，使用https協議的鏈接。

• 3、使用wx.getTempFileURL用雲文件 ID 換取真實鏈接，也就是https形式的鏈接。

• 4、控制圖的並行載入數量。我的實踐是將並行載入數量控制在20，當用戶滾動的時候再發起下一次請求。