jssdk支付流程

獲取簽名

import wx from 'weixin-js-sdk'
/*獲取微信配置檔案*/
export const wxConfig=(fn)=>{
  let config = {
    debug: false,
    appId: '',
    timestamp: 0,
    nonceStr: '',
    signature: '',
    jsApiList: [
      'checkJsApi',
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareWeibo',
      'onMenuShareQZone',
      'hideMenuItems',
      'showMenuItems',
      'hideAllNonBaseMenuItem',
      'showAllNonBaseMenuItem',
      'translateVoice',
      'startRecord',
      'stopRecord',
      'onVoiceRecordEnd',
      'playVoice',
      'onVoicePlayEnd',
      'pauseVoice',
      'stopVoice',
      'uploadVoice',
      'downloadVoice',
      'chooseImage',
      'previewImage',
      'uploadImage',
      'downloadImage',
      'getNetworkType',
      'openLocation',
      'getLocation',
      'hideOptionMenu',
      'showOptionMenu',
      'closeWindow',
      'scanQRCode',
      'chooseWXPay',
      'openProductSpecificView',
      'addCard',
      'chooseCard',
      'openCard'
    ]
  }
  let res = http.post('/pay/wxGetsign.json', {url: encodeURIComponent(window.location.href.split('#')[0])})

  res.then((value) => {

    if (value.code == 1) {
      config.appId = value.data.appid;
      config.timestamp = value.data.timestamp;
      config.nonceStr = value.data.nonceStr;
      config.signature = value.data.signature;
      wx.config(config);

      wx.ready(function () {

        console.log('config:ok')

        return fn(wx)
      });
      wx.error(function(err){
        console.log('config:error')
        return fn(null)
      })
    }else{
      console.log('獲取配置檔案失敗')
      return fn(null)
    }
  })

}


 

需要後臺提供一個介面，返回appid``````timestamp``````nonceStr``````signature4個引數，用於wx.config方法。
這裡匯出了wxconfig(fn)方法，引數是一個fn方法,這個方法需要在wx.ready回撥執行，因為wx初始化需要時間

wxconfig回撥方法

wxConfig(function (wx) {
            if (wx) {
              /*獲取支付配置檔案*/

              let res = payConfig({
                channel: this_.payMethod,
                orderCode: this_.orderCode,
                openId: getCookie('openId')
              })
              this_.$vux.loading.hide()
              res.then((con) => {

                if (con.code == 1) {
                  /*sdk支付介面*/
                  wx.chooseWXPay({
                    timestamp: con.data.timeStamp,
                    nonceStr: con.data.nonceStr,
                    package: con.data.package,
                    signType: con.data.signType,
                    paySign: con.data.sign,
                    success: function (res) {
                      /*成功：跳轉到成功頁面*/
                      this_.$router.replace({
                        path: 'payResults',
                        query: { orderCode: this_.orderCode}
                      })

                    },
                    fail: function (res) {

                      alert(JSON.stringify(res))
                      this_.$vux.toast.text('支付失敗')
                    }
                  });
                } else {
                  this_.$vux.toast.text(con.message)
                }
              })
            }
          })
 

這裡有一個payConfig()方法，它是後臺提供的第2個介面，需要openID引數,openID是走微信靜默授權，微信返回的，由前端儲存在cookie或者sessionStorage裡,返回timeStamp``````nonceStr``````package``````signType``````sign,這幾個值都是用來調微信支付的apiwx.chooseWXPay(),到這裡就成功調起了微信支付

流程：靜默授權拿到openID->執行wxConfig(fn),調後臺介面，獲取支付簽名，完成wx.config()，初始化wx->調後臺介面，獲取支付配置檔案，調起支付視窗

靜默授權連結（https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx0e3173583c676805&redirect_uri=http://dfub.staff.xdf.cn/wx/logon.json?type=lecture&response_type=code&scope=snsapi_base&state=http%3A%2F%2Fdfub.staff.xdf.cn%2Fhtml%2Fgzh%2Findex.html%2F%23%2FclassCenter%3Fquarter%3D20194%26activity%3DHBHD184001%26partner%3DHB1811151038855183%26#wechat_redirect） 由微信調後臺介面logon.json介面，返回openID到重定向的地址

需要配置項

1、在微信商戶平臺（pay.weixin.qq.com）設定您的JSAPI支付支付目錄，請確保實際支付時的請求目錄與後臺配置的目錄一致
2、在公眾平臺設定授權域名，用於獲取openId

tips: 安卓版微信直接呼叫系統瀏覽器核心，它是用chrome改造做的一套WKwebView,概念上類似是一套組建, iOS則是呼叫safari。ios的微信不支援localStorage,可以用cookie代替，但是微信退出以後cookie失效