分享一款巨好用的抽奖插件，并教你如何用jsjiami来保护自己的前端代码

故事背景

前段时间在公司正坐着划水，领导冷不丁从背后啪的一下丢给我了一个需求，公司官网最近要搞活动，需要一做一个大转盘抽奖，必须要有内幕，我说中啥就中啥。

然后我就开始构思如何实现这个功能，我职位是后端，又给我丢这种前端活儿。。。。。。

初步思考

丢给我的第一时间，我的想法是这样的，画几个圆盘图片，然后定时轮训播放达到看起来像指针在抽奖的效果。

类似于这样，作者手画图莫嫌弃。

做完后给领导过了一眼，当场差点要拿板凳砸我。于是我默默转换思路，试图用css3的来绘制转盘以及实现指针的转动效果，这样的话可以让奖品动态变化，看起来也更丝滑。接下来是漫长的自我学习css3相关知识的时间…

新的发现

然后在学习css3相关知识的途中，看到了某作者推荐的一个抽奖插件，好像是作者本人在推荐哈哈。

插件的名字叫 lucky-canvas 抽奖插件 我点进去一看，发现抽奖方式种类众多，有大转盘、九宫格、老虎机。

支持语法类型也多，js/vue/React/UniApp/Taro/微信小程序 都支持，领导丢给我的活儿是做抽奖大转盘。我直接按照官方给的demo做了一个出来，丢给领导过目。如下图所示

然后我看领导一通演示，领导看过之后直夸好，动画效果丝滑，转盘启动结束还有加速放慢效果。这样前端的转盘功能就完成了一大半了

开始思考如何作弊

领导想要这个转盘不是随机的，而是我们指哪打哪。我去研究了一下这个抽奖插件的api文档，发现中间概率是可以设置的，有一个range选项，然后实现了一下确实可行，百分百不中间的转盘就这么完成啦。

发现问题

在做完之后，开心了大约几分钟后，我逐渐意识到不对，因为这个中奖概率配置是暴露在前端的，如果某程序员好奇心重，打开F12调试一看，这个转盘其实是百分百不会中奖的转盘，那岂不是会出大问题？虽然我们访问公司网站的程序员并不多，可以说基本没有，但是为了以防万一，我还是给领导反馈这个问题，领导听了我的反馈后，十分满意的夸赞了我一番，说我做事情考虑周全之类的…省略一万字的饼，然后再次将这个难题丢给了我让我着手解决。。。

解决问题

其实在我想到这个问题的时候，我已经有了解决方案，因为之前敲代码的时候，免不了经常需要解析格式化json，方便观察接口数据。我在sojson网站里之前发现过一个前端js加密的工具，后边好像还推出过一个jsjiemie.v6的专门保护前端安全的在线js加密站，提供了很多js接口加密方案。

首先我使用了crypto-js中的多重加密，和后端使用同一个加密方案验证接口用，然后使用jsjiami.v6将前端所有js代码混淆加密。如下图操作，我的源码就不贴了，机密哈哈。

在这里插入图片描述

这样就大功告成啦，谁也发现不了我们抽奖的小秘密了哈哈哈