web h5页面调用支付宝扫一扫

1。首先引入支付宝js

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

2.html标签

<button class="btn btn-primary btn-lg" type="button" id="J_btn_scanQR" >扫一扫</button>

3.js代码 我才用的是原生写法

 //调用支付宝扫一扫
            var btnScanQR = document.querySelector('#J_btn_scanQR'); //获取元素
            btnScanQR.addEventListener('click', function () {
                var browser = navigator.userAgent.toLowerCase();
                //如果是支付宝浏览器
                if (browser.match(/Alipay/i) == "alipay") {
                    ap.scan(function (res) {
                        if (res.error == 10) {
                            //ap.alert('操作已取消');
                        } else if (res.error == 11) {
                            // 错误码为11：扫码失败
                            ap.alert('网络开小差了...');
                        } else {
                            //成功了就把扫码得到得数据赋值到input上
                              ap.alert(res.code); //res.code是获得的数据
                              queryWasteOrderGoodsCode(); //成功后执行的函数
                        }
                    });
                } else {
                    //如果不是支付宝浏览器就自动跳转到支付宝打开页面  这里的url以前的地址是支付宝地址  url以后的是跳转到支付宝以后需要打开的页面地址
                    location.href = "alipays://platformapi/startapp?appId=20000067&url=http://demo.gudongxiong.com:2048/HomeForm.aspx";
                }
            });

效果展示

1，点击扫一扫按钮以前效果如下

2.扫描二维码  条形码  也可在手机相册中选择

3扫码完成返回扫码页面，将获得的数据展示出来