学习历程（一）第一个微信打卡器
来源：互联网 发布：mac虚拟机怎么退出全屏 编辑：程序博客网 时间：2024/05/21 02:21
第一个微信打卡系统，我是利用微信的网页授权获微信的个人信息，然后后台我是用ThinkPhp3.2.3将记录插入数据库，由于我刚入门，花了3天时间完成了这个项目，
所以前端界面我还没来得及做优化。
以下我会一步一步的将我这个项目分析，这个项目具体分两个需要思考的地方，如何获取用户信息，还有后台对保存的数据如何处理。
一，数据库结构
trueName是方便用户日后查询的注册时填入的姓名。
二，实现获取微信的用户信息
首先，你必须在微信公众平台创建一个具有高级接口权限的公众号，这里推荐用微信在微信公众号开发所给的测试号 网址为 点击打开链接
图1
这里你还需要配置接口信息，如果对这个概念不熟悉的，点击消息接口使用指南
在这里点击接入指南，往下拉下载PHP示例代码，如下图这个地方
然后你打开文件查看这里面Token的值是什么，一般默认为weixin，然后回到图1的接口配置信息将你在服务器放置这个php事例文件的地方的url写入，还有Token。
到这个地方，将你服务器的ip地址填入也可以填域名，这里建议填域名 不然到时候在手机跳转他会请求授权跳转，然后对你的服务器内容会有误差
然后在TP的控制器中写如下代码，下面代码主要实现
- 1 第一步：用户同意授权，获取code
- 2 第二步：通过code换取网页授权access_token
- 3 第三步：刷新access_token（如果需要）
- 4 第四步：拉取用户信息(需scope为 snsapi_userinfo)
public function wxLink(){ $code=$_GET['code']; $url ="https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx098d5dd1d94cace9&secret=21e212d51bc4f7321771dc681f89737c&code=".$code."&grant_type=authorization_code"; $openidarr = json_decode($this->gettoken($url),true); $token = $openidarr['access_token']; $openid= $openidarr['openid']; $infourl="https://api.weixin.qq.com/sns/userinfo?access_token=".$token."&openid=".$openid."&lang=zh_CN"; $demo = json_decode($this->gettoken($infourl),true); //print_r($demo); $username= $demo['nickname']; //echo $username; return $username; //获取微信昵称名字 } public function gettoken($url){ //获取token $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch,CURLOPT_USERAGENT,'Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36');//设置用户代理 curl_setopt($ch, CURLOPT_ENCODING, 'gzip'); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); $output = curl_exec($ch); curl_close($ch); return $output;}这边我是采取snsapi_userinfo的参数，这个方法开发者文档中有详细说明，这个参数不单止能获取openid还可以获取微信昵称，所在城市，微信头像之类的信息。个人觉得以上两段代码是这个小项目的核心操作。接下来的事情就完全和微信这块分离了。
三，业务方面的操作
我在控制器中用test函数作为入口文件，大家可以自行命名规定，
1、入口判断
public function test(){ $name = $this->wxLink(); $user=M('user'); $data1['username']=$name; $_SESSION['sessName']=$name; $data['timedown']='0000-00-00 00:00:00'; if($user->where($data)->select()==null){ if($user->where($data1)->select()==null){ // echo '1'; $this->success('新用户','http://cslg.iperson.cn/090214103/wxdemo/?m=Home&c=Index&a=demo3',2); }else{ // echo '2'; $this->success('欢迎','http://cslg.iperson.cn/090214103/wxdemo/?m=Home&c=Index&a=demo',2); } }else{ $this->success('幸苦了','http://cslg.iperson.cn/090214103/wxdemo/?m=Home&c=Index&a=demo2',2); } } 这段代码是作为接口函数，判断用户类型，我这里有三类用户，第一类是数据库不存在的，标为新用户，跳转到新用户界面，为新员工的状态。第二类为数据库存在的用户，但这类用户是在数据表中timedown为空的，还没上班的状态。第三类为timeup有值，timedown值为空，说明在上班的这种状态中，然后直接跳转到查询界面，这边可以查询你最近上下班时间，还有统计时间。
2、上班后台操作
public function wxAction(){ $input1=I('post.up'); if($input1=='Workup'){ $user = M('user'); $condiction['username']=$_SESSION['sessName']; $e = $user->field('trueName')->where($condiction)->find(); $e =$e['truename']; $data['trueName']=$e; $data['timeup']=date('Y-m-d H:i:s'); $value =$_SESSION['sessName']; $data['username']=$value; $user->add($data); echo 'ok'; }else{ echo'ERROR'; } } 对前端接收的表单进行判断，对应上就做数据插入，这里$_SESSION['sessName']是后台的缓存，相当于cookies，主要是做用户登录，保存用户信息的作用的，在入口文件时就要接受该值，这一边有一点需要注意的是，插入前你还需要找到昵称对应的真实注册姓名，然后一同插入新的数据行中，不然的话你会发现trueName的值会是NULL这样你后面的查询就不能找出完整的数据，因为查询工作是基于trueName来进行查询数据库的。3、下班后台操作
public function wxAction2(){ $input2=I('post.down'); if($input2=='我要下班'){ $user1=M('user'); //$value = Session::get('sessName'); $condition['username']= $_SESSION['sessName']; $condition['timedown']='0000-00-00 00:00:00'; $data['timedown']=date('Y-m-d H:i:s'); $datedown = $data['timedown']; //echo $datedown."<br/>"; //$data['timesum'] = $datadown-$dataup; $timeup = $user1->field('timeup')->where($condition)->select(); $timeup = $timeup[0]['timeup']; //echo $timeup.'<br/>'; $zoreup =strtotime($timeup); $zoredown =strtotime ($datedown); $timesum = $zoredown-$zoreup; $data['timesum']=$timesum; $user1->where($condition)->data($data)->save(); $this->display('selectD'); } else{ echo 'xxxxxxx'; } }下班操作主要就是把下班时间和在岗时间统计出来，插入数据库。这边是思路是先查找出timedown为初值的行，然后获取当前时间，计算时间差，插入数据库。需要注意的地方是在你查找timedown为初值查询出来的数据是以数组方式查询出来的，所以你这里就应该想方法变成字符串才可以正常的插入到数据库（代码中写的挺清楚的），还有一点的是在计算时间差时需要借助php一个函数strtotime，这个和是专门算时间差的函数，其他的就没什么问题了。
4、新用户后台操作
public function wxAction3(){ $inputName = I('post.name1'); $user =M('user'); $data['trueName']=$inputName; $data['username']=$_SESSION['sessName']; $data['timeup']=date('Y-m-d H:i:s'); $user->add($data); echo $_SESSION['sessName']; } 这一块我是直接注册和上班结合一起，其实严格来说这不算注册，只是记录新用户的用户名以便于日后在查询模块方便查询，因为有些微信昵称不好打出来，当然这一块完全可以忽略。
5、查询模块后台操作
public function selectTest(){ $user= M('user'); $inputname=I('get.iname'); $data['trueName']= $inputname; $d=$user->where($data)->select(); echo json_encode($d); }查询是根据前端提交的表单信息，查询相应的数据库，因为我前端是利用ajax打印数据，所以后台这里我把数组转换成json数据。
6、前端ajax的一个请求控制器，
是把用户总的在岗时间传给前段，这里的单位是秒，我没有过多的去转化成其他单位方式，如果有需要转化的可以考虑下求模算法实现这里的功能
public function worktime(){ $user=M('user'); $inputname=I('get.iname'); //$inputname='cqj'; $data['username']=$inputname; $sum=$user->where($data)->sum('timesum'); echo json_encode($sum); //echo json_ 四，前端相关代码
1、打卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><script type="text/javascript">function ajax(){}</script><style type="text/css"> .div{position:absolute; width:500px; height:500px; top:50%; left:50%; margin-left:-250px; height:-130px; z-index:1000; border:2px solid red }</style><title>无标题文档</title></head><body bgcolor="#FF9933"> <div class="div"> <p><center> <form action="http://cslg.iperson.cn/090214103/wxdemo/?m=Home&c=Index&a=wxAction" method="post"> <input type="submit" name="up" value="Workup"/> </form> </center></p> <center><p></p></center> </div></body></html>2、新用户登记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><form action="http://cslg.iperson.cn/090214103/wxdemo/?m=Home&c=Index&a=wxAction3" method="post"> xingming:<input type="text" name="name1" value=""/> <input type="submit" value="打卡" /> </form></body></html>
3、下班
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><script type="text/javascript">function ajax(){}</script><style type="text/css"> .div{position:absolute; width:500px; height:500px; top:50%; left:50%; margin-left:-250px; height:-130px; z-index:1000; border:2px solid red }</style><title>无标题文档</title></head><body bgcolor="#FF9933"> <div class="div"> <p><center> <form action="http://cslg.iperson.cn/090214103/wxdemo/?m=Home&c=Index&a=wxAction2" method="post"> <input type="submit" name="down" value="Workdown"/> </form> </center></p> <center><p></p></center> </div></body></html>4、查询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script type="text/javascript"> function selectAjax(){ $ .get("http://cslg.iperson.cn/090214103/wxdemo/?m=Home&c=Index&a=selectTest",{iname:$('#iname').val()}, function(data){ var data = eval("("+data+")"); var h =''; for(var i =0;i<data.length;i++) { h=h+"<tr><td>"+data[i].username+"</td><td>"+data[i].timeup+"</td><td>"+data[i].timedown+"</td><tr>"; } $('#target').html(h); }); $ .get("http://cslg.iperson.cn/090214103/wxdemo/?m=Home&c=Index&a=worktime",{iname:$('#iname').val()},function(data1){ var data1 = eval("("+data1+")"); $('#info2').html(data1); }); } function infoTime(){ } </script> <style type="text/css"> .t1{margin: 0 auto} .t2{margin-left: 500px; margin-top: 200px } h2{padding-left:60px} </style></head><body> <div class="t2"> <h2>查询系统</h2> <p>请输入你的微信昵称<input type="text" id="iname" /> <button onclick="selectAjax();">Sumbit</button></p> </div> <CENTER> <span class="span" id='info2'></span> </CENTER> <table width="200px" border="1" class="t1"> <tr><td>UserName</td> <td>TimeUp</td> <td>TimeDown</td></tr> <table width="200px" border="1" class="t1" id="target"></table> </table></form></body></html>五，总结
在这个小项目中，我主要的问题在于如何获取用户信息，在我前面的过程中讲的挺详细的这里就不多重复。还有的是在考虑业务需求时，前期没有过多的规划，导致我写的代码很混乱，一些字段的命名还是不够严谨，这里也希望大家包容，在做前段和后台的交互时，这里可能是微信方面相关的问题吧，导致get表单提交方式失败，只能用post，我具体原因没有过多的研究，希望各位有这个经验的给点意见，最后这是我第一次写的博文，单纯的想记录一下大学所学的，同时对这方面感兴趣的朋友给点帮助。如果有不足的地方，错误的地方请大家指出，我必虚心请教，有需要源代码的，可以留下邮箱 。谢谢各位。
2 0
- 学习历程（一）第一个微信打卡器
- Shader 学习历程（一）——第一个shader
- wso2esb学习历程（一）
- wso2esb学习历程（一）
- Mysql学习历程（一）
- openwrt学习历程（一）
- Gradle学习历程（一）
- asp.net ajax学习历程（一）
- 技术学习的历程（一）入门
- java语言学习历程小结（一）
- Android 学习历程摘要（一）
- TI CC2650 学习历程（一）
- 记录java学习的历程（一）
- PBC library学习历程（一）
- 图论学习历程（一）
- 学习历程—程序设计基础（一）
- 学习sql历程一
- 学习历程记录一
- SSIS数据转换器及字符转换器使用
- excel如何发布PDF
- 陌陌技术保障部总监张明强：故障与高可用
- Node.js微信开发-1
- "\u00A0"空格替换
- 学习历程（一）第一个微信打卡器
- Convert a Number to Hexadecimal
- 前端开发日记之点击悬浮框之外的地方隐藏悬浮框
- 系统设计时关于性能问题处理的几点心得
- opencv图像读取
- 每一个梦想都要让它长上翅膀
- listview中item的上移、下移和删除
- PHP 和MySQL Web开发
- gdb调试命令
