-
海報生成速度緩慢問題的優化
- 微信頭像在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)
如果有什麼疑問或者糾錯可以在下面給智酷君留言。
如果智酷君的分享能夠幫助到你，或者想持續獲得最新的全棧攻略
可以在segmentfault關注我，或在VX搜索“ Geek_Club ”或者“ 智酷方程式 ”
掃描關注公衆號👇👇👇