企业微信使用扫一扫案例(含代码和具体步骤)

需求:使用企业微信进行扫码装车。

难点:如何调起企业微信扫一扫功能

实现步骤如下

1:注册企业微信,成为管理员,得到CORPID(企业ID,每个企业微信都有一个,企业下的所有应用都是同一个)和CORPSECRET(应用Secret,每个应用都有,各不相同)

企业ID所在位置如下图

应用Secret位置如下图,如果没有应用先创建应用(废话)

3,开始配置扫码核心代码文件,单独一个php文件叫qy-weixin.php。就当接口文件吧

<?php
// 签名公司效验地址 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
// 方法1 get_access_token() 获取 access_token
// 方法2 get_jsapi_ticket() 获取 jsapi_ticket
// 方法3 fen_xaing_config($url) 获取js分享配置文件,需要传入分享的地址(#号以前的)
class WeiXingInit
{

    public $CORPID = 'wwc1f9******40';//这里填企业ID
    public $CORPSECRET = 'vDX_a5********L8w';//这里是应用Secret

    // access_token 存储文件 频繁刷新access_token会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存access_token
    public $fileName_access = 'access_token_xiaolong.txt';
    public $fileName_sing = 'sing_xiaolong.txt';
    // jsapi_ticket 存储文件 频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket
    public $fileName_jsapi_ticket = 'jsapi_ticket_xl.txt';

    public $debug = false;

    // 获取 access_token
    public function get_access_token()
    {
        $data = [];

        if (is_file($this->fileName_access)) {

            // 验证是否过期
            $time = time();
            $data = json_decode(file_get_contents($this->fileName_access), true);

            if (($time - $data['time']) > ($data['expires_in'] - 100)) {
                $data = $this->access_token_get_save();
            }
        } else {
            $data = $this->access_token_get_save();
        }

        return $data;
    }

    // access_token 获取保存
    public function access_token_get_save()
    {

        $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken";
        $post_string = "corpid=" . $this->CORPID . "&corpsecret=" . $this->CORPSECRET;

        $url = $url . '?' . $post_string;

        $data = json_decode($this->curl($url), true);
        $data['time'] = time();
        file_put_contents($this->fileName_access, json_encode($data));
        return $data;
    }

    // 获取 jsapi_ticket
    public function get_jsapi_ticket()
    {
        $data = [];

        if (is_file($this->fileName_jsapi_ticket)) {

            // 验证是否过期
            $time = time();
            $data = json_decode(file_get_contents($this->fileName_jsapi_ticket), true);

            if (($time - $data['time']) > ($data['expires_in'] - 100)) {
                $data = $this->jsapi_ticket_get_save();
            }
        } else {
            $data = $this->jsapi_ticket_get_save();
        }

        return $data;
    }

    // jsapi_ticket 获取保存
    public function jsapi_ticket_get_save()
    {
        $data = [];

        $data_access = $this->get_access_token();

        if (!empty($data_access['access_token'])) {

            $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket";
            $post_string = "access_token=" . $data_access['access_token'];

            $url = $url . '?' . $post_string;

            $data = json_decode($this->curl($url, $post_string), true);
            $data['time'] = time();
            file_put_contents($this->fileName_jsapi_ticket, json_encode($data));
        }
        return $data;
    }

    // 生成随机字符串
    public function generate_password($length = 8)
    {
        // 密码字符集,可任意添加你需要的字符
        $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        $password = "";
        for ($i = 0; $i < $length; $i++) {
            // 这里提供两种字符获取方式
            // 第一种是使用 substr 截取$chars中的任意一位字符;
            // 第二种是取字符数组 $chars 的任意元素
            // $password .= substr($chars, mt_rand(0, strlen($chars) – 1), 1);
            $password .= $chars[mt_rand(0, strlen($chars) - 1)];
        }
        return $password;
    }

    // 微信分享config
    public function fen_xaing_config($url)
    {
        $noncestr = $this->generate_password(15);
        $time = time();
        file_put_contents($this->fileName_sing, 'sing='.$this->get_qian_ming($url, $time, $noncestr).'url:'.$url.'time'.$time.'--non'.$noncestr);
        return [
            'debug' => $this->debug,
            'appId' => $this->CORPID, // 必填,公众号的唯一标识
            'timestamp' => $time, // 必填,生成签名的时间戳
            'nonceStr' => $noncestr, // 必填,生成签名的随机串
            'signature' => $this->get_qian_ming($url, $time, $noncestr), // 必填,签名
            'jsApiList' => ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'scanQRCode'], // 必填,需要使用的JS接口列表
        ];

    }

    // 生成签名
    public function get_qian_ming($url, $t_time, $noncestr)
    {
        $data_jsapi = $this->get_jsapi_ticket();

        $str = "";
        if (!empty($data_jsapi['ticket'])) {
            $jsapi_ticket = $data_jsapi['ticket'];
            $timestamp = $t_time;
            $str = 'jsapi_ticket=' . $jsapi_ticket . '&noncestr=' . $noncestr . '&timestamp=' . $timestamp . '&url=' . $url;
            $str = sha1($str);
        }
        return $str;

    }

    // 获取接口数据
    public function curl($url, $post_string = '')
    {

        $curl = curl_init();
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_TIMEOUT, 500);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($curl, CURLOPT_URL, $url);
        $res = curl_exec($curl);
        curl_close($curl);
        return $res;

    }

}

