Implémenter le paiement WeChat|Alipay dans uni-app

1. Logique principale

1. Ce que vous devrez peut-être payer

Modes de paiement【WeChat】【Alipay】
le montant payé
titre de la commande
numéro de commande
La durée de validité de la commande
Payer pour compléter le lien de saut

2. Payez

2.1. Lorsque vous cliquez sur Acheter maintenant, vous souhaitez envoyer une requête ajax au backend et le processus complet de transmission des informations dans la requête

ajax({
	url:'xxxx',   =====》前端给后端传递的数据
	data:{
		用户id,
		****订单的金额
		****订单的商品系类
	},
	success:function(){  ===》后端给前端返回的数据
		if(data.xxx){
			data是一个对象，通常含有订单号
			然后跳转到确认订单页面
		}
		
	}

})

2.2. Confirmer la page de commande ===>Cliquez pour soumettre la commande===>Sélectionnez le mode de paiement (la demande sera envoyée avant le paiement)

2.2.1 Revérifier si le choix de l'utilisateur est cohérent avec la méthode retournée par le backend

````
ajax({
	data:{  ===>前端给后端传递数据
		appid:'已经准备好的（通常是公司申请的id（用来收钱的）'
		订单号
		选择了那种支付方式
	},
	success:function(){
		1.后端会返回true，代表可以支付了
		2.还会返回一个标示（那种支付方式
		if(后端给前端传递的哪种支付方式===用户点击的哪种支付方式){
			//成立情况下，则开始发起支付的请求（这时候需要对接支付宝或微信支付官方了）
			发起支付	
		}
		
	}
})
````

2.2.2 Amarrage du paiement officiel

Transmettez certaines des données obtenues au responsable du paiement Alipay|WeChat

Résumé 1 : Lorsque l'utilisateur clique pour acheter, la demande de paiement n'est pas immédiatement invoquée, mais la demande est envoyée au backend, et le backend renvoie le numéro de commande. Le sens de renvoyer le numéro de commande est que lorsque l'utilisateur clique pour soumettre la commande, le numéro de commande est transmis au backend pour connaître l'état de la commande, et en même temps, le backend est informé du mode de paiement sélectionné par l'utilisateur, et enfin le backend effectue la vérification de retour. Enfin, envoyez la demande de paiement en fonction des données renvoyées par le backend (docking official) - cette demande de paiement est généralement packagée, il vous suffit de transmettre quelques données

Une fois que le serveur frontal a obtenu le numéro de commande, il envoie une demande au serveur principal.

3. Utilisation dans uni-app :

Tout ce que le frontal a à faire est de :

Demandez l'interface backend et obtenez les informations de commande (informations de commande).Selon les informations officielles sur la nouvelle commande, ces informations de commande sont une chaîne directement épissée par le backend, et le frontend n'a pas besoin d'autres opérations.
API de paiement d'appel : uni.requestPayMent
gérer le rappel

Attention au problème :

Le format de la commande est renvoyé par le backend, et le frontend n'a besoin d'effectuer aucun traitement.Peu importe le type de paiement, les informations de la commande sont l'habitude de la classe strng
L'identifiant de paiement WeChat dans mainfest.json dans uni-app doit être ajouté à l'appid appliqué pour le paiement de l'application mobile sur la plate-forme de développement WeChat, car plusieurs appids peuvent être rencontrés, et cela a pris beaucoup de temps pour cette raison.
Lors de la demande de paiement mobile sur la plate-forme ouverte, le nom du package de candidature peut être choisi par vous-même et la signature de la candidature doit être générée conformément aux instructions de WeChat ou d'un certificat généré en ligne (le certificat peut être une signature générée par md5) , tout en minuscules sans deux-points - cette étape Semblable à l'appel de la configuration dans la carte Gaode
Le seul numéro de commande du marchand est pour l'ensemble du projet, il peut y avoir plusieurs enregistrements de transaction et le numéro de commande ne peut pas être répété

//微信orderinfo格式   
 "{\"appid\":\"xxxxxxxx\",\"partnerid\":\"xxxxxxx\",\"prepayid\":\"xxxxxxxxxxxxxxxx\",\"timestamp\":\"1579779903\",\"noncestr\":\"xxxxxxx\",\"package\":\"Sign": "WXPay\",\"sign\":\"xxxxxxxxxxxxxxxxxxxx\"}"  


