Solution de paiement H5 WeChat face à l'échec de l'introduction du package js-sdk de WeChat

Le contenu partagé avec vous dans cet article concerne la solution à l'échec de l'introduction du package js-sdk de WeChat dans le paiement H5 WeChat. Le contenu a une grande valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

Avant-propos

Lors du développement des comptes publics WeChat, je suis tombé dans des pièges car je n'avais jamais été exposé au développement lié à WeChat auparavant. Cependant, cela m'a également fait comprendre WeChat public et WeChat officiel. La familiarité avec la documentation est considérablement accrue.

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

Dans la documentation officielle de WeChat : https://pay.weixin .qq. com/wik...
Il existe une telle DÉMO :

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

Une fois que les collègues back-end ont autorisé avec succès, introduisez ce code dans la page d'activité, soyez heureux, construisez et soumettez pour les tests. Apple Pas de problème, il ne semble y avoir aucun problème avec Android. Cependant, parfois Goose Android ne peut pas ajuster le paiement. Au début, je pensais que c'était dû à la version de WeChat, etc. Cependant, la probabilité d'un ajustement réussi est également. faible. Il ne peut être ajusté qu'une fois toutes les 10 fois, oui, cela doit être dû au code. Changez-le.

Solution :

Ouvrez les outils de développement WeChat, connectez-vous et trouvez enfin cela à cette étape si (typeof WeixinJSBridge == "undefined")
1.ios peut activer WeChat Le js du navigateur -sdk
2. La plupart des appareils Android sont passés à undefined
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 y répondre)
Puisque js-sdk ne peut pas être ajusté, introduisez la configuration manuellement // Donc parfois, être paresseux est plus gênant, apprenez de la leçon

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 présente WeChat js -sdk package

npm i -S weixin-js-sdk

Introduire la configuration du module

import wx from 'weixin-js-sdk'

sur la page qui doit être introduite (voir la documentation officielle de WeChat : 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 类型

Maintenant que la configuration est réussie, continuez à lire la documentation officielle
La documentation officielle dit ceci, il existe une méthode prête, après la vérification de la configuration réussi, l'interface Mettez-le à l'intérieur pour assurer l'exécution.

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

Paramètres introduits dans ready (faites attention au type de données et coopérez bien avec vos collègues back-end - -)

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

Joindre ma démo

dans prêt Les données dans les données Vue sont utilisées et je tombe accidentellement dans le trou indiqué par ceci. Si la liaison n'est pas ajoutée, les paramètres dans wx.chooseWXPay ne peuvent pas obtenir les données demandées au backend. Cela ne pointe pas ici vers VueComponent. Naturellement, je ne peux pas obtenir les données que j'ai attribuées à l'objet tableau this.wx_config après la demande.

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

Résumé :

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

. Recommandations associées :

À propos de la solution à la bordure 1px dans la page mobile H5

À propos de l'introduction du partage de l'affiche WeChat en toile html5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!