微信公众平台使用JSSDK网页调起扫码并获取扫码数据

初学者，部分css样式在网上扒下来的，功能实现了，代码很糙，非常糙，望海涵，也希望大神多指导、
QQ：961052877，有问题大家一起交流。可以互相学习。

得到你的APPID与AppSecret
获取到access_token与ticket
配置wx.config
调用扫码
二维码与条形码处理
获取返回值
关于苹果端网页扫码调起的问题处理
2017年12月20日增加仿顺丰侧边栏
最后

废话不多说直接上代码：

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("你的ADPPID", "你的AppSecret");
$signPackage = $jssdk->GetSignPackage();
//sample.php,获取你的APPID与AppSecret传递到JSSDK处理
?>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><!-- 适应屏幕缩放等乱七八糟的-->
<meta name="format-detection" content="telephone=no, email=no">
<title>这是标题啊</title>
<script src="vp.js" charset="utf-8"></script>
<link rel="stylesheet" href="swiper.min.css" media="screen" charset="utf-8">
<link rel="stylesheet" href="queryExp.css" media="screen" charset="utf-8">
</head>
<body class="page-query member-login-page"><header class="page-title"><a class="my-nav" href="javascript:void(0)"></a><h1 class="title">这是名字啊</h1></header><section class="form-main"><!--<input id="waybillNoId" type="button" value="请输入要查询的单号" onclick="window.location.href='history.html?from=query'">--><input id="waybillNoId" type="button" value="请输入要查询的单号" onclick=""><i  id="query"class="scan"></i>  <!-- 这里是点击那个扫码的图片--></section><script src="jweixin-1.0.0.js"></script><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">
<!-- 这里写wx.config和wx.scanQRCode-->wx.config({//配置wx.config//debug: true,//调试输出需要的话就拿出来appId: '<?php echo $signPackage["appId"];?>',timestamp: <?php echo $signPackage["timestamp"];?>,nonceStr: '<?php echo $signPackage["nonceStr"];?>',signature: '<?php echo $signPackage["signature"];?>',jsApiList: [//要调用的接口全部写在这'checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','translateVoice','startRecord','stopRecord','onRecordEnd','playVoice','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','openLocation','getLocation','hideOptionMenu','showOptionMenu','closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard']});wx.ready(function () {document.querySelector('#query').onclick = function () {//调用扫码事件返回扫码值wx.scanQRCode({needResult: 1,desc: 'scanQRCode desc',success: function (res) {alert(res.resultStr)//扫码数据在这看}       }});};
});</script></body>
</html>

实际操作发现当扫描二维码的时候没有什么问题，但是扫码扫到条码时会出现问题，下面贴上处理方法：

  if(res.resultStr.indexOf(',') > 0){//条形码时返回的格式类似为【code128,123456789】      var dealserialNumber=res.resultStr.split(',')[1];            dealserialNumber = dealserialNumber.replace(/[^a-z\d]/ig, "");//处理条形码扫描的字符location.href='接收结果页面='+dealserialNumber;//扫描结果传递到的处理页面
else{//二维码时
location.href='接收结果页面='+res.resultStr;//扫描结果传递到的处理页面
}

侧边栏：

<a class="sidenav" data-sidenav data-sidenav-toggle="#sidenav-toggle" >
<div class="sidenav-brand">
货哪儿网
</div>
<div class="sidenav-header">
寄快递
</div>
<div class="sidenav-header">
查快递
</div>
<div class="sidenav-header">
我的快递
</div>
<div class="sidenav-header">
个性设置
</div>
<div class="sidenav-header">
货哪儿网服务
</div>
</a>

关于苹果端扫码，晚上看了下，说什么网络请求之类的问题，要怎么怎么处理，我处理起来比较粗暴，所有的js文件本地化，测试没发现什么的问题，不知道这样处理是不是正确。效果如下图所示：

最后

希望大家多多留言交流，新手野生码农，且写且珍惜。有用的话顶一下吧、(╹▽╹)

**demo：**链接：https://pan.baidu.com/s/1smm3Gc9 密码：nxd1，QQ：961052877，有问题大家一起交流。可以互相学习。

微信公众平台使用JSSDK网页调起扫码并获取扫码数据（PHP）相关推荐

微信公众平台oauth2.0 php,微信公众平台oauth2.0网页授权
本篇文章你将学到:在自己做的微信网站里,利用oauth2.0网页授权接口获取用户的信息(openid,姓名,性别,地区,头像等).如大转盘等游戏记录哪个微信用户获得什么奖品.H5等小游戏需要把分数与对 ...
php mysql网站导航跳转_PHP微信公众平台跳转网页实现定位思路 By:阿尚
这两天做微信公众平台的时候遇到一个进入网页进行用户定位的功能,由于各方面原因,没有去使用微信提供的js定位.以前也没做过微信相关的开发-加之微信官方提供的API文档着实看着蛋疼,苦思无果,终于在第三天 ...
微信授权demo php,PHP微信公众平台oauth2.0网页授权登录类的封装demo
一.微信授权使用的是OAuth2.0授权的方式.主要有以下简略步骤: 第一步:用户同意授权,获取code 第二步:通过code换取网页授权access_token 第三步:拉取用户信息(需scope为 ...
微信诱导关注php源码,微信公众平台关于在线网页制作类诱导关注的公告
近期,微信公众平台发现部分公众号通过向用户提供制作音乐相册.照片相册等在线网页制作工具的形式,实施诱导关注的行为.具体形式包括但不限于诱导用户关注公众号制作在线网页,篡改用户制作的相册内容.添加诱导关 ...
微信公众平台中通过网页增加好友
对于微信公众平台,可以实现在WAP网页上增加好友和发起聊天,代码为 <a href="weixin://contacts/profile/guoxiongjie">发起 ...
微信公众平台显示隐藏网页右上角菜单(第九课)
微信官方jsapi提供了界面操作接口,用来控制微信网页右上角的菜单,下面看看微信官方文档关于界面操作接口的说明. 隐藏右上角菜单接口 wx.hideOptionMenu(); 显示右上角菜单接口 wx ...
共享一个调用微信公众平台接口的客户端类库
由于我所开发活动项目经常要用到微信公众平台所提供的接口,所以本人专门开发了微信客户端的类库. 经过了几个项目的实践,特意将该类库共享出来.源代码已经放在了github上,供大家使用. 首先介绍一下设计 ...
微信公众平台开发入门教程[2019版]
关键字:微信公众平台开发作者:方倍工作室在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/JS等基础. 我们将使用微信公 ...
微信公众平台开发入门教程[2020版]
在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/JS等基础. 我们将使用微信公众账号方倍工作室作为讲解的例子,二维码见左侧 ...

微信公众平台使用JSSDK网页调起扫码并获取扫码数据（PHP）

微信公众平台使用JSSDK网页调起扫码并获取扫码数据

最后

微信公众平台使用JSSDK网页调起扫码并获取扫码数据（PHP）相关推荐

最新文章

热门文章