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

目录

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)

支付宝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为扫码返回的结果
        }
    });
})

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);
        }
    }
);

 

  • 4
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
移动端H5调用微信支付宝支付是一种简单方便的支付方式。用户在网页中选择微信支付宝支付后,会被引导到微信支付宝的支付页面,输入支付密码或确认支付即可完成支付。对于商家来说,只需在网页中添加相应的支付接口和配置相关信息,就可以实现H5调用微信支付宝支付功能。这种支付方式适用于各类移动端应用,如电商平台、小程序、线下商户等。 在实现H5调用微信支付宝支付的过程中,需要注意保障支付安全和用户隐私。商家需要通过微信支付宝的官方平台获得相关权限和密钥,确保支付接口的可信性和安全性。同时,还需要遵守相关的法律法规和隐私政策,保护用户的个人信息和支付数据。另外,商家还可以通过设置不同的支付方式、优惠券等方式来吸引用户,提高支付转化率和用户满意度。 在移动端H5调用微信支付宝支付的过程中,还需要考虑支付的实时性和用户体验。商家需要保证支付的及时性和可靠性,避免因网络延迟或其他原因导致支付失败或出现异常情况。同时,还需要考虑用户的支付习惯和支付环境,提供简洁明了的支付流程和友好的界面设计,提高用户支付的便捷性和舒适度。通过合理规划和技术实现,移动端H5调用微信支付宝支付可以成为一种便捷、安全、高效的支付方式,为用户和商家带来更好的支付体验和商业价值。
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值