看到网上又不少微信企业号的摇一摇考勤，自己也想做一个，但查遍了微信企业号文档，也没有看到摇一摇的相关ＡＰＩ，本以为做不出来了，想不到再问了同事后，才知道其实很简单，摇一摇不需要微信企业号的文档，ＨＴＭＬ５就有，摇一摇其实就是相当于点击了保存按钮而已。
其实获取地理位置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>
实现效果
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/app/5299.html