html5 微信扫一扫功能实现

最新推荐文章于 2024-05-13 15:39:43 发布

LGDmar

最新推荐文章于 2024-05-13 15:39:43 发布

阅读量4.5k

点赞数

本文链接：https://blog.csdn.net/LGDmar/article/details/80784607

版权

html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
</head>
<body>
<input type="text" value="{$signPackage.appId}" id="id1" hidden="hidden" />
<input type="text" value="{$signPackage.timestamp}"id="id2" hidden="hidden"  />
<input type="text" value="{$signPackage.nonceStr}" id="id3" hidden="hidden"  />
<input type="text" value="{$signPackage.signature}" id="id4" hidden="hidden"  />
<button id="button" class="btn btn-success" type="button" onclick="scanCode()" hidden="hidden"/>扫一扫!</button>
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="__STATIC__/js/jquery.min.js"></script>
<script>
        // 注意：所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
        // 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
        // 完整 JS-SDK 文档地址：<a rel="nofollow" href="http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html" target="_blank">http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html</a>
        var appId=$('#id1').val();
        var timestamp=$('#id2').val();
        var nonceStr=$('#id3').val();
        var signature=$('#id4').val();
        function wxConfig() {
            wx.config({
                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId : appId, // 必填，公众号的唯一标识
                timestamp : timestamp, // 必填，生成签名的时间戳
                nonceStr : nonceStr, // 必填，生成签名的随机串
                signature : signature,// 必填，签名，见附录1
                jsApiList : [  "scanQRCode" ]
                // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        }


        function scanCode() {
            wx.scanQRCode({
                needResult : 1,
                scanType : [ "qrCode", "barCode" ],
                success : function(res) {
                    console.log(res)
                    alert(JSON.stringify(res));
                    var result = res.resultStr;
                },
                fail : function(res) {
                    console.log(res)
                    //    alert(JSON.stringify(res));
alert("没有权限，请拍照上传！请尽量靠近二维码拍照！");
$("#button").hide();
                    $("#div1").show();
                    $("#div2").show();
                }
            });
        }     
</script>

</html>

php获取签名

public function sys(){
    $appid = '';
    $secret = '';
    //这里获取access_token
    $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$secret."";
    $result = $this->https_request($url);
    $json1 = json_decode($result,true);
 
    //通过access_token获取ticket
    $us = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?    access_token=".$json1['access_token']."&type=jsapi";
    $resu = $this->https_request($us);
    $json = json_decode($resu,true);

    //生成签名的时间戳
    $timestamp = time(); 

    //生成16位随机字符串
    $nonceStr = $this->createNonceStr();

    //获取当前url
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
    $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

    $string = "jsapi_ticket=".$json['ticket']."&noncestr=".$nonceStr."&timestamp=".$timestamp."&url=".$url."";

    //最重要的我也不知道叫什么
    $signature = sha1($string);

    $signPackage = array(
        "appId"=>$appid,
        "nonceStr"=>$nonceStr,
        "timestamp"=>$timestamp,
        "url"=>$url,
        "signature"=>$signature,
        "rawString"=>$string
    );

    return $signPackage;
}

//zifuchuan
public function createNonceStr($length = 16) {
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) {
      $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
    }
    return $str;
}

//回调
public function https_request($url,$data=null){
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
    if (!empty($data)){
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
    }
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $output = curl_exec($curl);
    curl_close($curl);

    return $output;
}

LGDmar

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5 微信扫一扫功能实现

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-sc...
复制链接

扫一扫