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

在前段时间的开发需要中，有一项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>