jsapi微信扫一扫

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

微信公众号开发--微信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>

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 <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 "> 
<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> 
</div>

</div>
<div id="wm_id"></div>
<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);
}