微信公众号开发--微信JS-SDK扫一扫功能

首先请阅读微信JS-SDK说明文档，了解微信JS的相关说明。
根据官方的使用步骤，关键的有以下几步

绑定域名（很关键）
引入JS文件（很简单）
通过config接口注入权限验证配置（很重要）
通过ready接口处理成功验证（还没用到）
通过error接口处理失败验证（还没用到）

绑定域名

1首先到微信公众号设置里面添加js安全域名

比如我的域名是带有二级目录的：dev.xxx.com/muyang

那么在填入的时候域名为：dev.xxx.com/muyang

2.扫码调用页面时提交的url地址，一定要跟扫码页面的url保持一直，多或者少一个“/”都不行

例如，我扫码页面地址：dev.xxx.com/muyang/cat/

那么提交给签名的url地址也必须要是: dev.xxx.com/muyang/cat/

否则会报错：

{“errMsg”:”config:invalid SignPackage”}

所以，域名配置的时候一定要注意
1. 域名不要以http:开头
2. 域名不要配置到具体的页面
配置成功的提示如下

开发：

1，在页面引入：<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

并且开启debug: true，bug提示模式

jsApiList：调用为扫码模块：scanQRCode

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>行李查询</title>

    <!-- Tell the browser to be responsive to screen width -->

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- Bootstrap 3.3.7 -->

   <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

    <style>

        html,body{

            height:100%;

            font-size:14px;

            font-family:"Microsoft YaHei","Helvetica",sans-serif

        }

        .login-box-body, .register-box-body {

            width:90%;

            background: #fff;

            padding: 20px;

            border: 1px #D5D5D5 solid;

            color: #666;

            -webkit-border-radius: 5px;

            -moz-border-radius: 5px;

            border-radius: 5px;

            margin: 0 auto;

        }

        .login-box, .register-box {

            width: 360px;

            position: absolute;

            left: 50%;

            margin-left: -180px;

            top: 50%;

            margin-top: -200px;

            text-align: center;

        }

        .login-logo{

            padding-right:20px;

            background:url("<?php echo $base_url;?>/images/sao.png") no-repeat scroll left center transparent;

            height: 30px;

            padding-left: 35px;

        }

        * {

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

        }

        a,a:link{

            text-decoration: none;

            color: #808080; }

        .col-xs-12{width:100%}

        .has-feedback img{

            width:150px;height:50px;

        }

    </style>

</head>

<body class="hold-transition login-page " style="background:url(<?php echo $base_url;?>img/loginbg.png) left top no-repeat;background-size:cover;overflow:hidden;position:relative">

<div class="login-box ">

    <!-- /.login-logo -->

    <div class="login-box-body ">

        <div class="login-logo " style="color:#4f4f4f;font-size:20px;position:relative; color: #808080;">

            <a id="scanQRCode" url="<?php echo $base_url;?>/index/result">扫一扫行李牌条形码查询</a>

        </div>

        <!-- /.login-box-body -->

    </div>

    <!-- /.login-box -->

</div>

<div id="wm_id"></div>

<!-- jQuery 2.2.3 -->

<script>

    wx.config({

        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

        appId: '<?php echo $jsApi['appId'];?>', // 必填，公众号的唯一标识

        timestamp: '<?php echo $jsApi['timestamp'];?>', // 必填，生成签名的时间戳

        nonceStr: '<?php echo $jsApi['nonceStr'];?>', // 必填，生成签名的随机串

        signature: '<?php echo $jsApi['signature'];?>',// 必填，签名，见附录1

        jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

    });

// wx.error(function(res) {

    //     alert("出错了：" + res.errMsg);

    // });

    wx.ready(function() {

        // wx.checkJsApi({

        //     jsApiList : ['scanQRCode'],

        //     success : function(res) {

        //         alert("检验：" + res.errMsg);

        //     }

        // });

        //扫描二维码

        document.querySelector('#scanQRCode').onclick = function() {

            wx.scanQRCode({

                needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，

                scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有

                success : function(res) {

                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果

                    document.getElementById("wm_id").value = result;//将扫描的结果赋予到jsp对应值上

                    if(result.length > 0)

                    {

                        var QRCodeStr = result.split(",")

                        //alert('<?php echo $base_url;?>/index/result?code='+QRCodeStr[1]);

                        window.location.href='<?php echo $base_url;?>/index/result?code='+QRCodeStr[1];

                    }else{

                        alert("扫描失败::扫描码=" + result);

                    }

                }

            });

        };//end_document_scanQRCode

    });//end_ready

</script>

</body>

</html>

通过config接口注入权限验证配置

这一步非常重要，也是最关键的一步，这一部分
先看官方的示例

wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

    appId: '', // 必填，公众号的唯一标识

    timestamp: , // 必填，生成签名的时间戳

    nonceStr: '', // 必填，生成签名的随机串

    signature: '',// 必填，签名，见附录1

    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

这里需要从服务器端网页面传递的参数有timestamp、nonceStr和signature而appId和jsApiList都是固定的，这里直接写在页面中。

首先，编写服务器端代码，生成timestamp、nonceStr和signature。
在生成timestamp、nonceStr和signature的时候有两个参数需要获取
一个是access_token，另一个是jsapi_ticket。

access_token的获取需要AppId和AppSecret，获取地址如下，发送GET请求

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

通过HttpClient发送http请求就可以获取到access_token

得到access_token之后，采用http GET方式请求获得jsapi_ticket

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

注意，access_token和jsapi_ticket得有效期为7200秒，开发者必须在自己的服务全局缓存

获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。

我的获取ticket/jsapi ， token的php代码

用redis缓存，把token，jsapi_ticket存储起来

 /****************************js api 相关*********************************/

    public function getToken()

    {

        $ch = curl_init();

        curl_setopt($ch, CURLOPT_URL,

            "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" . WxConfig::$APPID . "&secret=" . WxConfig::$APPSECRET);

        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");

        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

        curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 5.01; Windows NT 5.0)');

        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);

        curl_setopt($ch, CURLOPT_AUTOREFERER, 1);

        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

        $tmpInfo = curl_exec($ch);

        if (curl_errno($ch)) {

            //echo 'access_token  curl error' . PHP_EOL;

        }

        if(empty($tmpInfo)){

            //echo "no back";

        }

        $tmpInfo = json_decode($tmpInfo);

        if (isset($tmpInfo->errcode)) {

            // 获取token失败

            //echo 'access_token error' . PHP_EOL;

        } else {

            //echo 'access_token  ok' . PHP_EOL;

            $this->redis->setex(WxConfig::$APPID."_token", 7200, $tmpInfo->access_token);

        }

    }

    private function getJsapiTicket($access_token)

    {

        $ch = curl_init();

        curl_setopt($ch, CURLOPT_URL,

            "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=" . $access_token);

        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "GET");

        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

        curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MSIE 5.01; Windows NT 5.0)');

        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);

        curl_setopt($ch, CURLOPT_AUTOREFERER, 1);

        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

        $tmpInfo = curl_exec($ch);

        if (curl_errno($ch)) {

            //echo 'js api ticket  curl error' . PHP_EOL;

        }

        $tmpInfo = json_decode($tmpInfo);

        if (isset($tmpInfo->errcode) && $tmpInfo->errcode != 0) {

            // 获取token失败

            //echo 'js api ticket  error' . PHP_EOL;

        } else {

            //echo 'js api ticket  ok' . PHP_EOL;

            $this->redis->setex(WxConfig::$APPID."_jsapi", 7200, $tmpInfo->ticket);

        }

    }

    /**

     * 获取指定长度的随机字符串

     * @param number $length

     * @return string

     */

    private 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;

    }

    /**

     * 获取js api config方法的签名

     * @return String

     */

    public function getSignPackage()

    {

        //jsapi

        $jsapitTicket = $this->redis->get(WxConfig::$APPID."_jsapi");

        $url = $this->config->baseUrl.'/';

        $timestamp = time();

        $nonceStr = $this->createNonceStr();

        // 这里参数的顺序要按照 key 值 ASCII 码升序排序

        $string = "jsapi_ticket=$jsapitTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

        $signature = sha1($string);

        $signpackage = array(

            "appId"     => WxConfig::$APPID,

            "nonceStr"  => $nonceStr,

            "timestamp" => $timestamp,

            "url"       => $url,

            "signature" => $signature,

            "rawString" => $string

        );

        return $signpackage;

    }

    /****************************js api 相关*********************************/

