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

首先在对我的项目开启领取性能，在我的项目的 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 生成当前返回给前端，这样一来，果然唤起胜利。

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