移动端调用微信和支付宝的扫一扫功能

目录

1. 调用微信扫一扫功能：

1.1 绑定域名

1.2 引入JS文件

1.3 通过config接口注入权限验证配置

1.4 调用扫一扫

2. 调用支付宝扫一扫功能

2.1 引入相关的js文件

2.2 调用扫一扫

---

1. 调用微信扫一扫功能：

1.1 绑定域名

在微信公众平台中配置安全域名： “公众号设置 - 功能设置 - JS接口安全域名”

具体可以参考：微信JS-SDK说明文档

1.2 引入JS文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK 

1.3 通过config接口注入权限验证配置

由后端生成签名并获取jsapi_ticket（由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket ），并通过接口返回权限验证所需要的变量。

在页面中的具体引用为（进入页面就需要请求配置信息进行配置）：

$.ajax({
    type: "post",
    url: sign_url,
    data: {
        // xxx:xxxx    
    },
    async: false,
    success: function (res) {
        if (res.return_code == 1) {
            var obj = res.data;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: obj.appId, // 必填，公众号的唯一标识
                timestamp: obj.timestamp, // 必填，生成签名的时间戳
                nonceStr: obj.noncestr, // 必填，生成签名的随机串
                signature: obj.sign, // 必填，签名
                jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表, 这里只需要调用扫一扫
            });
        }
    }
})

1.4 调用扫一扫

当点击按钮的时候，调起扫一扫功能：

$("#scan").on('click', function () {
    wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
            // 扫码成功，跳转到二维码指定页面（res.resultStr为扫码返回的结果）
            location.href = res.resultStr;
        },
        error: function (res) {
            if (res.errMsg.indexOf('function_not_exist') > 0 ) {
                alert('当前版本过低，请进行升级');
            }
        }
    });
})

2. 调用支付宝扫一扫功能

支付宝H5开放文档

2.1 引入相关的js文件

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

2.2 调用扫一扫

$("#scan").on('click', function(){
    ap.scan({
        type: 'qr'
    }, function (res) {
        if (res.error == 10) {
            // 错误码为10：用户取消操作
            // ...
        } else if (res.error == 11) {
            // 错误码为11：扫码失败
            alert('网络开小差了...');
            // ....
        } else {
            console.log(res.code);
            // res.code为扫码返回的结果
        }
    });
})