uniapp支付宝支付の先端開発経験の共有

4834 ワード

この間の開発需要の中で、uniapp H 5とアプリ側が支付宝機能にアクセスする需要があり、この機能の先端の仕事は多くないが、今回の開発経験と踏んだ穴に基づいて共有している.
まず、プロジェクトに対して支払い機能を開き、プロジェクトのmanifestにある.jsonファイルでは、APPモジュール構成のPayment支払モジュールをチェックし、支付宝支払と以下に示すiosとAndroidをチェックします.
必要に応じてh 5とアプリ側で支付宝の喚起支払いを行い、orderInfoを喚起するフォーマットがアプリとh 5で大きく異なる点で時間を浪費し、支付宝のドキュメントを貼る
アリペイ開発文書
H 5端は支付宝を呼び起こす.必要なパラメータはバックエンドが返すformフォームで、成功したバックエンドが返す内容を取得した後、フォームの内容をv-htmlでラベルに入れ、フォームを提出すると支付宝の支払いに対する呼び出し針の使用を実行し、コアコードを切り取る.


    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;
                    }
                })
            }
        }
    }

実は開発が終わった後にAPPの端が支付宝を呼び起こすのがもっと簡単であることを発見して、しかしこの過程の中で1つの穴を踏んだことがあって、orderInfoの値はドキュメントと後端の与えるいくつかのキーの値を参照して先端で自分でつなぎ合わせることができると思って、しかしいつも失敗を呼び起こして、それから支付宝のアリの技術サポートセンターのカスタマーサービスに連絡して、疎通を経てから、やっとこのorderInfoが後端で支付宝SDKで生成した後に先端に戻らなければならないことそうなると、やはり成功を呼び起こす.