$weiXingInit = new WeiXingInit();
$url = $_GET['url'];
$info = $weiXingInit->fen_xaing_config($url);
$protocol = (!empty($_SERVER[HTTPS]) && $_SERVER[HTTPS] !== off || $_SERVER[SERVER_PORT] == 443) ? "https://" : "http://";
$url1 = $protocol.$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
file_put_contents('url.txt',$url1);
header('Access-Control-Allow-Origin:*'); //支持全域名访问,不安全,部署后需要固定限制为客户端网址
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); //支持的http 动作
header('Access-Control-Allow-Headers:x-requested-with,content-type'); //响应头 请按照自己需求添加。
$result = array('code' => 1, 'msg' => 'findok', 'data' => $info, 'url' => '', 'wait' => '');
echo json_encode($result);exit;

4,开始使用功能,创建一个文件进行测试。如下是doqrcode.php(不能直接使用,要填自己的接口地址

<?php
header('Content-Type:text/html;charset=UTF-8');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>装车验收扫码入口</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
        body{margin: 0;padding: 0;height: 100%;}
        .mian{
            width: 100%;
            overflow: hidden;
            height: 100%;
            position: absolute;
            left: 0px;
            width: 100%;
            background-image: linear-gradient(160deg, #4F77AB 20%,#008cff 80%);
        }
        .center{
           text-align: center;
            position: relative;
            top: 30%;
            width: 100%;
        }
        #scanQRCode{
            margin: 0 auto;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 155px;
            height: 155px;
            border-radius: 50%;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            letter-spacing:10px;
            padding-left: 10px;
        }
        .footer{
            position: absolute;
            bottom: 50px;
            width: 100%;
        }
        .texts{
            text-align: center;
            color: #BFBFBF;
        }
    </style>
</head>

<body>
<div class="mian">
    <div class="center">
        <div id="scanQRCode">扫客户码</div>
    </div>
    <div class="footer"><div class="texts">本应用由深圳市中用软件科技有限公司提供技术支持</div></div>
</div>
</body>
<script>
    window.onload = function () {
        var pageUrl = location.href.split('#')[0];
        //alert(location.href.split('#')[0]);
        // console.log(pageUrl)
        $.get('http://你的接口地址/qy-weixin.php', {
            url: pageUrl
        }, function (data) {
            if (data != '') {
                var res = JSON.parse(data);
                //alert(data);
                resd = res.data;
                wx.config({
                    beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId: resd.appId, // 必填,企业微信的corpID
                    timestamp: resd.timestamp, // 必填,生成签名的时间戳
                    nonceStr: resd.nonceStr, // 必填,生成签名的随机串
                    signature: resd.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
                    jsApiList: ["scanQRCode", "translateVoice"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                });



            }

        });

        wx.error(function (res) {
            alert("出错了:" + res.errMsg); //这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
        });

        wx.ready(function () {
            wx.checkJsApi({
                jsApiList: ['scanQRCode', 'translateVoice'],
                success: function (res) {}
            });

            //点击按钮扫描二维码
            document.querySelector('#scanQRCode').onclick = function () {
                wx.scanQRCode({
                    desc: 'scanQRCode desc',
                    needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
                    success: function (res) {
                       // alert(res);
                        var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
                        window.location.href = './goodlist.php?khid='+result;//扫描后有个链接,然后跳转到该页面

                    },
                    error: function(res) {
                        if (res.errMsg.indexOf('function_not_exist') > 0) {
                            alert('版本过低请升级')
                        }
                    }
                });
            };

        });

    }
</script>
</html>

5,接口和测试文件都写好了,就回到企业微信进行配置应用配置访问路径。

设置内容:https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的企业ID&redirect_uri=你的测试文件地址&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

如:https://open.weixin.qq.com/connect/oauth2/authorize?appid=wwc123456e40&redirect_uri=http://baidu.com/doqrcode.php&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

6,最后一步。非常重要。验证域名合法性

具体验证方法里面有说明,其实很简单,就下载那个txt文件放到域名根目录,然后点击开始验证就可以了

以上就是简单的企业微信上的扫码功能,其实微信扫码也差不多。附件包含以上文件和另加微信扫一扫接口文件。修改参考企业微信的接口文件即可。

点我附件下载

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

itxiaolong3

打赏可以,但别打我就行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值