从零开始：使用 WeixinJSBridge 在 Vue 中轻松集成微信支付

2023-12-28 09:23:38

引言

如今，移动支付已成为现代电子商务不可或缺的一部分，而微信支付在中国拥有庞大的用户群。对于希望进入中国市场的企业来说，集成微信支付是必不可少的。在本文中，我们将重点介绍如何使用 WeixinJSBridge 在 Vue 中集成微信支付。

WeixinJSBridge 简介

WeixinJSBridge 是微信内置浏览器的 JavaScript API，允许开发人员访问各种微信功能，包括支付。它不同于微信 JSSDK，不需要经过复杂的授权流程，因此非常适合需要快速集成的场景。

步骤 1：配置项目

首先，我们需要在项目中安装 Vue 和 WeixinJSBridge。

npm install vue weixin-jsbridge --save

然后，在 Vue 项目的主文件中引入 WeixinJSBridge：

import Vue from 'vue'
import WeixinJSBridge from 'weixin-jsbridge'
Vue.use(WeixinJSBridge)

步骤 2：创建支付按钮事件

当用户点击支付按钮时，我们需要触发支付流程。在 Vue 组件中，我们可以使用 v-on:click 事件侦听器：

<template>
  <button @click="pay">立即支付</button>
</template>

<script>
export default {
  methods: {
    pay() {
      // 这里将发起支付请求
    }
  }
}
</script>

步骤 3：执行支付

在 pay() 方法中，我们将使用 WeixinJSBridge 的 invoke() 方法发起支付请求：

async pay() {
  try {
    // 首先获取微信支付参数
    const payParams = await fetch('/api/pay/params', { method: 'POST' })
      .then(res => res.json())
      .then(data => data.payParams)

    // 使用 WeixinJSBridge 发起支付
    await this.$weixinJSBridge.invoke('chooseWXPay', payParams)
  } catch (error) {
    console.error('微信支付失败：', error)
  }
}