1、 ?首先我們的項目需要配置公眾號的安全域名，具體步驟是：先登錄微信公眾平臺進入“公眾號設置”的“功能設置”裏填寫“JS接口安全域名”。值得壹提的是，如果想微信不彈出以下這種提示的話，可以順便設置公眾號的業務域名
2、設置安全域名後我們可以接入? JSSDK ?，從而簡單的實現壹些較復雜的功能；
1、在需要調用JS接口的頁面引入如下JS文件，（支持/open/js/jweixin-1.2.0.js；
2、所有需要使用JS-SDK的頁面必須先註入配置信息，否則將無法調用（同壹個url僅需調用壹次，對於變化url的SPA的web app可在每 次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數 信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯壹標識
timestamp: , // 必填，生成簽名的時間戳
? nonceStr: '', // 必填，生成簽名的隨機串
? signature: '',// 必填，簽名，見附錄1
? jsApiList: [? getLocation ] // 必填，需要使用的JS接口列表我們這裏需要使用的是地理位置
? });
? 3、wx.ready(function(){
?// config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是壹個客戶端的異步操作，所以如 ?果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
wx.getLocation({
type: 'wgs84', // 默認為wgs84的gps坐標，如果要返回直接給 openLocation用的火星坐標，可傳入'gcj02'
success: function (res) {
var latitude = res.latitude; // 緯度，浮點數，範圍為90 ~ -90
var longitude = res.longitude; // 經度，浮點數，範圍為180 ~-180。
var speed = res.speed; // 速度，以米/每秒計
var accuracy = res.accuracy; // 位置精度
?}
?});
});
至此，我們的準備工作基本已經做完，getLocation方法會返回用戶當前位置的經緯度以及壹些其他的參數；下面我們來計算用戶的當前位置和目標位置距離；
3、我們可以在網上輕易的找到這種根據兩點經緯度計算距離的方式,下面例舉壹個親測誤差較小 ? 的demo:
function getFlatternDistance(lat1,lng1,lat2,lng2){
var f = getRad((lat1 + lat2)/2);
var g = getRad((lat1 - lat2)/2);
var l = getRad((lng1 - lng2)/2);
?var sg = Math.sin(g);
?var sl = Math.sin(l);
?var sf = Math.sin(f);
?vars,c,w,r,d,h1,h2;
?var a = EARTH_RADIUS;
?var fl =1/298.257;
?sg = sg*sg;
?sl = sl*sl;
?sf = sf*sf;s= sg*(1-sl) + (1-sf)*sl;
? c = (1-sg)*(1-sl) + sf*sl;
? w = Math.atan(Math.sqrt(s/c));
? r = Math.sqrt(s*c)/w;
? d = 2*w*a;
? h1 = (3*r -1)/2/c;
? h2 = (3*r+1)/2/s;
?returnd*(1+ fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
}
我們只需要簡單的將兩個點的經緯度作為參數傳入參數內即可；
但是，騰訊給我們提供了更簡單的方法（使用此方法的前提是已經當前頁面已經接入騰訊地圖）：
? 1、var e = new qq.maps.LatLng(latitude,longitude);//括號裏是 目標打卡點的緯度經度
? 2、var f= ? new qq.maps.LatLng(latitude,longitude);//用戶當前位置的緯度經度；
? 3 var? distance = ?parseInt(qq.maps.geometry.spherical.computeDistanceBetween(e, f)) //此時此刻 計算出的? distance ，即為兩點間的 直線距離
? 4、我們假設我們允許在目標打卡點五十米以內打卡，
? if( distance <=50){
? alert("打卡成功了")
? }else if( distance >50){
?alert（"距離打卡點超過五十米，打卡失敗"）
?}else{
?alert("出錯了")
?}
至此，壹個簡單的考勤系統即算完成了，第壹次寫，語句可能啰嗦繁雜了些，我們可以來看壹下最終的效果圖：