WeChat の js-sdk パッケージ導入の失敗に対する H5 WeChat 決済ソリューション

この記事で共有した内容は、H5 WeChat 決済における WeChat の js-sdk パッケージ導入の失敗に対する解決策に関するものであり、非常に参考になる内容であり、困っている友人に役立つことを願っています。

前書き

WeChat パブリック アカウントの開発活動において、私はこれまで WeChat 関連の開発に触れたことがなかったので、落とし穴にはまり、這いずりながらも WeChat パブリックと WeChat 公式についての知識が大幅に増えました。書類。

落とし穴: Android は、WeChat 支払いの有効化に失敗する可能性が高くなります (WeChat の js-sdk パッケージの導入に失敗します)

WeChat の公式ドキュメント: https://pay.weixin.qq.com/wik...
はいこのようなデモ:

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

バックエンドの同僚が正常に承認した後、アクティビティ ページにこのコードを導入し、喜んでビルドしてテスト用に送信します。まあ、Apple には問題がなく、Android にも問題はないようですが、場合によっては Android も問題ありません。支払いに関しては、最初はWeChatのバージョンか何かのせいだと思いましたが、10回に1回しか呼び出すことができません。それはコードが原因であるに違いありません。それを変更。

解決策:

WeChat 開発者ツールを開き、ログを記録し、このステップで if (typeof WeixinJSBridge == "unknown") を確認します
1.ios は WeChat ブラウザーの js-sdk を呼び出すことができます
2 Android のほとんど。それらは未定義になりました
実際のところ、ここでの理由はわかりません。個人的には、Android の WeChat の組み込みブラウザ バージョンと WeixinJSBridge メソッドに問題があると感じています。 (誰かが答えてくれると嬉しいです)
js-sdk は調整できないので、設定を手動で導入してください //だから、怠惰であることの方が面倒なので、教訓から学びましょう

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 が WeChat js-sdk パッケージを導入します

npm i -S weixin-js-sdk

インポートされたページは、モジュール

import wx from 'weixin-js-sdk'

設定をインポートします (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 类型

設定が成功したので、続けて読みます。公式ドキュメント
公式ドキュメントには、設定の検証が成功した後、実行を保証するためにインターフェイスが配置される準備ができていると記載されています。

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

Readyでパラメータを導入しました（データ型に注意して、バックエンド仲間とうまく連携してください - -）

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

私のデモを添付します

ReadyでVueデータを使用して、うっかりポイントに落ちましたこのPitfallが指すように、bindを追加しないとwx.chooseWXPayのパラメータはバックエンドから要求されたデータを取得できなくなります。これは当然ながらVueComponentを指すものではありません。リクエストの後に this.wx_config 配列オブジェクトに割り当てました。

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

まとめ:

落とし穴を踏むのは避けられないことです。要約すると、トラブルを恐れて正しいことをしないでください~

関連する推奨事項:

の1pxの境界線の解決策について。モバイルH5ページ

HTML5キャンバスWeChatポスターの共有導入について

以上がWeChat の js-sdk パッケージ導入の失敗に対する H5 WeChat 決済ソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。