Ausführliche Erläuterung der Fallstricke der HTML5-WeChat-Zahlung

Während der Entwicklung öffentlicher WeChat-Konten hatte ich zuvor keine Erfahrung mit WeChat-bezogener Entwicklung, sodass ich in Fallstricke geriet und in Fallstricke kletterte. Dadurch wurde jedoch auch meine Vertrautheit mit öffentlichen WeChat-Dokumenten und offiziellen WeChat-Dokumenten erheblich verbessert.

Fallstrick 1: Probleme mit Single-Page-SPA und Back-End-Routing

Fallstrick 2: Es besteht eine hohe Wahrscheinlichkeit, dass Android die WeChat-Zahlung nicht aktivieren kann (das js-sdk-Paket von WeChat konnte nicht eingeführt werden).

In der offiziellen Dokumentation von WeChat: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

Es gibt eine DEMO wie diese:

 function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, //Offizieller Kontoname, vom Händler übergeben timeStamp:1395712654, //Zeitstempel, Anzahl der Sekunden seit 1970 nonceStr:e61463f8efa94090b1f366cccfbbb444, //Zufällige Zeichenfolge package:prepay_id=u802345jgfjsdfgsdg888, signType:MD5, //WeChat-Signaturmethode: paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //WeChat-Signatur}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){ //Verwenden Sie die obige Methode, um die Front-End-Rückgabe zu beurteilen. Das WeChat-Team erinnert feierlich daran: //res. err_msg wird verwendet, wenn der Benutzer erfolgreich bezahlt, es ist jedoch nicht garantiert, dass es absolut zuverlässig ist. }); }if (typeof WeixinJSBridge == undefiniert){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); }}else{ onBridgeReady();}

Nachdem der Back-End-Kollege den Code erfolgreich autorisiert hat, habe ich diesen Code glücklich auf der Aktivitätsseite eingeführt und den Build zum Testen eingereicht. Nun, Apple hat kein Problem, und Android scheint kein Problem zu haben. Manchmal kann sich Android jedoch nicht anpassen Die Zahlung, und ich dachte zunächst, es sei die WeChat-Version, aber die Erfolgswahrscheinlichkeit ist zu gering. Es muss am Code liegen. Ändere es.

Öffnen Sie die WeChat-Entwicklertools, loggen Sie sich ein und finden Sie schließlich in diesem Schritt heraus, ob (typeof WeixinJSBridge == undefiniert)

1.ios kann das js-sdk des WeChat-Browsers aktivieren

2. Die meisten Android-Geräte sind auf „undefiniert“ umgestellt.

Tatsächlich kenne ich hier den Grund nicht. Persönlich glaube ich, dass es ein Problem mit der integrierten Browserversion von WeChat Android und der WeixinJSBridge-Methode ist. (Ich hoffe, jemand kann mir eine Antwort geben)

