我们采用前后端分离的方法来实现这个功能(暂不考虑二维码过期、该二维码登录过一次等复杂情况，只实现扫码登录功能)。

       首先梳理一下要准备的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

 

 

 

 

 

Logo
智屏生态联盟

智屏生态联盟致力于大屏生态发展，利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐

taro 引用本地图片展示

import { Image } from ‘@tarojs/components’<引用标签>constructor(){super()this.state={img:require(’./case.png’)}}…

avatar 智屏生态联盟

Weex

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。快速开始高性能Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。跨平台你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的...

avatar 智屏生态联盟

Taro写小程序总结

1.首先需要在『微信公众平台』注册帐号，我一直很困惑为啥，微信公众平台不能和微信开放平台整合，而且账号不能通用~https://mp.weixin.qq.com2.在微信公从平台里的->开发->服务器域名,可以配置小程序中可以访问的接口的域名3.在『成员管理』中可以添加开发者、体验者等成员。方便协作办工Taro的一些例子：1.转发在render中写&...

avatar 智屏生态联盟