//支付宝orderinfo格式  
app_id=xxxxxxxxx&method=xxxxxxxxxx&format=JSON&charset=UTF-8&sign_type=RSA2&version=1.0&return_url=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&notify_url=xxxxx&timestamp=xxxxxx&sign=xxxxxxx&biz_content=xxxxxxxxxx

Code principal:

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="uni-padding-wrap">
            <view style="background:#FFF; padding:50upx 0;">
                <view class="uni-hello-text uni-center">支付金额</text></view>
                <view class="uni-h1 uni-center uni-common-mt">
                    <text class="rmbLogo">￥</text>
                    <input class="price" type="digit" :value="price" maxlength="4" @input="priceChange" />
                </view>
            </view>
            <view class="uni-btn-v uni-common-mt">
                <!-- #ifdef APP-PLUS -->
                <template v-if="providerList.length > 0">
                    <button v-for="(item,index) in providerList" :key="index" @click="requestPayment(item,index)"
                        :loading="item.loading">{
   
   {item.name}}支付</button>
                </template>
                <!-- #endif -->
            </view>
        </view>
    </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'request-payment',
                loading: false,
                price: 1,
                providerList: []
            }
        },
        onLoad: function() {
            // #ifdef APP-PLUS
            uni.getProvider({
                service: "payment",
                success: (e) => {
                    console.log("payment success:" + JSON.stringify(e));
                    let providerList = [];
                    e.provider.map((value) => {
                        switch (value) {
                            case 'alipay':
                                providerList.push({
                                    name: '支付宝',
                                    id: value,
                                    loading: false
                                });
                                break;
                            case 'wxpay':
                                providerList.push({
                                    name: '微信',
                                    id: value,
                                    loading: false
                                });
                                break;
                            default:
                                break;
                        }
                    })
                    this.providerList = providerList;
                },
                fail: (e) => {
                    console.log("获取支付通道失败：", e);
                }
            });
            // #endif
        },
        methods: {
            async requestPayment(e, index) {
                this.providerList[index].loading = true;
                let orderInfo = await this.getOrderInfo(e.id);
                console.log("得到订单信息", orderInfo);
                if (orderInfo.statusCode !== 200) {
                    console.log("获得订单信息失败", orderInfo);
                    uni.showModal({
                        content: "获得订单信息失败",
                        showCancel: false
                    })
                    return;
                }
                uni.requestPayment({
                    provider: e.id,
                    orderInfo: orderInfo.data.data,
                    success: (e) => {
                        console.log("success", e);
                        uni.showToast({
                            title: "感谢您的赞助!"
                        })
                    },
                    fail: (e) => {
                        console.log("fail", e);
                        uni.showModal({
                            content: "支付失败,原因为: " + e.errMsg,
                            showCancel: false
                        })
                    },
                    complete: () => {
                        this.providerList[index].loading = false;
                    }
                })
            },
            getOrderInfo(e) {
                let appid = "";
                // #ifdef APP-PLUS
                appid = plus.runtime.appid;
                // #endif
                let url = 'http://10.10.60.200:8070/sc-admin/sales/wx/prepay/?brokerId=shba01';
                return new Promise((res) => {
                    uni.request({
                        url: url,
                        success: (result) => {
                            res(result);
                        },
                        fail: (e) => {
                            res(e);
                        }
                    })
                })
            },
            priceChange(e) {
                console.log(e.detail.value)
                this.price = e.detail.value;
            }
        }
    }
</script>

<style>
    .rmbLogo {
        font-size: 40upx;
    }

    button {
        background-color: #007aff;
        color: #ffffff;
    }

    .uni-h1.uni-center {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }

    .price {
        border-bottom: 1px solid #eee;
        width: 200upx;
        height: 80upx;
        padding-bottom: 4upx;
    }

    .ipaPayBtn {
        margin-top: 30upx;
    }
</style>

Une version concise du code de compréhension :

uni.requestPayment({  
    provider: 'alipay',  
    orderInfo: '后端返回的orderinfo字符串',  
    success: res => {  
        // 进入此回调说明支付成功  
    },  
    fail: err => {  
        const message = err.errMsg || '';  
        if (message.indexOf('[payment支付宝:62001]') !== -1) {  
            uni.showModal({  
                content: '您已取消支付。如有需要，您可在我的订单里重新付款。30分钟内有效。',  
                showCancel: false  
            });  
        } else {  
            uni.showModal({  
                content: '支付失败,原因为: ' + message,  
                showCancel: false  
            });  
        }  
    },  
    complete: () => {  
        this.submitting = false;  
        }  
    });