扫一扫解析二维码的多种解决方案

一、微信扫一扫
提到扫一扫，大家都很熟悉微信扫一扫吧，那微信扫一扫怎么接入的呢？当然这个肯定是看微信开放平台开放的api接口咯！
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115，诺这就是官方的说法！
step1: 你的要有一个微信公众号
step2: 在微信公众号后台的公众号设置里面设置js安全域名为当前调用的域名
在这里插入图片描述
step3:引入微信官方提供的js
http://res.wx.qq.com/open/js/jweixin-1.4.0.js

step4：通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: ‘’, // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: ‘’, // 必填，生成签名的随机串
signature: ‘’,// 必填，签名
jsApiList: [‘scanQRCode’] // 必填，需要使用的JS接口列表
});
step5:在页面上用js掉起微信扫一扫
在这里插入图片描述

wx.scanQRCode({
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});

这样子微信扫一扫就大功告成了，好像有点麻烦的地方就是签名那里，小编这里调用get_sha1方法获取微信返回来权限接口验证
参数，这三个方法互相调用，需要传递的就是申请公众号的appid 和appsecret, 最后就可以返回接口验证权限的那些参数:
在这里插入图片描述

二、接入支付宝扫一扫
官方开放接口文档地址:
https://myjsapi.alipay.com/alipayjsapi/device/scan/scan.html

<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>

<button id="J_btn_scanQR" class="btn btn-default">扫一扫二维码</button>
<button id="J_btn_scanBAR" class="btn btn-default">扫一扫条形码</button>
<script>
  var btnScanQR = document.querySelector('#J_btn_scanQR');
  var btnScanBAR = document.querySelector('#J_btn_scanBAR');
  btnScanQR.addEventListener('click', function(){
    ap.scan(function(res){
      ap.alert(res.code);
    });
  });
  btnScanBAR.addEventListener('click', function(){
    ap.scan({
      type: 'bar'
    }, function(res){
      ap.alert(res.code);
    });
  });
</script>

三:h5扫码拍照解析
测试demo下载链接，纯js实现,唯一的缺点就是容错率不是很大，二维码图片包含logo识别不了
https://pan.baidu.com/s/1rPkseXVc0Wj3U5RHneDpeg 提取码:bg9n

<div>
    <div class="qr-btn" node-type="qr-btn">扫一扫
        <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码" id="targetImgCamera" capture="camera" accept="image/*"/>
    </div>
</div>
<script src="/public/static/lock/js/zepto.js"></script>
<script src="/public/static/lock/js/qrcode.lib.min.js"></script>
<script src="/public/static/lock/js/qrcode.js"></script>
<script type="text/javascript">
       window.onload=function(){
            Qrcode.init($('[node-type=qr-btn]'));
       }
 </script>

核心代码就这几行，调用qrcode.js就可以实现

zq20192019

发布了77 篇原创文章 · 获赞 2 · 访问量 2万+

私信关注

扫一扫 解析二维码 的多种解决方案

猜你喜欢

扫一扫解析二维码的多种解决方案