故事背景前段时间，我在公司坐着划水，领导突然从背后抛给我一个需求.，公司官网最近要举办活动，需要做大转盘抽奖。必有内幕，说什么就赢什么。然后就开始思考如何实现这个功能。我的岗位是后端，给的就是这种前端的工作。.....最初的想法在第一时间抛给了我。我的想法是：画几张圆盘图，然后有规律地轮流播放，达到指针抽奖的效果。与此类似，笔者也不反感手绘图。做完之后，我瞪了领导一眼，当场差点被板凳砸了。于是默默改变主意，尝试用css3绘制转盘，实现指针的旋转效果，让奖品动态变化，看起来更流畅。接下来是漫长的自学css3相关知识...新发现然后在学习css3相关知识的路上，看到某位作者推荐的抽奖插件，看来是作者本人在推荐哈哈.插件的名字是lucky-canvas抽奖插件我点进去一看，抽奖的种类很多，有大转盘，九方格，还有吃角子老虎机。支持的语法种类也很多，js/vue/React/UniApp/Taro/微信小程序都支持，领导给我的工作是做一个抽奖转盘。我直接按照官方给的demo做了一个，丢给leader审核。如下图，看了领导的示范。领导看了后，表扬了一番。动画效果丝滑，转盘启动后有加减速效果。就这样，前端转盘功能完成了一大半，我开始考虑怎么作弊了。领导要的是这个转盘不是乱来的，而是我们指着哪里就弹到哪里。去研究了一下这个彩票插件的api文档，发现可以设置中间概率，有范围选项，后来才知道确实可行，100%非中间转盘就完成了像这样。发现问题后，高兴了几分钟后，渐渐发现不对劲，因为前端暴露了中奖概率配置。如果程序员很好奇，打开F12调试看看。这个表盘实际上是100%。一个拿不到奖的转盘不是大问题吗？虽然访问公司网站的程序员不多，可以说基本没有，但是为了以防万一，还是给领导反馈一下。领导听了我的反馈，表扬我很满意，说我做事有思想。。。。我省去了10000字的大饼，然后又把这个问题扔给我，让我着手解决。..解决问题其实在想到这个问题的时候，我就已经有了解决的办法，因为之前敲代码的时候，经常需要对json进行解析格式化，方便观察接口数据。之前在sojson网站上找到了一个前端js加密工具，后面好像推出了专门保护前端安全的jsjiemie.v6在线js加密站，提供了很多js接口加密方案。首先，我使用了crypto-js中的多重加密，并使用了与后端相同的加密方案来验证接口，然后使用jsjiami.v6对前端的所有js代码进行混淆加密。如下图，我的源码就不贴出来了，保密哈哈。这样就大功告成了，谁也查不出我们抽奖的小秘密哈哈哈
