目录
1. 调用微信扫一扫功能：
1.1 绑定域名
1.2 引入JS文件
1.3 通过config接口注入权限验证配置
1.4 调用扫一扫
2. 调用支付宝扫一扫（通过Alipay JSSDK）
2.1 引入相关的js文件
2.2 调用扫一扫
3. 调用支付宝扫一扫（通过Alipay JSAPI）
1. 调用微信扫一扫功能：
1.1 绑定域名
在微信公众平台中配置安全域名： “公众号设置 - 功能设置 - JS接口安全域名”
具体可以参考：微信JS-SDK说明文档
备注：登陆微信公众平台，在公众号设置页面填写域名配置即可，无需其他操作。
1.2 引入JS文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>请注意：
（1）如果你的页面启用了https，务必HTTPS方式引入，如 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK
（2）结合vue项目使用的时候，jssdk可以通过npm方式引入，具体步骤如下：
// 1. 在命令行工具中安装jssdk
$ npm install -S weixin-js-sdk
// 2. 在相关js文件中引入
import wx from 'weixin-js-sdk';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;
},
fail: function (res) {
// 调用失败
if (res.errMsg.indexOf('function_not_exist') > 0 ) {
alert('当前版本过低，请进行升级');
}
},
cancel: function(res){
// 用户取消操作
}
});
})
/**
1.success：接口调用成功时执行的回调函数。
2.fail：接口调用失败时执行的回调函数。
3.complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
4.cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
5.trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
*/2. 调用支付宝扫一扫（通过Alipay JSSDK）
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为扫码返回的结果
}
});
})3. 调用支付宝扫一扫（通过Alipay JSAPI）
通过API方法调用扫码，不同于JSSDK，无需额外引入相关js文件，而是通过支付宝内置对象来调用扫码功能。
依据支付宝开放文档：Alipay JSAPI - scan 文档
AlipayJSBridge.call(
"scan",
{ type: "qr" },
function(res) {
// alert("Alipay扫码结果：" + JSON.stringify(res));
if (res.error == 10) {
// 错误码为10：用户取消操作
alert("用户取消操作");
} else if (res.error == 11) {
// 错误码为11：扫码失败
alert("网络异常，请重试");
} else {
// res.codeContent为扫码返回的结果
console.log(res.codeContent);
}
}
);
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
