场景:
在微信小程序里面开展抽奖活动使用转盘抽奖;类似下图(图片来自百度)
方法:
使用lukcy-canvas组件
在 微信小程序 中使用 | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫格 & 老虎机】抽奖插件 (100px.net)
注意点:
1.(这种情况是亲身经历,原因是在安装lukcy-canvas之前已经有了一个vant组件)npm安装好后,将微信开发者工具关闭后再打开,再点击工具栏----构建npm。
2.使用过程中,突然就报组件找不到了,有时候重新开发者工具可以解决,但有时候一直解决不了。我采用的是如下代码即可正常使用。但是原因不知。
cnpm uninstall @lucky-canvas/mini@latest
3.按照组件文档的基本实例可以解决百分之八十的样式问题,但是小程序由于canvas层级过高,会遮住弹窗,组件作者在转盘end以后会将页面切换为图片。由于该页面,还有我写的其他功能组件,因为我选择在弹窗后 wx.redirectTo 到当前页面。