Da js-sdk nicht angepasst werden kann, führen wir die Konfiguration manuell ein // Daher ist es manchmal problematischer, faul zu sein, lernen Sie aus der Lektion

 if (typeof WeixinJSBridge == undefiniert){ 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

Importieren Sie das Modul in die Seite, die eingeführt werden muss

 wx aus 'weixin-js-sdk' importieren

Konfiguration (siehe offizielle WeChat-Dokumentation: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115):

 wx.config({ debug: true, // Debugging-Modus aktivieren. Die Rückgabewerte aller API-Aufrufe werden auf der Clientseite benachrichtigt. Wenn Sie die eingehenden Parameter anzeigen möchten, können Sie sie auf der PC-Seite öffnen . Die Parameterinformationen werden nur auf der PC-Seite ausgegeben. appId: '', // Erforderlich, der Zeitstempel des offiziellen Kontos nonceStr: '', // Erforderlich, der Zeitstempel der generierten Signatur. Zufällige Zeichenfolgensignatur: '', // Erforderlich, Signatur jsApiList: [] // Erforderlich, Liste der JS-Schnittstellen, die verwendet werden müssen. Wenn ich beispielsweise die Zahlungsschnittstelle aufrufen möchte, ist sie [chooseWXPay]});

Hier ist der Zeitstempel in Kleinbuchstaben, s in Kleinbuchstaben und der Datentyp ist der Typ int.

Nachdem die Konfiguration nun erfolgreich ist, lesen Sie weiter in der offiziellen Dokumentation.

In der offiziellen Dokumentation heißt es, dass es eine fertige Methode gibt. Nach erfolgreicher Konfigurationsüberprüfung wird die Schnittstelle darin platziert, um die Ausführung sicherzustellen.

 wx.ready(function(){ // Die Ready-Methode wird ausgeführt, nachdem die Konfigurationsinformationen überprüft wurden. Alle Schnittstellenaufrufe müssen durchgeführt werden, nachdem die Konfigurationsschnittstelle das Ergebnis erhalten hat. config ist ein asynchroner Vorgang auf der Clientseite. Wenn Sie also Beim Laden der Seite muss die entsprechende Schnittstelle aufgerufen werden. Die entsprechende Schnittstelle muss in der Ready-Funktion aufgerufen werden, um eine korrekte Ausführung sicherzustellen. Bei Schnittstellen, die nur aufgerufen werden, wenn sie vom Benutzer ausgelöst werden, kann dies nicht unbedingt der Fall sein in der Ready-Funktion platziert });

Importieren Sie Parameter in Bereitschaft (achten Sie auf den Datentyp und arbeiten Sie gut mit Back-End-Kollegen zusammen - -)

 wx.chooseWXPay({timestamp: 0, // Zeitstempel der Zahlungssignatur. Beachten Sie, dass alle in WeChat jssdk verwendeten Zeitstempelfelder Kleinbuchstaben sind. Der Name des timeStamp-Feldes, der von der neuesten Version des Zahlungshintergrunds zum Generieren von Signaturen verwendet wird, muss jedoch das S großschreiben Zeichen nonceStr: '', // Zufällige Zeichenfolge der Zahlungssignatur, nicht länger als 32 Bit Paket: '', // Der Parameterwert prepay_id wird von der einheitlichen Zahlungsschnittstelle zurückgegeben. Das Übermittlungsformat lautet: prepay_id=/*/*/*) signType: '', // Die Signaturmethode, der Standardwert ist 'SHA1', und Sie müssen ' übergeben MD5' bei Verwendung der neuen Zahlungsversion paySign: ' ', // Zahlungssignaturerfolg: Funktion (res) {// Rückruffunktion nach erfolgreicher Zahlung}});

Bei der Verwendung der Daten in Vue-Daten bin ich versehentlich in die dadurch angezeigte Grube geraten. Wenn Bind nicht hinzugefügt wird, können die Parameter in wx.chooseWXPay die vom Backend angeforderten Daten nicht abrufen. Dies bedeutet hier natürlich nicht, dass dies der Fall ist Rufen Sie nach der Anfrage die Daten ab, die ich dem Array-Objekt this.wx_config zugewiesen habe.

 getConfig(){ wx.config({ debug: this.wx_config.debug, // Schalten Sie den Debug-Modus ein. Die Rückgabewerte aller aufgerufenen APIs werden auf der Clientseite benachrichtigt. Wenn Sie die anzeigen möchten Eingehende Parameter können auf der PC-Seite geöffnet werden. Die Parameterinformationen werden über das Protokoll gedruckt und nur auf der PC-Seite gedruckt appId: this.wx_config.appId, // Erforderlich, die eindeutige Kennung des Beamten Konto-Zeitstempel: this.wx_config.timestamp, // Erforderlich, Signaturzeitstempel generieren nonceStr: this.wx_config.nonceStr, // Erforderlich, zufällige Signaturzeichenfolge generieren Signatur: this.wx_config.signature, // Erforderlich, Signatur jsApiList: this.wx_config.jsApiList // Erforderlich Füllen Sie die Liste aus Zu verwendende JS-Schnittstellen}); //WeChat payment wx.ready(function() { // console.log(this.jsApiCall()); wx.chooseWXPay({ timestamp: this.wechat_code.timestamp, nonceStr:this.wechat_code.nonceStr, package: this.wechat_code.package, signType: this.wechat_code.signType, paySign: this.wechat_code.paySign, success: function () { // Rückruffunktion nach erfolgreicher Zahlungsbenachrichtigung (Zahlung erfolgreich); /hd/becomevip; }, cancel: function() { warning( payment failed } });

Es ist immer unvermeidlich, auf Fallstricke zu stoßen. Zusammenfassend gilt: Tun Sie nicht das Richtige, nur weil Sie Angst vor Ärger haben

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.