H5 WeChat-Zahlungslösung für das Scheitern der Einführung des js-sdk-Pakets von WeChat

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, handelt von der Lösung für das Scheitern der Einführung des js-sdk-Pakets von WeChat in H5 WeChat. Der Inhalt ist von großem Referenzwert und ich hoffe, dass er Freunden in Not helfen kann.

Vorwort

Während der Entwicklung öffentlicher WeChat-Konten bin ich in Fallstricke geraten, weil ich noch nie zuvor mit WeChat-bezogenen Entwicklungen in Berührung gekommen war. Es hat mir jedoch auch geholfen, WeChat öffentlich und WeChat offiziell zu verstehen Die Vertrautheit mit der Dokumentation wird deutlich erhöht.

Falle: Es besteht eine hohe Wahrscheinlichkeit, dass Android die WeChat-Zahlung nicht aktivieren kann (die Einführung des js-sdk-Pakets von WeChat ist fehlgeschlagen)

In der offiziellen Dokumentation von WeChat: https://pay.weixin .qq.com/wik...
Es gibt so eine DEMO:

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      } 
   }); 
}
if (typeof WeixinJSBridge == "undefined"){
   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 ihn erfolgreich autorisiert hat, führen Sie diesen Code auf der Aktivitätsseite ein, freuen Sie sich, erstellen Sie ihn und reichen Sie ihn ein Beim Testen geht es Apple gut, aber manchmal kann Goose Android die Zahlung nicht anpassen, aber die Wahrscheinlichkeit einer erfolgreichen Anpassung ist zu gering Wird alle 10 Mal angepasst, muss dies der Codegrund sein. Ändere es.

Lösung:

Öffnen Sie die WeChat-Entwicklertools, melden Sie sich an und stellen Sie schließlich fest, dass in diesem Schritt if (typeof WeixinJSBridge == "undefiniert")
1.ios WeChat aktivieren kann. Die js des Browsers -sdk
2. Die meisten Android-Geräte sind auf undefiniert umgestiegen
Eigentlich 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 darauf antworten)
Da js-sdk nicht angepasst werden kann, führen Sie die Konfiguration manuell ein //Daher ist es manchmal schwieriger, faul zu sein, lernen Sie aus der Lektion

if (typeof WeixinJSBridge == "undefined"){
    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();
}

Vue führt WeChat js ein- SDK-Paket

npm i -S weixin-js-sdk

Importmodul

import wx from 'weixin-js-sdk'

Konfiguration auf der Seite, die importiert werden muss (siehe offizielle WeChat-Dokumentation: https://mp.weixin.qq.com/wiki... ):

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表 比如我要调用支付接口 那么就是 [chooseWXPay]
});

这里timestamp是小写 s 是小写，数据类型是 int 类型

Nachdem die Konfiguration erfolgreich ist, lesen wir weiter die offiziellen Dokumente
In den offiziellen Dokumenten heißt es: Nachdem die Konfigurationsüberprüfung erfolgreich war, fügen Sie die Schnittstelle ein die Ausführung sicherstellen.

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

Eingeführte Parameter bereit (achten Sie auf den Datentyp und arbeiten Sie gut mit Back-End-Kollegen zusammen - -)

wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});

Fügen Sie meine Demo hinzu

Verwenden Sie Vue-Daten in bereit Die Daten in WXPay sind versehentlich in die dadurch angezeigte Grube gefallen. Wenn bind nicht hinzugefügt wird, können die Parameter in wx.chooseWXPay die vom Backend angeforderten Daten nicht abrufen, sodass die Anforderung natürlich nicht abgerufen werden kann . Schließlich habe ich die Daten des Array-Objekts this.wx_config zugewiesen.

getConfig(){
            wx.config({
                debug: this.wx_config.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: this.wx_config.appId, // 必填，公众号的唯一标识
                timestamp: this.wx_config.timestamp, // 必填，生成签名的时间戳
                nonceStr: this.wx_config.nonceStr, // 必填，生成签名的随机串
                signature:this.wx_config.signature,// 必填，签名
                jsApiList: this.wx_config.jsApiList // 必填，需要使用的JS接口列表
            });
            //微信支付
            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 () {
                        // 支付成功后的回调函数
                        alert("支付成功");
                        window.location.href = "/hd/becomevip";
                    },
                    cancel: function() {
                        alert("支付失败");
                    }
                });
            }.bind(this));
        },

Zusammenfassung:

Es ist immer unvermeidlich, in Fallstricke zu tappen. Um es zusammenzufassen: Tun Sie nicht das Richtige, nur weil Sie Angst vor Ärger haben~

Verwandte Empfehlungen :

Über die Lösung des 1-Pixel-Rands auf der mobilen H5-Seite

Einführung in das Teilen von HTML5-Canvas-WeChat-Postern

Das obige ist der detaillierte Inhalt vonH5 WeChat-Zahlungslösung für das Scheitern der Einführung des js-sdk-Pakets von WeChat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!