然后自动判断token/jsapi_ticket是否过期：

$access_token = $this->redis->get(WxConfig::$APPID."_token");

        if(empty($access_token))

        {

            //已过期

            $access_token = '';

            $this->getToken();

            $access_token = $this->redis->get(WxConfig::$APPID."_token");

            $this->getJsapiTicket($access_token);

        }else if(!empty($access_token))

        {

            $this->getJsapiTicket($access_token);

        }

jsapi微信扫一扫的更多相关文章

.Net 调用微信公众号扫一扫
1.绑定域名去微信公众号平台中设置js接口安全域名,要注意的是不填写http://, 只填写域名即可,如 www.baidu.com. 一个月只能修改三次,要谨慎填写. 2.引入JS文件在页面中引 ...
php 微信调用扫一扫
类库代码: <?phpclass JSSDK { private $appId; private $appSecret; public function __construct($appId, ...
【.NET】.NET MVC4 微信扫一扫功能实现-附全部代码
写在前面的首先在调用微信的JS-SDK接口的时候需要仔细阅读一下官方的注意事项,否则可能事倍功半.这里先大概概述一下主要的流程,首先,使用微信扫一扫需要一个已经通过认证的公众号:其次,需要知道 ...
调用微信的扫一扫功能详解说明---(java 排坑版)
最近碰到了这么一个需求,说是在前端页面调用手机本地的相机,扫描二维码这么一个需求,对于我一个后端来说, 这实在是难,难于上青天,但是决不能说一个不字.我说可以使用微信的扫码工具吗,这样可以方便一点,. ...
JAVA实现调用微信js-sdk扫一扫
喜欢的朋友可以关注下. 已经很久没有给大家分享一片技术文章了,今天抽了点时间来,给大家说一说如何调用微信提供的扫一扫接口. 前提: 需要申请一个公众号:申请公众号需要的资料我就不说了,去申请微信会提示 ...
ASP.NET MVC做的微信WEBAPP中调用微信JSSDK扫一扫
今天做一个项目,是在微信上用的,微信WEB APP,里面用到了调用手机摄像头扫一扫二维码的功能,记得以前某个项目里写有的,但是找不到之前那个项目源码了,想复制粘贴也复制不了了,只好对着微信的那个开发文 ...
java实现微信扫一扫详解
java实现微信扫一扫详解一.微信JS-SDK参数配置及查找 JS安全域名配置(查找:微信公众号里-公众号设置-功能设置页) 注:1.安全域名外网必须可以访问的到 2.域名不能有下划线 3.要将 ...
微信公众平台：扫一扫demo
ylbtech-微信公众平台:扫一扫demo 1.返回顶部 1.Web.config <appSettings> <add key="appid" value=& ...
记录：c#实现微信，支付宝扫码支付（一）
因为公司系统业务需要,这几天了解了一下微信和支付宝扫码支付的接口,并用c#实现了微信和支付宝扫码支付的功能. 微信支付分为6种支付模式:1.付款码支付,2.native支付,3.jsapi支付,4.a ...

随机推荐

快速定位oracle故障-恩墨
首先我们要明白一点,所谓的故障,意味着相对来讲比较严重.也就是可能比不同的问题要严重一些,比如锁等待. 要能够快速的定位和解决问题,恢复业务正常:首先我们需要了解Oracle的一些常见的故障有哪些. ...
JSON_CONTAINS
select * from tb where info->'$.name' = '特价促销' or JSON_CONTAINS(info->'$[*].name', '" ...
Linux squid 缓存服务器
一.简介代理服务器英文全称是Proxy Server,其功能就是代理网络用户去取得网络信息. Squid是一个缓存Internet 数据的软件,其接收用户的下载申请,并自动处理所下载的数据.当一个用 ...
Windows:子线程中创建窗口
一般来讲,UI的所有操作都必须在主线程,否则会出现未知错误.但有时候我们会需要一个功能比较单一的窗口,同时希望他在一个单独的线程运行.并不影响主线程的效率. 下面说明一下新建子线程创建的新窗口的方法, ...
【mlflow】打包：npm run build + python setup.py sdist
mlflow是一个开源机器学习平台最近需要使用一个它的最新版本,但是这个最新版本没有git包,无法通过pip install安装,需要打包安装. 打包完之后在项目的dist文件夹中有打包后的压缩包, ...
将expression转化为数据类型int时发生算术溢出错误
在SQL Server 中,某列的数据都在int范围之内,但是使用sum聚集函数求该列和的时候,出现“将expression转化为数据类型int时发生算术溢出错误”. 问题在于定义的数据类型: 首先, ...
mysql 数据操作单表查询 concat()函数定义显示格式
#定义显示格式 concat() 函数用于连接字符串类似于python 格式化操作print("姓名:%s" % name)或者用,拼接一个一个的变量print("a ...
JS中手动触发事件的方法
如果大家将一张网页看成一个form的话,大致上就成了一个web form的模型.在win form 下要想手动触发某一个对象的事件是很简单的,只要发送一条消息即可达成.(PostMessage) 但是 ...
Spark 参数配置的几种方法
1.Spark 属性Spark应用程序的运行是通过外部参数来控制的,参数的设置正确与否,好与坏会直接影响应用程序的性能,也就影响我们整个集群的性能.参数控制有以下方式:(1)直接设置在SparkCon ...
hdfs HA原理
早期的hadoop版本,NN是HDFS集群的单点故障点,每一个集群只有一个NN,如果这个机器或进程不可用,整个集群就无法使用.为了解决这个问题,出现了一堆针对HDFS HA的解决方案(如:Linux ...

jsapi微信扫一扫

微信公众号开发--微信JS-SDK扫一扫功能

绑定域名

通过config接口注入权限验证配置

jsapi微信扫一扫的更多相关文章

随机推荐

热门专题