Vue.js 微信支付前端代码分享攻略

简介

微信支付作为国内移动支付的主流之一，对于很多电商的前端开发来说是必不可少的一步。Vue.js 作为一门快速且易于学习的前端框架，也非常适合用来构建微信支付的功能。

本攻略旨在为 Vue.js 开发者提供微信支付的具体实现方法。

前置条件

在开始之前，请确保您已经实现了微信支付后端与微信公众号的对接，生成了微信支付用的参数，并通过后端将这些参数传递到前端。在 Vue.js 的开发中要使用到以下工具和库：

实现步骤

步骤1：引入JS-SDK文件和微信支付JS API文件

首先，我们需要在页面头部引入微信公众号JS-SDK文件和微信支付JS API文件。这可以通过以下代码完成：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

步骤2：初始化微信JS-SDK

在使用微信JS-SDK之前，我们需要先初始化。初始化的代码如下：

wx.config({
  debug: false,
  appId: 'your_app_id',
  timestamp: 'your_timestamp',
  nonceStr: 'your_nonce_str',
  signature: 'your_signature',
  jsApiList: ['chooseWXPay']
})

在上述代码中，我们需要将 your_app_id、your_timestamp、your_nonce_str 和 your_signature 替换成实际的参数。

步骤3：绑定支付按钮

接下来，我们需要将支付功能与支付按钮绑定。在 Vue.js 中，我们可以使用 v-on:click 指令来实现这一点。

<button v-on:click="handlePay()">支付</button>

在上述代码中，我们将支付按钮的 click 事件绑定到了 handlePay 方法。接下来，我们需要在 Vue.js 中定义这个方法：

handlePay() {
  wx.chooseWXPay({
    appId: 'your_app_id',
    timestamp: 'your_timestamp',
    nonceStr: 'your_nonceStr',
    package: 'your_package',
    signType: 'MD5',
    paySign: 'your_paySign',
    success: function(res) {
      // 支付成功
    },
    cancel: function(res) {
      // 支付取消
     },
     fail: function(res) {
      // 支付失败
     }
  })
}

在上述代码中，我们调用了微信支付的 chooseWXPay 方法，并将实际的参数传递了进去。在支付成功、取消或失败时，将分别调用相应的回调函数。

示例1：支付固定金额

以下是一个示例，演示如何支付固定金额。

methods: {
  handlePay() {
    wx.chooseWXPay({
      appId: 'your_app_id',
      timestamp: 'your_timestamp',
      nonceStr: 'your_nonceStr',
      package: 'your_package',
      signType: 'MD5',
      paySign: 'your_paySign',
      success: function(res) {
        // 支付成功
      },
      cancel: function(res) {
        // 支付取消
       },
       fail: function(res) {
        // 支付失败
       }
    })
  },

  // 获取支付参数
  getPayParams() {
    // 通过后端获取支付参数
    // 此处略去代码...
    const data = {
      prepayid: 'your_prepay_id',
      noncestr: 'your_nonce_str',
      package: 'your_package',
      timestamp: 'your_timestamp',
      sign: 'your_sign'
    }

    // 绑定到Vue实例的数据，方便视图层展示
    this.payParams = data
  }
}

<!-- 展示支付按钮 -->
<button v-on:click="handlePay()">支付</button>

<!-- 以列表的形式展示付款信息 -->
<ul>
  <li v-for="(value, key) in payParams">{{ key }}: {{ value }}</li>
</ul>

<!-- 在钩子函数中获取支付参数 -->
<script>
export default {
  data() {
    return {
      payParams: {} // 支付参数
    }
  },
  mounted() {
    this.getPayParams()
  }
}
</script>

示例2：动态支付金额

以下是另一个示例，演示如何获取并支付动态金额。

methods: {
  handlePay(dynamicAmount) {
    const vm = this
    axios.get('/api/getPayInfo', {
      params: {
        // 传递动态金额参数
        amount: dynamicAmount
      }
    }).then(function(response) {
      let responseData = response.data
      wx.chooseWXPay({
        appId: responseData.appId,
        timestamp: responseData.timestamp,
        nonceStr: responseData.nonceStr,
        package: responseData.package,
        signType: responseData.signType,
        paySign: responseData.paySign,
        success: function(res) {
          // 支付成功
        },
        cancel: function(res) {
          // 支付取消
         },
         fail: function(res) {
          // 支付失败
         }
      })
    })
  }
}

<!-- 展示支付按钮和表单 -->
<form>
  <label>支付金额：</label>
  <input type="text" v-model="amount">

  <!-- 绑定点击事件并传递动态金额 -->
  <button v-on:click="handlePay(amount)">立即支付</button>
</form>

在上述代码中，我们通过表单输入框获取用户输入的动态金额，然后将它传递给支付函数 handlePay。此时，我们需要在后端获取动态金额的支付信息，并且将信息传递到前端进行支付。