vue+微信公众号+jssdk调用微信支付

Posted 2020-11-22 写最骚的代码

1、首先要依赖微信js-sdk

    npm install weixin-js-sdk

2、封装代码

import wx from "weixin-js-sdk";

export function wexinPay(data) {
  return new Promise((resolve, reject) => {
    //后台传入数据
    let {
      appId,
      timestamp,
      nonceStr,
      signature,
      packages,
      paySign,
      signType
    } = data
//验证微信环境
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: appId, // 必填，公众号的唯一标识
      timestamp: timestamp, // 必填，生成签名的时间戳
      nonceStr: nonceStr, // 必填，生成签名的随机串
      signature: signature, // 必填，签名，见附录1
      jsApiList: [‘chooseWXPay‘] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function() {
      wx.chooseWXPay({
        timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
        package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
        signType: signType, // 签名方式，默认为‘SHA1‘，使用新版支付需传入‘MD5‘
        paySign: paySign, // 支付签名
        success: function(res) {
          // 支付成功后的回调函数
          resolve(res)
        },
        fail: function(res) {
          //失败回调函数
          reject({
            payFail: res
          })
        }
      });
    });
    wx.error(function(res) {
      reject({
        configFail: res
      })
      // config信息验证失败会执行error函数
    });
  })

}

3、调用支付

//引入
import { wexinPay } from "@/plugins/wechatPay"
//根据订单信息从后台获取微信配置参数(和后台商定数据格式,作相应的处理)
payOrder(data).then(res=>{
  //调用封装的支付函数
  wexinPay(res.data).then(res=>{
    console.log("支付成功")
  }).catch(err=>{
    console.log("支付失败")
  })
})