我们采用前后端分离的方法来实现这个功能(暂不考虑二维码过期、该二维码登录过一次等复杂情况，只实现扫码登录功能)。
首先梳理一下要准备的PHP接口，一共有3个：
让前端页获取唯一的QRUUID(唯一字符串就可以)生成一个二维码用的接口。
APP端扫描到QRUUID后去请求的接口，功能是把用户和这个QRUUID绑定(可以传User_id或者token什么的，具体看需求)。
前端在获取到第一个的接口返回的QRUUID后去轮询请求的接口，功能是查询这个QRUUID是不是被APP端扫描并绑定。
然后是HTML页的主要实现：
其实就是Ajax请求PHP接口获得QRUUID然后生成二维码，接着使用setInterval() 方法去请求第三个PHP接口。(前端生成二维码的开放API：http://www.topscan.com/pingtai/)
简易数据库表：
DROP TABLE IF EXISTS `qrcodelogin`;
CREATE TABLE `qrcodelogin` (`id` int(11) NOT NULL AUTO_INCREMENT,`qruuid` varchar(15) NOT NULL DEFAULT '',`user_id` int(11) DEFAULT NULL,`user_token` varchar(255) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB;SET FOREIGN_KEY_CHECKS = 1;
先放上PHP的3个接口的代码：
public function qrcodeLogin(){//生成随机的UUID 用于二维码显示的内容 和 绑定用$qruuid = substr(md5(uniqid(mt_rand(), true)), 0, 15);//生成uuid$data['qruuid'] = $qruuid;$result = DB::table('qrcodelogin')->insert($data);$arr = ['code'=>1, 'msg' => '生成qruuid成功','data'=>$qruuid];return json_encode($arr);}public function bindQruuid(){/*** bindqruuid* App端扫描二维码获得qruuid以后* 然后请求这个接口 二维码的qruuid和用户绑定并把用户信息传入* (token或者user_info什么的 具体看需求)** User: caohan*/$qruuid = $_POST['qruuid'];$user_id = $_POST['user_id'];$qrcodeLogin = new Qrcode_login();$result = $qrcodeLogin->updateMessage($qruuid,$user_id);$arr = ['code' => 1, 'msg' => '绑定成功'];return json_encode($arr);}public function checkQruuid(){/*** checkqruuid* 用于前端页轮询 查询该qruuid是否被绑定** User: caohan*/$qruuid = $_GET['qruuid'];$qrcodeLogin = new Qrcode_login();$result = $qrcodeLogin->sel($qruuid);$m3_result = new M3Result();if (!is_null($result['user_id'])) {$m3_result->status = 1;$m3_result->message = '登陆成功';$m3_result->data = $result;}else{$m3_result->status = 500;$m3_result->message = 'qruuid暂时未被绑定';$m3_result->data = $qruuid;}return $m3_result->toJson();}
HTML页的代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>二维码扫描</title><link rel="stylesheet" type="text/css" href="/lib/my.css">
</head><body>
<div><div class="qr-btn" node-type="qr-btn">扫一扫<input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码" /></div>
</div><div class="result-qrcode">
</div>
<script src="/lib/zepto.js"></script>
<script src="/lib/qrcode.lib.min.js"></script>
<script src="/lib/qrcode.js"></script>
<script>//初始化扫描二维码按钮，传入自定义的 node-type 属性$(function() {Qrcode.init($('[node-type=qr-btn]'));});
</script>
</body></html>css,js代码下载链接：https://pan.baidu.com/s/1-TeW4EG8YwOvTB2elnKV3w
提取码：1030
