最近剛好接手支持了每日出擊運(yùn)簽的小程序，在小程序完成以后，整理了一下初次接手小程序的一些體驗(yàn)，所以有了現(xiàn)在這篇小總結(jié)。在小程序需求的進(jìn)行期間，十分感謝澤賢，小蘇，俞煥，花花的指導(dǎo)~

話不多說(shuō)，立馬送上小程序碼，大家可以掃碼體驗(yàn)一下

每日出擊運(yùn)簽小程序主要?jiǎng)澐譃閹讉€(gè)功能模塊：

• 搖一搖
• 抽簽并顯示運(yùn)簽結(jié)果
• 保存圖片
• 預(yù)約功能
• 簽到功能
• 積分功能
• 評(píng)論功能

下面重點(diǎn)介紹一下搖一搖、抽簽并顯示運(yùn)簽結(jié)果、保存圖片三個(gè)功能。

關(guān)于搖一搖功能

花叔早前已經(jīng)寫(xiě)過(guò)文章（鏈接如下：http://www.ifanr.com/minapp/880378）介紹過(guò)搖一搖的實(shí)現(xiàn)思路了，這里簡(jiǎn)單歸納一下?lián)u一搖功能的幾個(gè)主要的思路。

準(zhǔn)備：

需要設(shè)置一組變量，保存搖一搖x,y,z三軸的數(shù)值，需要設(shè)置一個(gè)變量來(lái)記錄搖一搖的時(shí)間。

實(shí)現(xiàn)注意事項(xiàng)：

1. 我們需要定一個(gè)閾值，作為搖一搖的判斷基準(zhǔn)。
2. 需要通過(guò)公式來(lái)計(jì)算單位時(shí)間內(nèi)運(yùn)動(dòng)的路程，也就是我們想要的速度。如果這個(gè)速度超過(guò)了我們定下來(lái)的閾值，那么就算作用戶(hù)已經(jīng)搖一搖

//計(jì)算 公式的意思是 單位時(shí)間內(nèi)運(yùn)動(dòng)的路程，即為我們想要的速度
var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;

1. 另外我們需要注意兩個(gè)小程序提供的API：

wx.onAccelerometerChange(CALLBACK)：用于監(jiān)聽(tīng)加速度數(shù)據(jù)，在發(fā)生有加速度的動(dòng)作的時(shí)候，執(zhí)行搖一搖的判斷邏輯

wx.stopAccelerometer：在搖一搖的邏輯執(zhí)行期間，需要停止監(jiān)聽(tīng)加速度數(shù)據(jù)，避免多次觸發(fā)搖一搖

1. 為了給予用戶(hù)更好的搖一搖反饋，建議在執(zhí)行搖一搖以后設(shè)置振動(dòng)反饋，這個(gè)小程序API里面也帶有相關(guān)的接口：wx.vibrateShort(OBJECT)

關(guān)于抽簽并顯示運(yùn)簽結(jié)果的功能

每日出擊運(yùn)簽的小程序其中有一個(gè)需求是抽簽并顯示運(yùn)簽結(jié)果。在用戶(hù)每天進(jìn)入小程序的時(shí)候，通過(guò)搖一搖，得到一個(gè)抽簽結(jié)果，如圖所示：

關(guān)于這塊功能，這里需要著重介紹vine在實(shí)現(xiàn)小程序的過(guò)程中比較關(guān)注的兩個(gè)點(diǎn)，一個(gè)是隨機(jī)顯示抽簽結(jié)果，一個(gè)是用于顯示簽紙的動(dòng)畫(huà)效果。

1. 隨機(jī)顯示抽簽結(jié)果
   這個(gè)小程序中，隨機(jī)顯示抽簽結(jié)果的需求具體如下：

隨機(jī)出現(xiàn)五個(gè)運(yùn)簽結(jié)果，大吉、吉、平、兇、大兇；不同結(jié)果對(duì)應(yīng)下面不同文案；每個(gè)用戶(hù)每天只能獲取同一個(gè)結(jié)果。隨機(jī)文案，每個(gè)用戶(hù)在用完庫(kù)存前不重復(fù)
這里我們可以提煉出兩個(gè)關(guān)鍵點(diǎn)：一個(gè)是每個(gè)用戶(hù)每天獲取的結(jié)果不變，一個(gè)是，在庫(kù)存用完前不重復(fù)出現(xiàn)文案
也就是說(shuō)，我們需要把用戶(hù)的抽簽結(jié)果和用戶(hù)id關(guān)聯(lián)起來(lái)。另外我們需要準(zhǔn)備儲(chǔ)存抽簽結(jié)果的數(shù)組，每天從數(shù)組里面取出一個(gè)值作為抽簽結(jié)果，從而保證在庫(kù)存用完前不重復(fù)出現(xiàn)文案。貼代碼：

