uniapp支付宝支付的前端开发经验分享

Posted 2021-09-03 CRMEB

在前段时间的开发需求中，有一项uniapp H5和APP端接入支付宝功能的需求，虽然这项功能前端的工作并不多，但还是根据这次的开发经验和踩过的坑做一个分享。

<font face="黑体">首先在对项目开启支付功能，在项目的manifest.json文件中勾选APP模块配置中的Payment支付模块，并且勾选支付宝支付和下面列出的ios和android</font>

<font face="黑体">根据需要在h5跟APP端都做支付宝的唤起支付，唤起orderInfo 的格式在APP和h5上有很大的差异，在这一点上浪费了一些时间,在此贴出支付宝的文档</font>

支付宝开发文档

<font face="黑体">H5端唤起支付宝。所需要的参数是后端返回的一个form表单，获取成功后端返回的内容以后将表单内容用v-html置入标签中，然后提交表单便会执行唤起</font>
<font face="黑体">针对于支付宝支付的使用，截取核心代码如下</font>

<template>
    <view>
    <!-- 省略无关内容 -->
        <view class="alipaysubmit" v-html="formContent"></view>
    </view>
</template>
<script>
    export default {
        data(){
            return {
                formContent:\'\'
            }
        },
        methods:{
            getOrderPay: function(orderNo, message) {
                let that = this; 
                let goPages = \'/pages/order_pay_status/index?order_id=\' + orderNo + \'&msg=\' + message;
                wechatOrderPay({
                    orderNo: orderNo,
                    payChannel: that.payChannel,
                    payType: that.payType,
                    scene: that.productType===\'normal\'? 0 :1177 //下单时小程序的场景值
                }).then(res=>{
                    switch (res.data.payType) { //支付类型
                        case \'alipay\': //支付宝支付
                            //#ifdef H5
                            if (this.$wechat.isWeixin()) {
                                uni.redirectTo({
                                    url: `/pages/users/alipay_invoke/index?id=${orderNo}`
                                    //公众号中使用支付宝支付是做了一个到浏览器中支付的引导，因为微信浏览器不支持唤起支付宝
                                });
                            } else {
                                //h5支付
                                uni.hideLoading();
                                that.formContent = res.data.alipayRequest; //后端给的form表单，也是唤起支付宝的关键
                                that.$nextTick(() => {
                                    document.forms[\'punchout_form\'].submit(); 
                                    //这里就是提交表单唤起支付宝，中括号中的name名称，要与后端给的form表单name名称一致，
                                })
                            }
                            //#endif
                            // #ifdef APP-PLUS
                            let alipayRequest = res.data.alipayRequest; 
                            uni.requestPayment({
                                provider: \'alipay\', 
                                orderInfo: alipayRequest, //APP端唤起支付宝所需的orderInfo,数据类型为string
                                success: (e) => {
                                    uni.showToast({
                                        title: "支付成功"
                                    })
                                    setTimeout(res => {
                                        uni.navigateTo({
                                            url:\'/pages/users/alipay_return/alipay_return?out_trade_no=\' + orderNo + \'&payChannel=\' + \'appAlipay\'
                                        })
                                    }, 1000) 
                                },
                                fail: (e) => {
                                    uni.showModal({
                                        content: "支付失败",
                                        showCancel: false,
                                        success: function(res) {
                                            if (res.confirm) {
                                                //点击确认的操作
                                                uni.navigateTo({
                                                    url:\'/pages/users/alipay_return/alipay_return?out_trade_no=\' + orderNo + \'&payChannel=\' + \'appAlipay\'
                                                })
                                            } else if (res.cancel) {
                                                
                                            }
                                        }
                                    })
                                },
                                complete: () => {
                                    uni.hideLoading();
                                },
                            });
                            // #endif
                            break;
                    }
                })
            }
        }
    }
</script>

<font face="黑体">其实开发完成以后发现APP端唤起支付宝更为简单，但是这个过程中踩过一个坑，我以为orderInfo的值可以参照文档和后端给的一些键值对在前端自己拼接，但是总是唤起失败，后来联系支付宝的蚂蚁技术支持中心的客服，经过沟通以后，才知道这个orderInfo必须在后端用支付宝SDK生成以后返回给前端，这样一来，果然唤起成功。</font>