Explication détaillée des pièges du paiement HTML5 WeChat

Lors du développement des comptes publics WeChat, je n'avais aucune expérience du développement lié à WeChat auparavant, donc je suis tombé dans des pièges et j'ai grimpé dans des pièges. Cependant, cela a également considérablement accru ma familiarité avec les documents publics et officiels de WeChat.

Piège 1 : problèmes liés au SPA d'une seule page et au routage back-end

Piège 2 : il existe une forte probabilité qu'Android ne parvienne pas à activer le paiement WeChat (échec de l'introduction du package js-sdk de WeChat)

Dans la documentation officielle de WeChat : https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

Il existe une DEMO comme celle-ci :

 function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, //Nom du compte officiel, transmis par le marchand timeStamp:1395712654, //Horodatage, nombre de secondes depuis 1970 nonceStr:e61463f8efa94090b1f366cccfbbb444, //Package de chaînes aléatoires:prepay_id=u802345jgfjsdfgsdg888, signType:MD5, //Méthode de signature WeChat : paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //Signature WeChat}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){ //Utilisez la méthode ci-dessus pour juger du retour frontal L'équipe WeChat rappelle solennellement : //res. err_msg sera utilisé lorsque l'utilisateur paie avec succès. Renvoie ok, mais sa fiabilité n'est pas garantie.} }); }if (typeof WeixinJSBridge == non défini){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady }}else{ onBridgeReady();}

Après que le collègue back-end ait autorisé le code, j'ai introduit ce code sur la page d'activité, avec plaisir, et j'ai soumis la version pour test. Eh bien, Apple n'a aucun problème et Android ne semble pas avoir de problème. Cependant, parfois, Android ne peut pas s'ajuster. le paiement, et j'ai d'abord pensé que c'était la version WeChat. Il y a d'autres raisons, mais la probabilité de succès est trop faible. Cela ne peut être fait qu'une fois toutes les 10 fois. Changez-le.

Ouvrez les outils de développement WeChat, connectez-vous et trouvez enfin cela à cette étape si (type de WeixinJSBridge == non défini)

1.ios peut activer le js-sdk du navigateur WeChat

2. La plupart des androïdes sont devenus indéfinis.

En fait, je ne connais pas la raison ici. Personnellement, je pense que c'est un problème avec la version du navigateur intégré de WeChat Android et la méthode WeixinJSBridge. (j'espère que quelqu'un pourra me répondre)

Puisque js-sdk ne peut pas être ajusté, introduisons la configuration manuellement // Donc, parfois, être paresseux est plus gênant, apprenez de la leçon

 if (typeof WeixinJSBridge == non défini){ console.log( WeixinJSBridge); if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false }else if (document.attachEvent){ document.attachEvent(' WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady }}else{ onBridgeReady();}

 npm i -S weixin-js-sdk

Importez le module dans la page qui doit être introduite

 importer wx depuis 'weixin-js-sdk'

Configuration (voir la documentation officielle de WeChat : https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115) :

 wx.config({ debug: true, // Activer le mode débogage. Les valeurs de retour de tous les appels d'API seront alertées côté client. Si vous souhaitez afficher les paramètres entrants, vous pouvez l'ouvrir côté PC . Les informations sur les paramètres seront sorties via le journal. Elles seront imprimées uniquement côté PC. appId : '', // Obligatoire, l'identifiant unique de l'horodatage du compte officiel : , // Obligatoire, l'horodatage de la signature générée. nonceStr : '', // Obligatoire, l'horodatage de la signature générée Signature de chaîne aléatoire : '', // Obligatoire, signature jsApiList : [] // Obligatoire, liste des interfaces JS qui doivent être utilisées Par exemple, si je souhaite appeler l'interface de paiement, c'est [chooseWXPay]});

Ici, l'horodatage est en minuscule, s en minuscule et le type de données est de type int.

Maintenant que la configuration est réussie, continuez à lire la documentation officielle.

La documentation officielle indique qu'il existe une méthode prête à l'emploi. Une fois la vérification de la configuration réussie, l'interface y est placée pour garantir l'exécution.

 wx.ready(function(){ // La méthode ready sera exécutée une fois les informations de configuration vérifiées. Tous les appels d'interface doivent être effectués une fois que l'interface de configuration a obtenu le résultat. config est une opération asynchrone côté client, donc si vous devez appeler l'interface appropriée lorsque la page est chargée, l'interface appropriée doit être appelée dans la fonction ready pour garantir une exécution correcte. Pour les interfaces qui sont appelées uniquement lorsqu'elles sont déclenchées par l'utilisateur, elles peuvent être appelées directement et n'ont pas besoin de l'être. placé dans la fonction ready });

Importez les paramètres prêts (faites attention au type de données et coopérez bien avec vos collègues back-end - -)

 wx.chooseWXPay({timestamp : 0, // Horodatage de la signature de paiement. Notez que tous les champs d'horodatage utilisés dans WeChat jssdk sont en minuscules. Cependant, le nom du champ timeStamp utilisé par la dernière version de l'arrière-plan de paiement pour générer des signatures doit mettre en majuscule le S caractère nonceStr : '', // Chaîne aléatoire de signature de paiement, ne dépassant pas 32 bits package : '', // La valeur du paramètre prepay_id renvoyée par l'interface de paiement unifiée, le format de soumission est : prepay_id=/*/*/*) signType : '', // La méthode de signature, la valeur par défaut est 'SHA1', et vous devez transmettre ' MD5' lors de l'utilisation de la nouvelle version du paiement paySign : ' ', // Succès de la signature du paiement : fonction (res) {// Fonction de rappel après paiement réussi}});

Lors de l'utilisation des données de Vue dans Ready, je suis accidentellement tombé dans le trou indiqué par ceci. Si la liaison n'est pas ajoutée, les paramètres de wx.chooseWXPay ne peuvent pas obtenir les données demandées au backend. Cela ne pointe naturellement pas vers VueComponent. obtenir les données que j'ai assignées à l'objet tableau this.wx_config après la demande.

 getConfig(){ wx.config({ debug: this.wx_config.debug, // Activez le mode débogage. Les valeurs de retour de toutes les API appelées seront alertées côté client. Si vous souhaitez afficher le paramètres entrants, vous pouvez l'ouvrir côté PC, les informations sur les paramètres seront imprimées via le journal, et ne seront imprimées que côté PC appId : this.wx_config.appId, // Obligatoire, l'identifiant unique du fonctionnaire. horodatage du compte : this.wx_config.timestamp, // Obligatoire, générer un horodatage de signature nonceStr : this.wx_config.nonceStr, // Obligatoire, générer une chaîne aléatoire de signature signature : this.wx_config.signature, // Obligatoire, signature jsApiList : this.wx_config.jsApiList // Obligatoire Remplir la liste des Interfaces JS qui doivent être utilisées}); //Paiement WeChat wx.ready(function() { // console.log(this.jsApiCall()); wx.chooseWXPay({ horodatage : this.wechat_code.timestamp, nonceStr:this.wechat_code.nonceStr, package : this.wechat_code.package, signType : this.wechat_code.signType, paySign : this.wechat_code.paySign, succès : function () { // Fonction de rappel après alerte de paiement réussi (paiement réussi) ; window.location.href = /hd/becomevip; }, annuler : function() { alert(échec du paiement } } }.bind(this));

Il est toujours inévitable de tomber sur des pièges. En résumé, ne faites pas la bonne chose simplement parce que vous avez peur des ennuis~

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.