// 打亂數(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;
}

//獲取用戶(hù)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)畫(huà)效果
這次小程序，在上線前添加了簽紙顯示的動(dòng)畫(huà)效果，以加強(qiáng)“抽簽”的用戶(hù)感受。簽紙以滾軸的形式向下展開(kāi)，慢慢呈現(xiàn)出簽紙的結(jié)果。 關(guān)于動(dòng)畫(huà)效果，最容易被使用的實(shí)現(xiàn)方式應(yīng)該就是css3動(dòng)畫(huà)以及序列幀。這里嘗試了三套方案，最終選擇了最后一套。下面分別來(lái)介紹一下這三套方案。 第一：使用傳統(tǒng)的序列幀方式。嘗試使用傳統(tǒng)的序列幀，通過(guò)逐幀動(dòng)畫(huà)，慢慢鋪開(kāi)簽紙，逐幀動(dòng)畫(huà)如下：

在通過(guò)減幀以后，得到了8張序列幀圖，vine發(fā)現(xiàn)，8張序列幀圖通過(guò)拼接得到的雪碧圖會(huì)非常大（達(dá)到了1M左右的大?。?，所以再次進(jìn)行減幀得到由4張序列幀圖拼接而成的雪碧圖（也有500+kb左右）。但是在實(shí)際放到頁(yè)面上面的時(shí)候發(fā)現(xiàn)，4張序列幀圖幀數(shù)太少，造成了動(dòng)畫(huà)卡頓不流暢的情況，而且在低端安卓機(jī)上面，這組序列幀動(dòng)畫(huà)完全無(wú)法流暢進(jìn)行。所以第一套方案放棄。 第二：把8張序列幀圖分開(kāi)加載，4張為一組，拼接成一張雪碧圖，一共兩張雪碧圖，如下：

vine的處理方式是：先加載第一張雪碧圖，在第一張雪碧圖逐幀動(dòng)畫(huà)結(jié)束后，切換到第二張雪碧圖，無(wú)縫連接播放第二組逐幀動(dòng)畫(huà)。結(jié)果在低端安卓機(jī)上面出現(xiàn)了同樣的情況，動(dòng)畫(huà)播放非?？D，而且在圖片切換的過(guò)程中出現(xiàn)了空白。于是第二套方案失敗。 第三：在vine百思不得其解的時(shí)候，突然發(fā)現(xiàn)，這套序列幀有一個(gè)特點(diǎn)：它的簽紙和卷軸并不是立體的！也就是說(shuō)，這里其實(shí)可以不需要序列幀來(lái)實(shí)現(xiàn)簽紙打開(kāi)的效果，只需要最后一張圖就可以了：

關(guān)于保存圖片的功能
保存圖片的功能是這次小程序中的一個(gè)大難點(diǎn)，這里非常感謝澤賢和小蘇提供的建議。下面來(lái)介紹一下保存圖片的功能到底是什么：

通過(guò)點(diǎn)擊分享按鈕，可以生成一張和簽紙類(lèi)似的圖片，用戶(hù)可以長(zhǎng)按保存這張圖片到手機(jī)本地。從而達(dá)到轉(zhuǎn)發(fā)分享的目的。

而這個(gè)保存，所需要的就是canvas。小程序API提供了canvas的接口：

通過(guò)這個(gè)接口，我們可以把當(dāng)前畫(huà)布指定區(qū)域的內(nèi)容導(dǎo)出成指定大小的圖片，然后再調(diào)用小程序的預(yù)覽接口進(jìn)行圖片預(yù)覽以及保存：

但是在這里，vine遇到了幾個(gè)問(wèn)題：

1. 多次點(diǎn)擊保存按鈕觸發(fā)canvas，導(dǎo)致手機(jī)滑動(dòng)的時(shí)候非?？D
2. 生成預(yù)覽圖片時(shí)間非常慢
3. 三星note5保存圖片尺寸的問(wèn)題

下面來(lái)介紹一下這兩個(gè)問(wèn)題相應(yīng)的解決措施：

多次點(diǎn)擊保存按鈕觸發(fā)canvas，導(dǎo)致手機(jī)滑動(dòng)的時(shí)候非?？D

