vue3前端实现微信支付详细步骤

import wx from 'weixin-js-sdk'

export default {
  // 获取微信支付SDK的签名
  getWxPaySign (params) {
    return new Promise((resolve) => {
      // 发起请求获取签名
      axios.post('/api/pay/get-wx-pay-sign', params).then((data) => {
        if (data.code === 200) {
          // 配置微信JS SDK
          wx.config({
            debug: false,
            appId: '你的appId',
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: [
              'chooseWXPay'
            ]
          })
          // 配置完成后返回一个resolve
          wx.ready(() => {
            resolve()
          })
        }
      })
    })
  },

  // 发起微信支付
  wxPay (params) {
    return new Promise((resolve, reject) => {
      // 调用微信支付
      wx.chooseWXPay({
        timestamp: params.timestamp,  
        nonceStr: params.nonceStr,  
        package: params.package,  
        signType: params.signType,  
        paySign: params.paySign,  
        success: (res) => {
          // 支付成功时返回resolve
          resolve(res)
        },
        fail: (err) => {
          // 支付失败时返回reject
          reject(err)
        }
      })
    })
  }
}

<template>
  <div class="pay-page">
    <div class="price">{{ price }}元</div>
    <button class="pay-btn" @click="goPay">去支付</button>
  </div>
</template>

<script>
import wxPay from './wxPay'

export default {
  data () {
    return {
      price: 0,
      userId: ''
    }
  },
  mounted () {
    // 获取微信支付SDK的签名
    wxPay.getWxPaySign({
      price: this.price,
      userId: this.userId
    }).then(() => {
      // 配置成功后发起微信支付
      this.goPay()
    })
  },
  methods: {
    // 去支付
    goPay () {
      wxPay.wxPay({
        timestamp: this.timestamp,  
        nonceStr: this.nonceStr,  
        package: this.package,  
        signType: this.signType,  
        paySign: this.paySign
      }).then((res) => {
        // 支付成功
        console.log(res)
      }).catch((err) => {
        // 支付失败
        console.log(err)
      })
    }
  }
}
</script>

<style>
.pay-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.price, .pay-btn {
  margin-bottom: 20px;
  font-size: 24px;
}

.pay-btn {
  width: 100px;
  height: 50px;
  background-color: #4caf50;
  border: none;
  border-radius: 5px;
  color: #fff;
}
</style>