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

在前段时间的开发需要中，有一项uniapp H5和APP端接入支付宝性能的需要，尽管这项性能前端的工作并不多，但还是依据这次的开发教训和踩过的坑做一个分享。

首先在对我的项目开启领取性能，在我的项目的manifest.json文件中勾选APP模块配置中的Payment领取模块，并且勾选支付宝领取和上面列出的ios和Android

依据须要在h5跟APP端都做支付宝的唤起领取，唤起orderInfo 的格局在APP和h5上有很大的差别，在这一点上节约了一些工夫,在此贴出支付宝的文档

支付宝开发文档

H5端唤起支付宝。所须要的参数是后端返回的一个form表单，获取胜利后端返回的内容当前将表单内容用v-html置入标签中，而后提交表单便会执行唤起
针对于支付宝领取的应用，截取外围代码如下

<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>

其实开发实现当前发现APP端唤起支付宝更为简略，然而这个过程中踩过一个坑，我认为orderInfo的值能够参照文档和后端给的一些键值对在前端本人拼接，然而总是唤起失败，起初分割支付宝的蚂蚁技术支持核心的客服，通过沟通当前，才晓得这个orderInfo必须在后端用支付宝SDK生成当前返回给前端，这样一来，果然唤起胜利。