为了迎中秋庆国庆，领导想趁这个机会通过微信平台弄个抽奖之类的活动借机推广一下公司产品，想法是分享我公司微信里面的产品页面后就可以进行抽奖。
思路
一开始参考其它的公众号，基本都是分享到朋友圈后，截图下来发给公众号，这样的方式显得档次太low了，还得专门弄个人在后台实时跟进，在我公司不可能实现的，最好还是可以实现分享后自动抽奖。
公司微信产品页面都是我写的，所以只要可能监听到分享后的事件，我就写代码实现了。
哈哈哈，后来让我找到了微信 JS-SDK 里面的获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
如下所示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接 imgUrl: '', // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); |
那我就可以在用户分享成功后， success 里让用户自动跳转到大转盘游戏了。
那这个分享事件解决了，就得想想这个大转盘游戏了，有两种方法：
- 用第三方平台的大转盘游戏，这个很容易找到，分享后就直接跳转到转盘游戏链接，不过首先想到的是别人可以直接把这个游戏页面转发给别人，别人也无需分享就可以直接抽奖了，这是致命的。
- 自己制作一个大转盘游戏，由于之前没弄过，也不知难度系数怎么样，不过最大的好处是代码可以自由发挥，想怎么验证就怎么验证。
最后思来想去，由于时间也比较紧，跟领导说了，给我一天的时间，如果制作不出大转盘游戏，就用第三方的平台。
实践
大转盘游戏页面
首先当然就是百度 输入大转盘源码进行搜索，研究了几个，发现并没有自己想象的那么难，难点就两个，一个是页面的转盘代码，一个是后台的概率算法，这些网上都有现成的，我需要的无非就是理解它，理解它，理解它！困难的事情说三篇！然后根据自己的需要进行修改。
找了几个大转盘游戏的html源码，比较满意的就是这个了
http://www.17sucai.com/preview/222076/2015-05-28/turnplate/index.html
其它的大转盘都是弄一张固定的图片当做转盘，这个是用canvas动态画奖品出来的，这样就可以根据我数据库奖品信息画出对应的奖品，显得档次比较高。
补充：后来发现这个大转盘在微信的浏览器上有严重的bug
如下面这两位朋友所写
http://bbs.csdn.net/topics/391044614?page=1
http://bbs.csdn.net/topics/391068827
就是在微信浏览器上，转盘转动时，有时转盘会遮到那个指针图片，我在电脑上任何一个浏览器都不会出现这个现象，就只有在微信里才会出现。如果不用 canvas 的话，用图片就不会。
这个 bug 我从中午试到晚上，一直调不出来原因，我都快放弃了。。最后洗了个澡回来，想一想，能不能把canvas转变成一张图片。
马上百度，真是万幸，canvas 有个 toDataURL 方法，这个方法太关键了，我把这个canvas 设置 display:none，然后放一个<img id=”img_disc” alt=”” />，然后等 canvas 画完后执行 $(“#img_disc”).prop(“src”,canvas.toDataURL())，然后一测试，完美~~~~~~成功了！不过很明显在微信上转动的速度比直接用 canvas 转动慢很多了，没那么流畅的，不过算了，先暂时这样吧。
php的概率算法
最经典就是这个了
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
private function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 foreach ($proArr as $key => $proCur) { $randNum = mt_rand(1, $proSum); if ($randNum <= $proCur) { $result = $key; break; } else { $proSum -= $proCur; } } unset ($proArr); return $result; } |
$proArr=array(0=>2,1=>3,2=>4);
键值是奖品的ID，值是奖品的概率，如果上面的这个数组的话，那么0就是九分之二，1是九分之三。
这两个都有了，那就来想想业务逻辑怎么写了。
业务逻辑
我是这么想的，在我的全部产品页面中注册这个微信分享事件，当分享成功后，在 success 事件里将当前分享的产品 Id 通过 ajax post 到服务器，服务器接收后，在数据库里新增一条分享日志记录，记录上面的产品 Id 并记录了分享用户微信 openid（用于以下的验证），新增后得到分享日志 Id，然后将这个分享日志 Id 返回到用户页面，用户页面接收到这个返回值后，就弹出一个获得抽奖的窗口，点击确认的话，就会跳转到大转盘游戏页面，并以 get 的方式带上刚才那个分享日志 Id 。
当进入这个大转盘页面时，我会判断 get 参数是否有分享日志 Id，如果没有，就会弹出提示窗口，让你去产品列表引导你分享，如果有，我后台会对这个分享日志 Id 进行验证，到分享日志表里查询 Id 值等于当前分享日志 Id 且 openid 值等于当前 用户微信openid ，如果查不到就提示分享错误，查到了就判断分享日志的分享时间跟现在的时间差，如果大于一天，就提示分享过期，引导用户请重新分享。
如果没异常的话，就可以抽奖了，点击转盘的抽奖按钮后，页面会将当前的分享日志 Id 也通过ajax post到服务器，服务器会再一次进行上面的验证步骤，防止用户做假，然后后台服务端会用上面提到的概率算法抽出奖品 Id 和页面奖品索引值（这个奖品索引值是指用户页面上，每个奖品在奖品数组中的索引），如果中奖则会在中奖的数据表中新增记录，并附上当前的用户微信 openid，然后返回奖品 Id 和 奖品索引值，页面根据相应的奖品索引值计算出转盘转到的角度，如果有中奖，就会弹出窗口让你填写寄送信息，信息跟把奖品 Id 当前用户微信 openid 会一起提交到服务器，后台会再一次验证跟刚才中奖数据表中新增的记录用户微信 openid是否一致，防止用户做假。
我表达能力有限，写得比较乱。
因为这个大转盘游戏是给公司做的，而且我技术水平一般，所以里面多次进行验证，怕万一哪里考虑不到，出错了。
完成
前前后后写了两三天吧，第一天把整体思路跟大体的抽奖程序写出来，领导也满意，后天就一点点的完善。
下面是实现的效果：
1、一开始你点击我这个大转盘游戏的链接，因为你是没分享产品打开大转盘的，所以游戏不能让你抽奖，得提示一下此次活动的规则，并引导你前往产品列表进行分享。如下图
2、前往产品列表后，也会弹出活动提示，如果用户觉得烦就可以点击不再提示
2、然后分享当前页面到朋友圈，此时分享的标题后面会带上此次活动的标题
3、分享后，会在页面上弹出抽奖的窗口，点击确认后跳转到抽奖页面
4、现在就可以正常抽奖了。
代码我不方便列出来，因为是给公司做的，我怕万一到时被厉害的黑客发现到漏洞的话，我就完了。。。
要是大家想试玩，可以在微信里面搜索金刚玻璃，关注后，输入抽奖，就会回复大转盘的图文消息了。