小程序實現大轉盤抽獎----踩坑之路


需求:現在有一個小程序抽獎頁面如下,此類抽獎方式為大轉盤(另一種是九宮格)

 

 

思路:由服務的獲取:可抽獎次數和獎品列表,利用canvas渲染每一獎品分區背景,利用rotate和for呈現各分區獎品名,最后利用小程序動畫animation將轉盤轉起來,思路很好,但是真機運行如下:

 

存在問題:

1.抽獎按鈕沒了
2. 獎品沒有出來
3.點擊抽獎時點擊事件有效,但是沒有動畫也沒有調用方法里的接口,控制台顯示:

Invoke event getLottery in page: pages/lottery/lottery 

4.值得一提的是,所有問題在小程序IDE的模擬器上,都不會出現,只在真機出現,我測試的機型是:Xiaomi MI-MAX

 

查看官方文檔后發現:

1.原來一切都是層級問題,抽獎按鈕被擋了,獎品也出來了只是被擋了

 

原生組件限制:https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

 

 

 當我用cover-view和cover-image解決層級問題后,實際上雖然按鈕看得見,但是點擊無效,只有將按鈕移到canvas區域外點擊才有效。另外,即使點擊抽獎成功后,還是沒有轉動的動畫,但是抽獎請求是成功的發了出去並且成功地抽了獎。抽獎成功提示獎品名彈層出現后,canvas就移位了,如下:

使用cover后,只是顯示正常:

 

抽獎后,canvas的變化(123232是我隨便寫的一個按鈕,用於在canvas外觸發抽獎事件):

 

 

坑是真的多!

 這是小程序的BUG,還真是無能為力,不過我的項目已經交付了,大家來看另外解決方案的效果:

區別是什么?

1.我把canvas去掉了,背景設置整個圓型DIV的background-color為藍色

2.利用rotate+wx:for渲染獎品名和分割線,給人一種分區域的感覺,動畫依然采用animation

還有什么可以改進的地方?

我把canvas保留下來,日后修復bug后還可以使用,對於整塊藍色,顯然不好看,所以可以配合ui設置背景圖片,值得注意的是,小程序背景圖片只支持base64和網絡路徑,可能是官方為了縮小項目體積特意為之

 

2018.10.14更新:

小程序解決canvas頁面移動問題:

https://blog.csdn.net/seven521m/article/details/81629377

//page里面對應的的json文件
{
    "disableScroll": true
}

 

2019.02.14更新:

近日找到一種終極解決辦法:

1.指針被覆蓋問題:用canvas繪制指針(圖片)即可,覆蓋在表盤的上方,先畫表盤,再畫指針。

2.如何控制表盤轉動起來?就是要解決事件監聽的問題,要求點到指針才轉動,點其他地方不能動,其實很簡單,就是監聽每次點擊,若點擊的x,y坐標在繪制指針的范圍內,就認為點到指針(實際上看頁面上確實點到了),接着就讓轉盤開動。

3.轉盤如何轉動,實際上canvas有ctx.rotate(),這個api就能實現,因此我們就不必用css嘗試將canvas轉動,后者是行不通的。

4.解決以上三個問題,那么整個大轉盤,就可以完全由canvas去實現,並且效果不錯!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM