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'];?>',// 必填，签名，见附录1jsApiList: ['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: '',// 必填，签名，见附录1jsApiList: [] // 必填，需要使用的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微信扫一扫相关推荐
- 前端JS调用微信JSAPI之扫一扫
扫一扫按钮增加点击事件 <div class="a2" onclick="onQscan()"><span>扫一扫</span&g ...
- java弹出微信扫一扫_JAVA实现调用微信js-sdk扫一扫
喜欢的朋友可以关注下. 已经很久没有给大家分享一片技术文章了,今天抽了点时间来,给大家说一说如何调用微信提供的扫一扫接口. 前提: 需要申请一个公众号:申请公众号需要的资料我就不说了,去申请微信会提示 ...
- 微信公众号开发--微信JS-SDK扫一扫功能
首先请阅读微信JS-SDK说明文档,了解微信JS的相关说明. 根据官方的使用步骤,关键的有以下几步 绑定域名(很关键) 引入JS文件(很简单) 通过config接口注入权限验证配置(很重要) ...
- js调用微信扫一扫demo_JS 调用微信扫一扫功能
1.第一步: 设置调用微信js安全域名,就可以在该域名下调用微信的js接口 2.第二步: 将下面的js附在需要调用微信扫一扫的页面上,前提是需要引入微信的js[] 3.第三步: 后台获取签名代码: p ...
- 前端页面调用微信扫一扫功能
前端代码: 引入微信对象 import wx from '@/plugins/wechat/wechat'; 主要代码: wxscan() { // 调用扫一扫const that = this;ge ...
- 微信调用扫一扫功能实现
先配置微信的所有信息 前端代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
- HTML——微信浏览器H5页面调用微信扫一扫
使用JS-SDK调用微信扫一扫,需要有公众号支持,通过公众号生成JS-SDK使用权限签名.本文直接调用已封装好的接口来获取随机数(noncestr).时间戳(timestamp).签名(signatu ...
- 微信浏览器调起来扫一扫和问题总结
微信浏览器调用扫一扫,需要微信公众号的appid和app_secret 然后微信设置里面设置上,js安全域名和ip白名单即可 1.首先根据appid和secret获得ticket 2.然后获取随机字符 ...
- 企业微信 jssdk调用 扫一扫 安卓不行 ios又可以
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script sr ...
最新文章
- 微软发布屏蔽Win10升级的官方办法
- CentOS 6.8 安装 RabbitMQ
- ffmpeg + x264+ x265 + libde265 + opengl es display
- 网站建设PHP中mysql和mysqli的区别
- Asp.net中服务端控件事件是如何触发的(笔记)
- mysql中 课程1比课程2成绩高_小菜菜mysql练习解读分析1——查询 01 课程比 02 课程成绩高的学生的信息及课程分数...
- 两招让陌生网络访问者现出原形
- c# 带返回值的action_C#委托的介绍(delegate、Action、Func、predicate)
- C语言中如何将小数或整数和字符串合二为一
- 美国三大股指周五收高 费城半导体指数逆势微跌0.33%
- 《财产》评最受尊重公司：苹果第一谷歌第二
- BART原理简介与代码实战
- ASP.NET- 执行SQL超时的解决方案
- 传输层协议（7）：滑动窗口（1）
- BZOJ1007[HNOI2008] 水平可见直线
- 【工具-Hydra】暴力破解神器：Hydra-九头蛇
- 推荐系统 AB 测试
- Win10 Build 18237发布：登录屏幕启用毛玻璃特效
- mysql用户登录和第三方登录_mysql 用户表结构设计，第三方登录
- Java、JSP实验室预约管理系统