首页 > 微信学院 > 微信公众平台开发 >

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

2017-12-06

微信公众平台使用JSSDK网页调起扫码并获取扫码数据(PHP实现)。得到你的APPID与AppSecret 获取到access_token与ticket 配置wx config 调用扫码 二维码与条形码处理 获取返回值 关于苹果端网页扫码调起的问题处理 最后。废话不多说直接上代码:

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

初学者,部分css样式在网上扒下来的,功能实现了,代码很糙,非常糙,望海涵,也希望大神多指导

得到你的APPID与AppSecret 获取到access_token与ticket 配置wx.config 调用扫码 二维码与条形码处理 获取返回值 关于苹果端网页扫码调起的问题处理 最后


废话不多说直接上代码:

<!--?php
require_once "jssdk.php";
$jssdk = new JSSDK("你的ADPPID", "你的AppSecret");
$signPackage = $jssdk--->GetSignPackage();
//sample.php,获取你的APPID与AppSecret传递到JSSDK处理
?>
<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">
 
 
        <header class="page-title">
         
        <h1 class="title">这是名字啊</h1>
    </header>
    <section class="form-main">
        <!--<input id="waybillNoId" type="button" value="请输入要查询的单号" onclick="window.location.href=&#39;history.html?from=query&#39;">-->
        <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: &#39;<!--?php echo $signPackage["appId"];?-->&#39;,
      timestamp: <!--?php echo $signPackage["timestamp"];?-->,
      nonceStr: &#39;<!--?php echo $signPackage["nonceStr"];?-->&#39;,
      signature: &#39;<!--?php echo $signPackage["signature"];?-->&#39;,
      jsApiList: [
      //要调用的接口全部写在这
        &#39;checkJsApi&#39;,
        &#39;onMenuShareTimeline&#39;,
        &#39;onMenuShareAppMessage&#39;,
        &#39;onMenuShareQQ&#39;,
        &#39;onMenuShareWeibo&#39;,
        &#39;hideMenuItems&#39;,
        &#39;showMenuItems&#39;,
        &#39;hideAllNonBaseMenuItem&#39;,
        &#39;showAllNonBaseMenuItem&#39;,
        &#39;translateVoice&#39;,
        &#39;startRecord&#39;,
        &#39;stopRecord&#39;,
        &#39;onRecordEnd&#39;,
        &#39;playVoice&#39;,
        &#39;pauseVoice&#39;,
        &#39;stopVoice&#39;,
        &#39;uploadVoice&#39;,
        &#39;downloadVoice&#39;,
        &#39;chooseImage&#39;,
        &#39;previewImage&#39;,
        &#39;uploadImage&#39;,
        &#39;downloadImage&#39;,
        &#39;getNetworkType&#39;,
        &#39;openLocation&#39;,
        &#39;getLocation&#39;,
        &#39;hideOptionMenu&#39;,
        &#39;showOptionMenu&#39;,
        &#39;closeWindow&#39;,
        &#39;scanQRCode&#39;,
        &#39;chooseWXPay&#39;,
        &#39;openProductSpecificView&#39;,
        &#39;addCard&#39;,
        &#39;chooseCard&#39;,
        &#39;openCard&#39;
      ]
 
  });
 wx.ready(function () {
    document.querySelector(&#39;#query&#39;).onclick = function () {//调用扫码事件返回扫码值
    wx.scanQRCode({
      needResult: 1,
      desc: &#39;scanQRCode desc&#39;,
      success: function (res) {
      alert(res.resultStr)//扫码数据在这看
        }         
      }
    });
  };   
});
 
       </script>

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

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

关于苹果端扫码,查了下往上,说什么网络请求之类的话,要怎么怎么处理,我处理起来比较粗暴,所有的js文件本地化,不知道是不是可行的,但是测试没发现什么大的问题,不知道这样处理是不是正确。

相关文章
最新文章
热点推荐