Vue微信公众号H5页面支付

记录一下微信公众号H5支付
封装到了一个js内

import wx from 'weixin-js-sdk'
import router from '@/router/index'

const handlePayment = res => {
  if (res.errMsg === 'chooseWXPay:ok') {
    router.replace('/success')
  } else if (res.err_msg === 'chooseWXPay:cancel') {
    router.replace({
      path: '/fail',
      query: {
        failure: '用户取消支付'
      }
    })
  } else {
    router.replace({
      path: '/fail',
      query: {
        failure: '支付失败'
      }
    })
  }
}

export const callWxPay = (config) => {
  wx.config({
    debug: false, // true:调试时候弹窗
    appId: config.appId // 微信appid
  })
  wx.ready(function () {
    wx.chooseWXPay({
      appId: config.appId, // 微信appid
      timestamp: config.timestamp, // 时间戳
      nonceStr: config.nonceStr, // 随机字符串
      package: config.package, //
      signType: config.signType, // 签名
      paySign: config.paySign, // 支付签名
      success: function (res) {
        // console.log('success', res)
        handlePayment(res)
      },
      cancel: function (res) {
        // console.log('cancel', res)
        handlePayment(res)
      },
      fail: function (res) {
        // console.log('fail', res)
        handlePayment(res)
      }
    })
  })
}