vue+微信公眾號+jssdk調用微信支付

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

    npm install weixin-js-sdk --save

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("支付失敗")
  })
})