[拆彈時刻]小程式canvas生成海報（二）---優化方案

前端智酷方程發表於2019-05-29

海報生成速度緩慢問題的優化
- 微信頭像在app.js中預先載入快取
- 多圖片非同步載入
流程中斷處理
- 二次授權失敗的處理
- 請求或者下載圖片失敗處理
儲存圖片可被壓縮

海報生成速度緩慢問題的優化

原因分析：
主要的時間消耗在於getImageInfo網路請求獲取頭像和下載圖片獲得臨時地址的過程，可以看到海報中有3張圖片（微信頭像、主圖、動態二維碼（對應不同新聞的ID））需要下載，接下來主要就是對這3張圖的優化

微信頭像在app.js中預先載入快取

//app.js
//可以在app.js中使用小程式預設的全域性變數，將頭像在載入的時候預先快取
App({
    onLaunch: function () {
        // 獲取使用者資訊
        wx.getSetting({
            success: res => {
                if (res.authSetting['scope.userInfo']) {
                    // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
                    wx.getUserInfo({
                        success: res => {
                            this.globalData.userInfo = res.userInfo;
                            //從返回值中獲取微信頭像地址
                            let WxHeader = res.userInfo.avatarUrl;  
                            wx.getImageInfo({
                                src: WxHeader,//下載微信頭像獲得臨時地址
                                success: res => {
                                    //將頭像快取在全域性變數裡
                                    this.globalData.avatarUrlTempPath = res.path;
                                },
                                fail: res => {
                                    //失敗回撥
                                }
                            });
                        }
                    })
                }
            }
        })
    },
    globalData: {
        userInfo: null,
        //如果使用者沒有授權，無法在載入小程式的時候獲取頭像，就使用預設頭像
        avatarUrlTempPath: "./images/defaultHeader.jpg"
    }
})
複製程式碼

大致思路是： 載入App.js的時候 ==> getSetting(判斷是否授權)
==> getUserInfo（獲取頭像）
==> getImageInfo（生成臨時地址）
將需要的網路請求在載入小程式的時候就非同步完成，提前將臨時地址快取在全域性變數globalData中，這樣當使用者進入新聞頁面，點選生成海報的時候就不需要在請求微信頭像，縮短了不少時間。
注意： 如果使用者一開始沒有微信授權，生成海報時又必須要使用者頭像不能使用預設的話，那就只能老老實實走之前的流程了。

多圖片非同步載入

let num = 0; //下載圖片計數器，假設一共三張圖片
//下載圖片1
wx.getImageInfo({
    src: image_1,
    success: function (res) {
        //判斷是否是最後一張圖
        if (num >= 2) {
            console.log("圖片全部下載完畢，可以繪製海報")
        } else {
            //如果不是最後一張圖則+1，繼續
            num++;
        }
    },
    fail: function (res) {
        //失敗回撥
    }
});
//下載圖片2
wx.getImageInfo({
    src: image_2,
    success: function (res) {
        //判斷是否是最後一張圖
        if (num >= 2) {
            console.log("圖片全部下載完畢，可以繪製海報")
        } else {
            //如果不是最後一張圖則+1，繼續
            num++;
        }
    }
});
......
複製程式碼

這裡智庫君一開始是使用promise的同步辦法，但是發現3張圖片阻塞嚴重，如果一張圖片下載過慢，就會影響整個海報生成時間，所以可以改為新增計數器判斷的非同步方法。
當海報生成需要多張圖片的時候，完全可以非同步的方式載入他們，通過計數器判斷是否是最後一張。

流程中斷處理

從圖中可以看出，整個海報生成過程有二次授權：使用者資訊授權獲取頭像和儲存相簿授權，非常可能因為使用者的誤點或者拒絕而導致流程中斷。

主要分為二種情況：

需要的圖片沒有拿到，我們可以採取使用預設圖片的方式替代。
儲存相簿授權被拒絕，我們可以提示使用者“截圖儲存”，由於當前版本6.7.2+的**wx.openSetting()**被限制（無法直接被呼叫），如果必須要相簿許可權，我們可以通過showModal觸發。

API/元件名稱	終端型別	微信版本	觸發方法
openSetting	6.7.2	2.3.0	showModal

// 關於 openSetting 的呼叫方法
wx.showModal({
    title: '相簿許可權',
    content: '需要你提供儲存相簿許可權',
    success: function (res) {
        if (res.confirm) {
            wx.openSetting({
                success(settingdata) {
                    console.log(settingdata)
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                        console.log('獲取 相簿 許可權成功，給出再次點選圖片儲存到相簿的提示。');
                    } else {
                        console.log('獲取 相簿 許可權失敗，給出不給許可權就無法正常使用的提示')
                    }
                }
            })
        }
    }
})

//獲取相簿許可權的流程處理
wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,  //canvasToTempFilePath API生成的臨時地址
    success: function (data) {
        console.log("提示圖片儲存成功");
    },
    fail: function (err) {
        console.log(err);
        if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
            console.log("當初使用者拒絕，再次發起授權")
            //呼叫上面說到的方法  wx.openSetting
        } else {
            console.log("提示：請截圖儲存分享");
        }
    },
    complete(res) {
        console.log(res);
    }
})
複製程式碼

儲存圖片可被壓縮

小程式官方提供了一個API可以設定使用者儲存圖片的質量，僅針對JPG。

屬性	預設值	說明	最低版本
quality	1.0	圖片的質量，取值範圍為 (0, 1]	1.7.0

wx.canvasToTempFilePath({
    fileType: 'jpg',
    canvasId: 'canvasId',
    quality:0.8,  //設定JPG儲存質量 80%
    success: res => {
    
    },
    fail:res => {
    }
}, this)
複製程式碼

官方說明： developers.weixin.qq.com/miniprogram…