目录
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./open/js/jweixin-1.2.0.js"></script>
请注意:
(1)如果你的页面启用了https,务必HTTPS方式引入,如https://res./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:接口调用失败时执行的回调函数。plete:接口调用完成时执行的回调函数,无论成功或失败都会执行。4.cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。5.trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。*/
2. 调用支付宝扫一扫(通过Alipay JSSDK)
支付宝H5开放文档
2.1 引入相关的js文件
<script src="/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);}});