看到網上又不少微信企業號的搖一搖考勤，自己也想做一個，但查遍了微信企業號文檔，也沒有看到搖一搖的相關ＡＰＩ，本以為做不出來了，想不到再問了同事后，才知道其實很簡單，搖一搖不需要微信企業號的文檔，ＨＴＭＬ５就有，搖一搖其實就是相當于點擊了保存按鈕而已。
其實獲取地理位置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>
~~~
實現效果
****
