你的位置:首页 > ASP.net教程

[ASP.net教程]微信摇一摇优惠券


前段时间,接到一个需求说要搞个摇一摇优惠券,效果如下:

                    图一                                                图二                                                图三                                                     图四                                                 图五

                                         

图一中

 1 <script type="text/javascript"> 2 //“摇一摇”的动作既“一定时间内设备了一定距离”,因此通过监听上一步获 3 //取到的x, y, z 值在一定时间范围内的变化率,即可进行设备是否有进行晃 4 //动的判断。而为了防止正常移动的误判,需要给该变化率设置一个合适的 5 //临界值。 6   var SHAKE_THRESHOLD = 1800; 7   var last_update = 0; 8   var x = y = z = last_x = last_y = last_z = 0; 9   var isPlayer = false;10 11 //在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装12 //了设备的运动传感器时间,通过改时间可以获取设备的运动状态、加速度13 //等数据(另还有deviceOrientation事件提供了设备角度、朝向等息)。14 //把监听事件绑定给 deviceMotionHandler15   if (window.DeviceMotionEvent) {16     window.addEventListener('devicemotion', deviceMotionHandler, false);17   } else {18     alert('本设备不支持devicemotion事件');19   }20 21 //获取设备加速度信息 accelerationIncludingGravity22   function deviceMotionHandler(eventData) {23 24     var acceleration = eventData.accelerationIncludingGravity;25     var curTime = new Date().getTime();26 //100毫秒进行一次位置判断,若前后x, y, z间的差值的绝对值和时间比率27 //超过了预设的阈值,则判断设备进行了摇晃操作。28     if ((curTime - last_update) > 100) {29 30       var diffTime = curTime - last_update;31       last_update = curTime;32       x = acceleration.x;33       y = acceleration.y;34       z = acceleration.z;35       var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 15000;36       var status = document.getElementById("status");37 38       if (speed > SHAKE_THRESHOLD && !isPlayer) {39 40         doResult();//摇玩之后,对摇出的结果作处理41 42       }43       last_x = x;44       last_y = y;45       last_z = z;46     }47 48   }49   var isactive = false; //参与50   function doResult() {51     if (isactive) return;52     isactive = true;53     isPlayer = true;54     //设置摇一摇的声音55     var media = document.getElementById("musicBox");56     media.setAttribute("src", '@Url.Content("~/Content/RedPacket/audio/shake.wav")');57     media.load();58     //设置摇玩结束的声音59     var audioEle = document.getElementById("endMp3");60     audioEle.setAttribute("src", '@Url.Content("~/Content/RedPacket/audio/end.mp3")');61     audioEle.load();62     63     //跳到控制器中作判断64     $.post('ShakeCouponsSubmit', {65       openid: '@ViewBag.openid',66       aid: '@ViewBag.aid',//摇一摇活动的id67       wid: '@ViewBag.wid'//该公众账号的id68     }, function (res) {69     //TODO:中奖结果通知70     //json返回 71     }, "json");72 73     media.play();74     setTimeout(function () {75       media.pause();76       audioEle.play();77     }, 2000);78 79     document.getElementById("result").className = "result";80     document.getElementById("hand").className = "hand hand-stop";81 82     setTimeout(function () {83       document.getElementById("mask").className = "mask mask-open";84       document.getElementById("result").className = "result result-show";85     }, 2000);86 87   }88 89   $(function () {90     //点击马上喊朋友也来摇,出现效果图五91     $('#shareBtn').click(function () {92       //TODO:分享跳转93     });94     //点击再来一次95     $('#againBtn').click(function () {96       window.location.reload();97     });98   });99 </script>

控制器中执行ShakeCouponsSubmit方法

 1 [HttpPost] 2     public JsonResult 摇一摇处理方法() 3     { 4     /////方法变量///// 5       //摇一摇活动id 6       //微信openid 7       //中奖结果信息 8     /////方法变量///// 9 10       /// 处理是否中奖11       /// hidStatus 状态为-1:不能抽奖,直接跳转到结束页面;12       /// 0:抽奖次数超过设置的最高次数;13       /// 1:还可以继续抽奖;14       /// 2:中奖了;15 16       if (判断今天是否超过了)17       {18         return Json(new { status = "0", errInfo = "每人只有" + dayMaxTimes.ToString() + "次机会!", over = "0", remaintimes = remainTimes });19       }20     if(中奖了){21         //TODO:往中奖用户的卡包插数据22         List<Senparc.Weixin.MP.Entities.Article> _article_list = new List<Senparc.Weixin.MP.Entities.Article>();23        _article_list.Add(new Senparc.Weixin.MP.Entities.Article()24         {25         Description = 描述,26         PicUrl = 图片链接,27         Url = 超链接,28         Title = 标题29         });30        //推送消息至微信端31        new WeChatUserDomain().SendNews(参数);32       }33     }34 35     /// <summary>36     /// 返回中奖序列号37     /// </summary>38     /// <param name="id"></param>39     /// <returns></returns>40     public string Get_snumber(int 活动id)41     {42       Random rd = new Random((int)DateTime.Now.Ticks);43       int radNum = rd.Next(0, 9);//从0到9里随机出一个值44 45       return "sn" + 活动id+ "_" + MyCommFun.ConvertDateTimeInt(DateTime.Now) + radNum;46     }

 由于某种原因,这里只是提供了一种思路,供参考。如需查看演示效果,可以关注公众号,进入微官网,点击营销活动,点击摇一摇进行试玩。