react之微信支付

微信SDK官方文檔地址：http://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3

1，第一步需要對單頁面中的用到支付頁面進行config初始化配置，方法如下：

wxConfig({url}).then(res => {
            const data = res.data;
            Wx.config({
                debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                appId: data.appId, // 必填，公眾號的唯一標識
                timestamp:data.timestamp , // 必填，生成簽名的時間戳
                nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
                signature: data.signature,// 必填，簽名
                jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
            });
        })

wxConfig()方法調用后台的接口，獲取配置需要的參數，這一步看是很簡單，但請求參數url是個坑，ios和安卓有很大的差別，解決辦法如下：

//支付時config需要的url
export function getConfigUrl(){
  let u = window.navigator.userAgent;
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
  let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
  //安卓需要使用當前URL進行微信API注冊（即當場調用location.href.split('#')[0]）
  //iOS需要使用進入頁面的初始URL進行注冊，（即在任何pushstate發生前，調用location.href.split('#')[0]）
  let url = '';
  if (isiOS) {
      url = window.sessionStorage.getItem("configUrl");//獲取初始化的url
  } else {
      url = window.location.href.split('#')[0];
  }
  return url;
}

可以看到ios很麻煩，需要在進入的頁面設置一個strorage,儲存當前的url，然后在支付的頁面從stroage再獲取出來傳給后台，所以在index頁面需要加入如下代碼：

window.sessionStorage.setItem("configUrl", window.location.href);

2，當准備工作都做完時，就可以在事件里調用自己的支付接口啦！

getPayData(state).then(res => {
                //console.log(res,'支付數據')
                console.log( res.data.getewayResult.package,'package');
                var dataObj=res.data.getewayResult;
                Wx.chooseWXPay({
                    timestamp:dataObj.timeStamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后台生成簽名使用的timeStamp字段名需大寫其中的S字符
                    nonceStr:dataObj.nonceStr, // 支付簽名隨機串，不長於 32 位
                    package:dataObj.package, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=\*\*\*）
                    signType:dataObj.signType, // 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5'
                    paySign:dataObj.paySign,// 支付簽名
                    success: function (res) {
                        This.setState({
                            paySuccessVisible:true
                        })
                    }
                });
            }).catch(err => {
                Toast.info(err.message);
            })