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失效