[ALI-签约代扣] 小程序环境下的签约代扣

[ALI-签约代扣] 小程序环境下的签约代扣

最开始的应用场景是在H5页面，通过 scheme：alipays://platformapi/startApp?appId=60000157&orderStr= + orderStrParam 唤起支付宝付款并签约页面；
orderStrParam是服务端通过接口获取到的各个参数拼接而成，并通过URI的UTF-8的方式编码过

之后在小程序中嵌入了该H5网页，但是在唤起支付宝付款并签约页面提示了拒绝访问，通过查询文档发现提示在小程序中不允许使用scheme 的方式跳转到付款并签约的页面。

文档来回绕的已经不知道怎么解决了，咨询了相关技术人员，还是没理清楚

终于在经历了一点点盘查，终于找到了解决方案

首先，需要确认你要使用的是什么？先签约，后付款，还是付款并签约

这两者是不同的概念，因此调用的API也不相同

引入Ali 的jsapi

不论是哪种，都需要引入支付宝的jsapi

因为是H5的页面，因此需要判断引入该H5页面的是否是支付宝小程序环境，如果是才需要引入，否则无需执行该分支

<script>
    if ((navigator.userAgent.toLowerCase().indexOf('alipayclient') > -1) && (navigator.userAgent.toLowerCase().indexOf('miniprogram') > -1) ) {
        document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
    }
</script>

先签约，后付款 && 付款并签约的区别

先签约，后付款

这个是指当前只签约，并不付款，根据签约的内容，之后在指定的日期从你的账户扣除相应的款项，大部分签约的时候是不扣款的，只是方便以后实现周期性扣款

该情景调用以下方式

my.paySignCenter

付款并签约

这个是当下我要扣除一笔款项，并且以后也根据当前协议周期扣款，也就是所谓的同步扣款，异步签约

所以两者的本质区别就是此次签约的时候有没有付款

该情景调用以下方式

my.tradePay({
    orderStr: orderStrParam,
    success: (res) => {
	my.alert({
            title: 'Success', // alert框的标题
            	content: JSON.stringify(res),
        });
    },
    fail: (res) => {
        my.alert({
            title: 'Fail', // alert框的标题
            	content: JSON.stringify(res),
        });
    }
});

最开始的时候调用该方式，直接报错，交易失败什么的，还报了错误6001，在开发文档中查到说是用户取消操作，可是我没有取消啊…

在打印orderStrParam的时候发现有点看不懂，想是不是因为参数编码了的缘故，scheme的方式是需要编码的，但是该方法是不是不支持编码

let decodeParam=decodeURIComponent(orderStrParam)

解码后再次调用，发现正常调起付款并签约页面

如果在后续发现提示不支持jsapi，请注意是不是小程序的能力管理里是不是没有添加JSAPI 基础包 功能包导致