微信——H5实现微信摇一摇

来源：互联网发布：西班牙wifi破解软件编辑：程序博客网时间：2024/04/30 11:04

项目终于如约上线，但是在春节前又有一个新的活动要做，类似微信的摇一摇活动。也一直在做微信公众号的东西，但是要调用微信摇一摇的接口还是有些困难，因为只提供了摇一摇周边，附近的人以及一系列的红包页面，相对于我们的需求只需要摇一摇这个动作却是大相径庭。如果一味的扑在微信接口上，估计会死的太惨，换一种方式，真是海阔天空……

其实H5+JavaScript写出来的页面，通过获取手机的屏幕长和宽，以及添加声音等就可以实现摇一摇的效果……

第一步，实现手机摇动改变颜色

<!doctype html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>HTML5 手机摇一摇</title><script type="text/javascript">var color = new Array('#fff', '#ff0', '#f00', '#000', '#00f', '#0ff');if(window.DeviceMotionEvent) {var speed = 25;var x = y = z = lastX = lastY = lastZ = 0;window.addEventListener('devicemotion', function(){var acceleration =event.accelerationIncludingGravity;x = acceleration.x;y = acceleration.y;if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];}lastX = x;lastY = y;}, false);}</script></head><body>         手机摇一摇，改变屏幕颜色。</body></html>

主要是手机的DeviceMotionEvent事件

第二步，微信摇一摇手势

相对于第一步就是增加了摇一摇手势，改变了摇动事件。在摇一摇动作之后再添加自己想要的方法即可，无论是想要进入下一个自己做的页面还是触发一个Controller事件都可以。

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">    <title>摇一摇</title>    <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/shake.css">    <link rel="stylesheet" href="plug-in/liuliangbao/shake/css/myDialog.css">    <script type="text/javascript" src="plug-in/liuliangbao/shake/js/jquery.min.js"></script>    <script type="text/javascript" src="plug-in/liuliangbao/shake/js/howler.min.js"></script>    <script type="text/javascript" src="plug-in/liuliangbao/shake/js/fastclick.js"></script>    <script type="text/javascript" src="plug-in/liuliangbao/shake/js/myDialog.js"></script>    <script type="text/javascript">        var SHAKE_THRESHOLD = 1000;        var last_update = 0;        var last_time = 0;        var x;        var y;        var z;        var last_x;        var last_y;        var last_z;        var sound = new Howl({ urls: ['/shake/sound/shake_sound.mp3'] }).load();        var findsound = new Howl({ urls: ['/shake/sound/shake_match.mp3'] }).load();        var curTime;        var isShakeble = true;        function init() {            if (window.DeviceMotionEvent) {                window.addEventListener('devicemotion', deviceMotionHandler, false);            } else {                $("#cantshake").show();            }        }        function deviceMotionHandler(eventData) {            curTime = new Date().getTime();            var diffTime = curTime - last_update;            if (diffTime > 100) {                var acceleration = eventData.accelerationIncludingGravity;                last_update = curTime;                x = acceleration.x;                y = acceleration.y;                z = acceleration.z;                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;                if (speed > SHAKE_THRESHOLD && curTime - last_time > 1100 && $("#loading").attr('class') == "loading" && isShakeble) {                    shake();                }                last_x = x;                last_y = y;                last_z = z;            }        }        function shake() {            last_time = curTime;            $("#loading").attr('class','loading loading-show');            $("#shakeup").animate({ top: "10%" }, 700, function () {                $("#shakeup").animate({ top: "25%" }, 700, function () {                    $("#loading").attr('class','loading');                    findsound.play();                         //在此为摇动之后的事件，这里为调用ControllergoShakeResult方法                    window.location.href = "shakeController.do?goShakeResult&phoneNumber=${phoneNumber}&hdid=${hdid}&openid=${openid}";                });            });            $("#shakedown").animate({ top: "40%" }, 700, function () {                $("#shakedown").animate({ top: "25%" }, 700, function () {                });            });            sound.play();        }        //各种初始化        $(document).ready(function () {            Howler.iOSAutoEnable = false;            FastClick.attach(document.body);            init();        });    </script></head><body><table id="container">    <tbody>              <tr>              <td class="container" colspan="2">            <div id="shake">                <img src="plug-in/liuliangbao/shake/images/inner.png" class="inner">                <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_up" id="shakeup">                <img src="plug-in/liuliangbao/shake/images/shake.png" class="shake_down" id="shakedown">                  </div><div id="loading" class="loading"></div>                </td>    </tr>    <tr>        <td>            您今天还可以摇<input id="shakeCount" name="shakeCount" value="${leftcount}">次        </td>    </tr>    <tr>        <td>正确姿势：握紧手机，用力摇动3秒，苦练18年的麒麟臂终于派上用场了。</td>    </tr>        </tbody></table></body></html>

有时候真的可以换一种方法去实现自己想要的功能。附图：demo本来实现的效果是:

经过我的整容计划之后

1 0