【每日出擊運(yùn)簽】小程序“踩坑”總結(jié)
|
最近剛好接手支持了每日出擊運(yùn)簽的小程序，在小程序完成以后，整理了一下初次接手小程序的一些體驗(yàn)，所以有了現(xiàn)在這篇小總結(jié)。在小程序需求的進(jìn)行期間，十分感謝澤賢，小蘇，俞煥，花花的指導(dǎo)~
話不多說，立馬送上小程序碼，大家可以掃碼體驗(yàn)一下
每日出擊運(yùn)簽小程序主要?jiǎng)澐譃閹讉€(gè)功能模塊：
下面重點(diǎn)介紹一下?lián)u一搖、抽簽并顯示運(yùn)簽結(jié)果、保存圖片三個(gè)功能。 關(guān)于搖一搖功能 花叔早前已經(jīng)寫過文章（鏈接如下：http://www.ifanr.com/minapp/880378）介紹過搖一搖的實(shí)現(xiàn)思路了，這里簡(jiǎn)單歸納一下?lián)u一搖功能的幾個(gè)主要的思路。 準(zhǔn)備： 需要設(shè)置一組變量，保存搖一搖x,y,z三軸的數(shù)值，需要設(shè)置一個(gè)變量來記錄搖一搖的時(shí)間。 實(shí)現(xiàn)注意事項(xiàng)：
//計(jì)算 公式的意思是 單位時(shí)間內(nèi)運(yùn)動(dòng)的路程，即為我們想要的速度 var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
wx.onAccelerometerChange(CALLBACK)：用于監(jiān)聽加速度數(shù)據(jù)，在發(fā)生有加速度的動(dòng)作的時(shí)候，執(zhí)行搖一搖的判斷邏輯 wx.stopAccelerometer：在搖一搖的邏輯執(zhí)行期間，需要停止監(jiān)聽加速度數(shù)據(jù)，避免多次觸發(fā)搖一搖
關(guān)于抽簽并顯示運(yùn)簽結(jié)果的功能 每日出擊運(yùn)簽的小程序其中有一個(gè)需求是抽簽并顯示運(yùn)簽結(jié)果。在用戶每天進(jìn)入小程序的時(shí)候，通過搖一搖，得到一個(gè)抽簽結(jié)果，如圖所示：
關(guān)于這塊功能，這里需要著重介紹vine在實(shí)現(xiàn)小程序的過程中比較關(guān)注的兩個(gè)點(diǎn)，一個(gè)是隨機(jī)顯示抽簽結(jié)果，一個(gè)是用于顯示簽紙的動(dòng)畫效果。
隨機(jī)出現(xiàn)五個(gè)運(yùn)簽結(jié)果，大吉、吉、平、兇、大兇；不同結(jié)果對(duì)應(yīng)下面不同文案；每個(gè)用戶每天只能獲取同一個(gè)結(jié)果。隨機(jī)文案，每個(gè)用戶在用完庫存前不重復(fù)
// 打亂數(shù)組順序
function shuffle(a) {
var j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
}
var m_w = 123456789;
var m_z = 987654321;
var mask = 0xffffffff;
function seed(i) {
m_w = i;
m_z = 987654321;
}
function random() {
m_z = (36969 * (m_z & 65535) + (m_z >> 16)) & mask;
m_w = (18000 * (m_w & 65535) + (m_w >> 16)) & mask;
var result = ((m_z << 16) + m_w) & mask;
result /= 4294967296;
return result + 0.5;
}
//獲取用戶id
var userid = parseInt(gbConfig.user_id, 16);
seed(userid);
// 隨機(jī)生成抽簽描述
var qian = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
var result = [];
for (var i = 0; i < 10; i++) {
shuffle(qian);
result = result.concat(qian);
}
// 隨機(jī)生成抽簽結(jié)果
var luck = [1, 2, 3, 4, 5];
var luckarr = [];
for (var i = 0; i < 60; i++) {
shuffle(luck);
luckarr = luckarr.concat(luck);
}
2.簽紙顯示的動(dòng)畫效果
在通過減幀以后，得到了8張序列幀圖，vine發(fā)現(xiàn)，8張序列幀圖通過拼接得到的雪碧圖會(huì)非常大（達(dá)到了1M左右的大?。?，所以再次進(jìn)行減幀得到由4張序列幀圖拼接而成的雪碧圖（也有500+kb左右）。但是在實(shí)際放到頁面上面的時(shí)候發(fā)現(xiàn)，4張序列幀圖幀數(shù)太少，造成了動(dòng)畫卡頓不流暢的情況，而且在低端安卓機(jī)上面，這組序列幀動(dòng)畫完全無法流暢進(jìn)行。所以第一套方案放棄。 第二：把8張序列幀圖分開加載，4張為一組，拼接成一張雪碧圖，一共兩張雪碧圖，如下：
vine的處理方式是：先加載第一張雪碧圖，在第一張雪碧圖逐幀動(dòng)畫結(jié)束后，切換到第二張雪碧圖，無縫連接播放第二組逐幀動(dòng)畫。結(jié)果在低端安卓機(jī)上面出現(xiàn)了同樣的情況，動(dòng)畫播放非?？D，而且在圖片切換的過程中出現(xiàn)了空白。于是第二套方案失敗。 第三：在vine百思不得其解的時(shí)候，突然發(fā)現(xiàn)，這套序列幀有一個(gè)特點(diǎn)：它的簽紙和卷軸并不是立體的！也就是說，這里其實(shí)可以不需要序列幀來實(shí)現(xiàn)簽紙打開的效果，只需要最后一張圖就可以了：
關(guān)于保存圖片的功能
通過點(diǎn)擊分享按鈕，可以生成一張和簽紙類似的圖片，用戶可以長(zhǎng)按保存這張圖片到手機(jī)本地。從而達(dá)到轉(zhuǎn)發(fā)分享的目的。 而這個(gè)保存，所需要的就是canvas。小程序API提供了canvas的接口：
通過這個(gè)接口，我們可以把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出成指定大小的圖片，然后再調(diào)用小程序的預(yù)覽接口進(jìn)行圖片預(yù)覽以及保存：
但是在這里，vine遇到了幾個(gè)問題：
下面來介紹一下這兩個(gè)問題相應(yīng)的解決措施： 多次點(diǎn)擊保存按鈕觸發(fā)canvas，導(dǎo)致手機(jī)滑動(dòng)的時(shí)候非常卡頓 canvas只在需要觸發(fā)的時(shí)候渲染，在用戶沒有點(diǎn)擊保存按鈕的時(shí)候，默認(rèn)不渲染canvas。代碼如下：由于小程序和MVVM框架類似，無法直接操作dom，所以vine采取了在樣式上面添加狀態(tài)，通過修改showcanvas變量的值，來控制canvas的顯示和隱藏。在執(zhí)行畫圖操作的時(shí)候使變量值為false，顯示canvas，在繪制完成的時(shí)候更改變量值，隱藏canvas
<canvas class='{{showcanvas ? "hidcanvas" : "showcanvas"}}' style="width: 750px; height: 1334px;position:fixed;left:100000rpx;top:-100000rpx;" canvas-id="shareQRcode"></canvas>
生成預(yù)覽圖片時(shí)間非常慢 生成預(yù)覽圖片時(shí)間非常慢，目前判斷的原因是，直接預(yù)覽canvas臨時(shí)路徑的圖片耗時(shí)比較久。那么應(yīng)該如何優(yōu)化這個(gè)過程呢？ 小程序的API提供了幾個(gè)關(guān)于文件的接口：
我們可以通過這幾個(gè)接口優(yōu)化目前的預(yù)覽方式。在這其中vine做了兩種不同的嘗試。 第一，在執(zhí)行wx.previewImage的success的回調(diào)的時(shí)候，把previewImage生成的臨時(shí)路徑保存下來，下次再點(diǎn)擊預(yù)覽的時(shí)候，直接獲取本地已保存的文件列表wx.getSavedFileList，取得最近保存下來的文件的本地路徑，進(jìn)行預(yù)覽。這么做的想法主要是為了解決canvas渲染的問題，每天只渲染一次，后續(xù)都是通過預(yù)覽本地圖片鏈接達(dá)到生成圖片的目的。梳理一下流程： 初次渲染：canvasToTempFilePath -> previewImage -> saveFile 二次渲染：getSavedFileList -> previewImage 可惜理想始終是豐滿的，在實(shí)際操作的過程中vine發(fā)現(xiàn)，通過這樣的方式預(yù)覽圖片的時(shí)候，一直處于loading的狀態(tài)，無法生成初次渲染的圖片。vine非?？鄲?，至今沒能找到原因。 于是vine想了另一種辦法，調(diào)整了預(yù)覽的順序如下： 初次渲染：canvasToTempFilePath -> saveFile -> previewImage 二次渲染：getSavedFileList -> previewImage 這時(shí)候vine發(fā)現(xiàn)，先把canvas生成的臨時(shí)路徑保存到本地，再預(yù)覽，這種方法是可行的！而且在二次渲染的過程中，由于只是讀取小程序本地的圖片路徑，無需再次調(diào)用canvas繪圖，二次預(yù)覽的時(shí)間大大減少。 在這里我們需要注意官方文檔中提到的一點(diǎn)：小程序本地文件存儲(chǔ)的大小限制為10M。所以我們需要調(diào)用wx.removeSavedFiled的方法刪除我們不需要的圖片（當(dāng)天之前存下來的圖片都是我們無需保存到本地的圖片，可以刪除） 三星note5保存圖片尺寸的問題 在數(shù)量龐大版本不一的安卓手機(jī)上，vine收到反饋，三星note5在保存圖片的時(shí)候會(huì)遇到圖片底部被裁減的情況。在通過多次修改以及對(duì)比類似的小程序以后發(fā)現(xiàn)，note5用canvas繪制的圖片有一個(gè)最大的范圍是750*1150，超出這個(gè)范圍的圖片，底部就會(huì)被裁減。為什么會(huì)有這個(gè)最大范圍vine目前還沒探索出結(jié)論，希望遇到過這個(gè)問題的大神可以和vine交流一下心得，手動(dòng)比心！~ 最后梳理一下小程序項(xiàng)目的一些注意點(diǎn)：
|
