微信企业号开发:微信考勤摇一摇考勤

看到网上又不好微信企业号的摇一摇考勤,自己也想做一个,但查遍了微信企业号文档,也没有看到摇一摇的相关API,本以为做不出来了,想不到再问了同事后,才知道其实很简单,摇一摇不需要微信企业号的文档,HTML5就有,摇一摇其实就是相当于点击了保存按钮而已。

其实获取地理位置HTML5也支持。

HTML5 - 使用地理定位


<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

摇一摇的核心代码:

/需要判断浏览器是否支持  
             if (window.DeviceMotionEvent) {
                 window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);
             } else {
                 $("#shake").html(‘您的手机现在还不支持摇一摇功能。‘);
             }
			  function deviceMotionHandler(eventData) {
             var acceleration = eventData.accelerationIncludingGravity;
             var curTime = new Date().getTime(); //获取当前时间戳
             var diffTime = curTime - last_update;
             if (diffTime > 100) {
                 last_update = curTime; //记录上一次摇动的时间
                 x = acceleration.x; //获取加速度X方向
                 y = acceleration.y; //获取加速度Y方向
                 z = acceleration.z; //获取加速度垂直方向
                 var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; //计算阈值
                 if (speed > SHAKE_THRESHOLD) {
                     btnSave();
                 }
             }
             //记录上一次加速度
             last_x = x;
             last_y = y;
             last_z = z;
         }

完整的摇一摇考勤代码:

<!doctype html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>考勤打卡</title>
    <script src="http://api.map.baidu.com/components?ak=1IYR&v=1.0"></script>
      <link rel="stylesheet" href="../assets/css/amazeui.min.css">
  <link rel="stylesheet" href="../assets/css/app.css">
    <script src="../assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="../assets/js/amazeui.min.js" type="text/javascript"></script>
    <script src="../assets/js/amazeui.widgets.helper.min.js" type="text/javascript"></script>
     <script  type="text/javascript">
         var SHAKE_THRESHOLD = 3000; //定义一个摇动的阈值
         var last_update = new Date().getTime(); //定义一个变量记录上一次摇动的时间
         var x = y = z = last_x = last_y = last_z = 0; //定义x、y、z记录三个轴的数据以及上一次触发的时间
         $(document).ready(function () {
             $("#btnSave").click(function (e) {    //     绑定保存按钮 
                 btnSave();
             })
             //需要判断浏览器是否支持  
             if (window.DeviceMotionEvent) {
                 window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);
             } else {
                 $("#shake").html(‘您的手机现在还不支持摇一摇功能。‘);
             }
             var Name = $("#Name").val();
             if (!Name) {//没有session
                 $("#session").show();
             }
         });
         function deviceMotionHandler(eventData) {
             var acceleration = eventData.accelerationIncludingGravity;
             var curTime = new Date().getTime(); //获取当前时间戳
             var diffTime = curTime - last_update;
             if (diffTime > 100) {
                 last_update = curTime; //记录上一次摇动的时间
                 x = acceleration.x; //获取加速度X方向
                 y = acceleration.y; //获取加速度Y方向
                 z = acceleration.z; //获取加速度垂直方向
                 var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; //计算阈值
                 if (speed > SHAKE_THRESHOLD) {
                     btnSave();
                 }
             }
             //记录上一次加速度
             last_x = x;
             last_y = y;
             last_z = z;
         }
         function btnSave() {
        var formId = "form";
        var isOk = Checkform(); //验证form
        if (isOk == false) {
            return;
        }
        $.ajax({ type: "post",
            url: "KaoQinAjax.ashx?OperationType=kaoqin",
            data: $(formId).serialize(),
            success: function (obj) {            
                if (obj.IsSuccess == true) {
                    alertInfo(obj.Msg);
                    window.location = "KaoQinList.aspx";                 
                }
                else {
                    alertInfo(obj.Msg);               
                }
            }
        });
    }
    function Checkform() {
        var address = $("#address").val();
        if (!address) {
            alertInfo("地理位置为空,请开打GPS,刷新所在位置");
            return false;
        }
        return true;
    }
    function alertInfo(text) {
        alert(text);
    }
        </script>
</head>
<body>
    <form id="form1" runat="server"  class="am-form" >
      <fieldset>
      <legend>考勤打卡</legend>  
    <input type="hidden" id="Name"  name="Name" value="<%=Name%>" /> 
 <div class="am-form-group">
      <label for="doc-ta-1">所在位置 </label>   
      <p>
      <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>
      <input type="hidden" id="address"  name="address"/>
       <input type="hidden" id="lng"  name="lng"/>
        <input type="hidden" id="lat"  name="lat"/>
      </p>
    </div>
        
<script>   
        // 先获取元素
        var lbsGeo = document.getElementById(‘geo‘);
        //监听定位失败事件 geofail	
        lbsGeo.addEventListener("geofail", function (evt) {
            alert("地理位置为空,请开打GPS,刷新所在位置");
        });
        //监听定位成功事件 geosuccess
        lbsGeo.addEventListener("geosuccess", function (evt) {
            var address = evt.detail.address;
            var coords = evt.detail.coords;
            var x = coords.lng;
            var y = coords.lat;
            $("#address").val(address);
            $("#lng").val(x);
            $("#lat").val(y);
        });

</script>  
     <div id="shake" style="font-size: 14px; margin: 10px; line-height: 35px;"></div>    
     <div id="session" style="font-size: 14px; margin: 10px; line-height: 35px;display:none">请关闭后,重新打开</div>   
     <button type="button" class="am-btn am-btn-primary am-btn-block" id="btnSave">不能摇一摇点击</button>
     </fieldset>
    </form>
</body>
</html>

实现效果

微信企业号开发:微信考勤摇一摇考勤


版权声明:本文为博主原创文章,未经博主允许不得转载。

微信企业号开发:微信考勤摇一摇考勤

上一篇:Android调用微信登陆、分享、支付


下一篇:JS校验手机号 座机 邮箱 微信号