canvas只在需要觸發(fā)的時(shí)候渲染，在用戶(hù)沒(méi)有點(diǎn)擊保存按鈕的時(shí)候，默認(rèn)不渲染canvas。代碼如下：由于小程序和MVVM框架類(lèi)似，無(wú)法直接操作dom，所以vine采取了在樣式上面添加狀態(tài)，通過(guò)修改showcanvas變量的值，來(lái)控制canvas的顯示和隱藏。在執(zhí)行畫(huà)圖操作的時(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è)過(guò)程呢？

小程序的API提供了幾個(gè)關(guān)于文件的接口：

我們可以通過(guò)這幾個(gè)接口優(yōu)化目前的預(yù)覽方式。在這其中vine做了兩種不同的嘗試。

第一，在執(zhí)行wx.previewImage的success的回調(diào)的時(shí)候，把previewImage生成的臨時(shí)路徑保存下來(lái)，下次再點(diǎn)擊預(yù)覽的時(shí)候，直接獲取本地已保存的文件列表wx.getSavedFileList，取得最近保存下來(lái)的文件的本地路徑，進(jìn)行預(yù)覽。這么做的想法主要是為了解決canvas渲染的問(wèn)題，每天只渲染一次，后續(xù)都是通過(guò)預(yù)覽本地圖片鏈接達(dá)到生成圖片的目的。梳理一下流程：

初次渲染：canvasToTempFilePath -> previewImage -> saveFile

二次渲染：getSavedFileList -> previewImage

可惜理想始終是豐滿(mǎn)的，在實(shí)際操作的過(guò)程中vine發(fā)現(xiàn)，通過(guò)這樣的方式預(yù)覽圖片的時(shí)候，一直處于loading的狀態(tài)，無(wú)法生成初次渲染的圖片。vine非常苦惱，至今沒(méi)能找到原因。

于是vine想了另一種辦法，調(diào)整了預(yù)覽的順序如下：

初次渲染：canvasToTempFilePath -> saveFile -> previewImage

二次渲染：getSavedFileList -> previewImage

這時(shí)候vine發(fā)現(xiàn)，先把canvas生成的臨時(shí)路徑保存到本地，再預(yù)覽，這種方法是可行的！而且在二次渲染的過(guò)程中，由于只是讀取小程序本地的圖片路徑，無(wú)需再次調(diào)用canvas繪圖，二次預(yù)覽的時(shí)間大大減少。

在這里我們需要注意官方文檔中提到的一點(diǎn)：小程序本地文件存儲(chǔ)的大小限制為10M。所以我們需要調(diào)用wx.removeSavedFiled的方法刪除我們不需要的圖片（當(dāng)天之前存下來(lái)的圖片都是我們無(wú)需保存到本地的圖片，可以刪除）

三星note5保存圖片尺寸的問(wèn)題

在數(shù)量龐大版本不一的安卓手機(jī)上，vine收到反饋，三星note5在保存圖片的時(shí)候會(huì)遇到圖片底部被裁減的情況。在通過(guò)多次修改以及對(duì)比類(lèi)似的小程序以后發(fā)現(xiàn)，note5用canvas繪制的圖片有一個(gè)最大的范圍是750*1150，超出這個(gè)范圍的圖片，底部就會(huì)被裁減。為什么會(huì)有這個(gè)最大范圍vine目前還沒(méi)探索出結(jié)論，希望遇到過(guò)這個(gè)問(wèn)題的大神可以和vine交流一下心得，手動(dòng)比心！~

最后梳理一下小程序項(xiàng)目的一些注意點(diǎn)：

• 小程序需要申請(qǐng)小程序公司主體的賬號(hào)，拿到appid，給到后臺(tái)同學(xué)配置接口
• 小程序的體驗(yàn)需要上傳體驗(yàn)版本，獲取體驗(yàn)者的微信號(hào)，到小程序管理后臺(tái)開(kāi)通體驗(yàn)者權(quán)限
• 小程序開(kāi)發(fā)過(guò)程中需要的單位為rpx，兼容問(wèn)題較少
• 在小程序的需求中，需要仔細(xì)查看文檔中提到的版本以及兼容問(wèn)題，做好降級(jí)處理：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html

本文作者：王瑩
原文地址：每日出擊運(yùn)簽小程序“踩坑”總結(jié) | 微信公眾平臺(tái) 開(kāi)發(fā)者社區(qū)