我又来了，一口气突然写了这么多，主要就是想记录下来就好了。。这次我给大家讲解一下我实现的签到功能哦。。。这样的网上签到我也只是作为一种有趣的方式来做而已的，如果想逃课的人，那么还是无法阻挡的。。。。
关于微信接口的地理位置的功能
一：老师开启签到功能
先贴代码（这里比较多的）
<?php
session_start();
$getopenid=$_SERVER['QUERY_STRING'];//获取openid
if($getopenid===null || $getopenid==="")
$getopenid=$_SESSION['openid'];
$_SESSION['openid']=$getopenid;
if($_SESSION['account']==="true")
header("Location: http://hnucsapp.applinzi.com/account.php");
$title = '签到';
include 'header.php';
require_once "jssdk.php";
$jssdk = new JSSDK("wx5494debd28f66822", "7f56c3890a81f5d21b60582839ca7df2");
$signPackage = $jssdk->GetSignPackage();
?>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: false,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'checkJsApi',
'openLocation',
'getLocation'
]
});
wx.ready(function () {
// 在这里调用 API
wx.checkJsApi({
jsApiList: [
'getLocation'
],
success: function (res) {
// alert(JSON.stringify(res));
// alert(JSON.stringify(res.checkResult.getLocation));
if (res.checkResult.getLocation == false) {
alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
return;
}
}
});
wx.getLocation({
success: function (res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
var speed = res.speed; // 速度，以米/每秒计
var accuracy = res.accuracy; // 位置精度
document.getElementById("latitude").value=latitude;
document.getElementById("longitude").value=longitude;
var now=new Date();
document.getElementById("time").value=now.getHours()+":"+now.getMinutes();
},
cancel: function (res) {
alert('用户拒绝授权获取地理位置');
}
});
});
</script>
<body>
<br>
<br>
<center>
<div>请输入本节课应到人数</div>
<div>
<form name="form" id="form" method="post" action="/server/views/signin.php" >
<input type="number" name="num" id="num" value="200">
<input type="text" name="class" id="class" value="院楼330">
<input type="hidden" name="latitude" id="latitude" value="">
<input type="hidden" name="longitude" id="longitude" value="">
<input type="hidden" name="openid" id="openid" value="<?php echo $getopenid;?>">
<input type="hidden" name="time" id="time" value="">
<input type="hidden" name= "checkid" id="checkid" value="">
<br>
<br>
<input type="button" name="starsignin" value="开启签到" οnclick="checkopen()">
</form>
<br>
<br>
</div>
</center>
</body>
<script type="text/javascript">
function checkopen(){
if(document.getElementById("time").value===""){
alert("地理位置信息读取中，请稍后。。。若反复尝试都未成功，请重启微信。");
return false;
}
else{
document.getElementById("checkid").value="o";
document.form.submit();
alert("签到开启成功。");
return true;
}
}
</script>
对应的界面效果：
在代码中，我 将所有的代码都贴出来了，这样的话就能获取相应的地理位置了，这是微信的jssdk中的接口方法，大家可以多看看这个里面的东西还有很多有趣的，在开发这个地理位置的时候，自己也花费了挺久的时间的，总算是出来了。当老师点击开始签到的时候，就会跳转到一个能实时更新当前签到课堂的人数和签到的学生信息了。那个界面和逻辑的话，就是对数据库进行查询显示就好了，所以这没啥好说的了。主要就是地理位置的获取，所以大家多看看代码.
二：学生进行签到
这个学生签到一样，首先都是要获取自己的地理位置就是经度和纬度，这和上面的老师的方法差不多，就是在显示的界面进行了不同的html5代码和js的代码了。而且这里需要添加一个动态的显示当前有多少个老师开启了签到，即学生能有多少个能签到的列表，在这里我是运用一个动态的生成单选控件来现实的，当然大家可以根据需求进行不同的动态控件的生成。
步骤：
1：首先从签到老师名单的数据库中寻找符合当前签到的情况列表
2：判断学生是否重复签到
否，则进行下一步
是，则提示不能进行重复签到
3：判断学生是否属于在签到范围之内
在的话，则签到成功
否则，提示不在签到范围，无法签到
4：当签到成功，则在学生选择的对应的老师的数据库中的当前人数字段+1
5：将学生的个人信息及其对应的签到老师的信息插入到签到表中
动态生成单选控件代码：
PHP还是很强大的，这样的话就能将html5的代码进行封装，然后进行显示，真的好棒。怪不得，最近PHP开发网页如此火，还是有点道理的。
对于判断签到的问题，就是通过从数据库中拿到学生选择签到的老师的经度和纬度然后和学生自己的经度和纬度进行比较，其中会存在着误差，这样大家就根据需要进行控制范围就好了，当然不能精确到1米这么近距离了，误差还是有的，而且大概0.1度就是实际的10000米，所以大家根据需求进行设置了。我这里是这样简单的判断的：
这里就是个大概的位置判断，如果需要纬度经度换成很精确的距离的话，可以再运用第三方的接口来进行转换了，我这里就不多说了（因为我没实现这么精确，我的大概范围就够了！）
这上面就完成了地理位置的签到功能了，其中主要的就是运用jssdk接口中的方法来实现获取地理位置，我觉得这个还是很有用的，而且我打算进一步的开发一个功能，就是实现约伴学习。
主要想法就是说：学生可以开启地理位置来寻找一定范围中的其他的小伙伴，然后再通过选择进入对话框的显示，这样可以实现学习的集体效果。。其实比如微信中的附近的人，QQ中的附近的人等等软件中这样的效果都是可以自己实现的。。关键的原理都是一样，就看自己如何去运用了。。。
这是自己目前的进度，在自己有新的功能开发后，就继续记录着，加油，，，小蜗牛不会放弃，会一直向前爬！！
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
