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

不言
リリース: 2018-07-24 10:18:57
オリジナル
3241 人が閲覧しました

この記事で共有した内容は、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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!