ホーム>Web デザインのチュートリアル>HTMLチュートリアル

Html5 WeChat決済の落とし穴を詳しく解説

著者：Eve Cole 更新時間：2025-01-22 08:12:01
序文

WeChat パブリック アカウントの開発中、私はこれまで WeChat 関連の開発の経験がなかったので、落とし穴にはまり、落とし穴にはまりましたが、同時に WeChat パブリックおよび WeChat 公式ドキュメントに精通することができました。

ピットに登るまでの道

落とし穴 1: シングルページ SPA とバックエンド ルーティングの問題

落とし穴 2: Android は WeChat 決済の有効化に失敗する可能性が高い (WeChat の js-sdk パッケージの導入に失敗する)

WeChat の公式ドキュメント: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

次のようなデモがあります。 

 function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId:wx2421b1c4370ec43b, //販売者によって渡された公式アカウントの名前 timeStamp:1395712654, //タイムスタンプ、1970 年からの秒数 nonceStr:e61463f8efa94090b1f366cccfbbb444, //ランダム文字列 package:prepay_id=u802345jgfjsdfgsdg888,signType:MD5, //WeChat 署名方法: paySign:70EA570631E4BB79628FBCA90534C63FF7FADD89 //WeChat 署名}, function(res){ if(res.err_msg == get_brand_wcpay_request:ok ){ //上記のメソッドを使用してフロントエンドのリターンを決定します。 //res を WeChat チームが厳粛に注意します。 err_msg は、ユーザーが正常に支払いを行った場合に使用されますが、完全に信頼できるという保証はありません。 }); }if (typeof WeixinJSBridge == 未定義){ 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 == 未定義){ 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

導入が必要なページにモジュールをインポートします

 「weixin-js-sdk」から wx をインポートします

設定 (WeChat 公式ドキュメントを参照: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115): 

 wx.config({ debug: true, // デバッグモードをオンにします。すべての API 呼び出しの戻り値はクライアント側で警告されます。受信したパラメーターを表示したい場合は、PC 側で開くことができますパラメータ情報はログを通じて出力されます。 appId: '', // 必須、公式アカウントの一意の識別子。 タイムスタンプ: , // 生成された署名のタイムスタンプ。 nonceStr: '', // 必須、生成された署名のタイムスタンプ ランダムな文字列署名: '', // 必須、署名 jsApiList: [] // 必須、使用する必要がある JS インターフェースのリスト たとえば、支払いインターフェースを呼び出したい場合は、[chooseWXPay]});

ここでタイムスタンプは小文字、sは小文字、データ型はint型です。

設定が成功したので、引き続き公式ドキュメントを読みましょう。

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

 wx.ready(function(){ // 設定情報が検証された後に、ready メソッドが実行されます。すべてのインターフェイス呼び出しは、設定インターフェイスが結果を取得した後に行う必要があります。config はクライアント側での非同期操作であるため、ページのロード時に関連するインターフェイスを呼び出す必要がある場合、適切な実行を保証するために、関連するインターフェイスを ready 関数で呼び出す必要があります。ユーザーによってトリガーされた場合にのみ呼び出されるインターフェイスの場合は、直接呼び出すことができ、呼び出す必要はありません。準備完了関数に配置されます。

パラメータをインポートする準備ができています (データ型に注意し、バックエンドの同僚とよく連携してください - -) 

 wx.chooseWXPay({timestamp: 0, // 支払い署名のタイムスタンプ。WeChat jssdk で使用されるタイムスタンプ フィールドはすべて小文字であることに注意してください。ただし、最新バージョンの支払いバックグラウンドで署名を生成するために使用されるタイムスタンプ フィールド名は、S を大文字にする必要があります。文字 nonceStr: '', // 支払い署名のランダムな文字列、32 ビット以下 package: '', //統合支払いインターフェイスによって返される prepay_id パラメータ値。送信形式は次のとおりです: prepay_id=/*/*/*)signType: '', // 署名方法。デフォルトは 'SHA1' であり、' を渡す必要があります。 MD5' (新しいバージョンの支払いを使用する場合) paySign: ' ', // 支払い署名成功: function (res) {// 支払い成功後のコールバック関数}});
私のデモを添付します

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

 getConfig(){ wx.config({ debug: this.wx_config.debug, // デバッグモードをオンにします。呼び出されたすべての API の戻り値がクライアント側でアラートされます。受信パラメータを表示したい場合は、 、PC 側で開くことができます。パラメータ情報はログを通じて出力され、PC 側でのみ出力されます。 appId: this.wx_config.appId, // 必須、公式アカウントのタイムスタンプの一意の識別子。 : this.wx_config.timestamp, //必須、署名タイムスタンプを生成 nonceStr: this.wx_config.nonceStr, // 必須、署名のランダムな文字列を生成 Signature: this.wx_config.signature, // 必須、署名 jsApiList: this.wx_config.jsApiList // 必須使用する必要がある JS インターフェイス}); //WeChat 支払い wx.ready(function() { // console.log(this.jsApiCall()); wx.chooseWXPay({ タイムスタンプ: this.wechat_code.timestamp、nonceStr:this.wechat_code.nonceStr、パッケージ: this.wechat_code.package、signType: this.wechat_code.signType、paySign: this.wechat_code.paySign、成功: function () { // 支払い成功後のコールバック関数 window.location.href = /hd/becomevip; }、キャンセル: function() { アラート(支払い失敗) }.bind(this) };
要約:

要約すると、トラブルが怖いからといって正しいことをしてはいけないということです。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。

関連記事