H 5微信は穴を登る道を支払う

前言
微信公衆番号の開発活動では、これまで微信関連の開発に接触したことがなかったため、穴を落としたり、穴を登ったりしましたが、微信公衆と微信公式文書に対する熟知も大幅に増加しました.
坑道を登る
ピット1:単一ページSPAとバックエンドルーティングの問題
これは私が単独でまとめました.https://segmentfault.com/a/11...
ピット2:アンドロイドは微信の支払いに失敗した(微信を導入したjs-sdkパケットに失敗した)
WeChatの公式文書では、https://pay.weixin.qq.com/wik...
このような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();
}

バックエンドの同僚の授権に成功した后、活动ページのページにこのコードを导入して、楽しくて、buildはテストを提出しますうん、アップルは大丈夫です.アンドロイドは大丈夫ですが、ガチョウアンドロイドは时には支払いを调整できないことがあります.微信バージョンの原因だと思っています.他にもありますが、调达に成功する确率はTMが低すぎて、10回で1回调达することができます.コードの原因に違いない.直しましょう.
解決方法:
微信開発者ツールを開き、logを打って、最後にif(typeof WeixinJsBridge="undefined")を発見しました.
1.iosは微信ブラウザのjs-sdkを呼び出すことができる
2.アンドロイドはほとんどundefinedの中に入っています
ここは実は私も原因がよく分かりません.個人的には、微信アンドロイドの内蔵ブラウザバージョンとこのWeixinJSPBridgeメソッドの問題だと思います.(大神様が答えてくれることを願っています)
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は微信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   

次に構成に成功した以上、公式ドキュメントが公式ドキュメントでそう言っているのを見続けます.config検証に成功した後、インタフェースを中に入れて実行を確保する方法があります.

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) {
//           
}
});

本人のdemoを添付します
readyの中でVue dataの中のデータを使って、うっかりthisの指す穴に落ちて、bindをプラスしないならば、wx.chooseWXPayのパラメータはバックエンドリクエストから戻ってきたデータを取得できません.ここのthisは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));
        },

まとめ:
穴を踏むのはいつも避けられない.総括して、面倒を恐れて正しいことをしないでください.