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>
<!-- 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×tamp=$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 ...
随机推荐
- CH0601 Genius ACM【倍增】【归并排序】
0601 Genius ACM 0x00「基本算法」例题 描述 给定一个整数 M,对于任意一个整数集合 S,定义“校验值”如下: 从集合 S 中取出 M 对数(即 2∗M 个数,不能重复使用集合中的数 ...
- 系统中同时有 python2和 python3，怎么让 ipython 选择不同的版本启动？
已经安装的情况下: > which ipython /usr/local/bin/ipython > cat /usr/local/bin/ipython #!/usr/local/op ...
- Design Pattern in Simple Examples
Instead of defining what is design pattern lets define what we mean by design and what we mean by pa ...
- display属性的表格布局相关属性
基于CSS属性display:table的表格布局的使用 项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的tabl ...
- 004-spring cache-声明性的基于XML的缓存
一.概述 如果注释不是选项(不能访问源代码或没有外部代码),可以使用XML进行声明式缓存.因此,不是注释用于缓存的方法,而是从外部指定目标方法和缓存指令(类似于声明式事务管理建议). <!-- ...
- PAT 1031 Hello World for U[一般]
1031 Hello World for U (20 分) Given any string of N (≥5) characters, you are asked to form the chara ...
- 【Lua】模块与包
定义: 从用户观点来看,一个模块就是一个程序库,可以通过require来加载(require用于使用模块,module用于创建模块),然后便得到了一个全局变量,表示一个table,这个 ...
- char *strstr(const char *str1, const char *str2);
[FROM MSDN && 百科] 原型:char *strstr(const char *str1, const char *str2); #include<string.h& ...
- 查准率与查全率(precision and recall) 的个人理解
假设要识别照片中的狗的,在一些照片中,包含12只狗的照片和一些猫的照片.算法识别出有8只狗.在确定的8只狗中,5只实际上是狗(真阳性TP),而其余的是猫(假阳性FP).该程序的精度为5/8,而其召回率 ...
- MySQL connector c++使用笔记
MySQL的connector官方地址: http://dev.mysql.com/downloads/connector/ 针对c++来说, 可以选择c或者c++的库. c++的实现是参考了java ...