【微信小程序】封装公共支付方法并唤起支付

最新推荐文章于 2025-05-13 11:06:03 发布

原创最新推荐文章于 2025-05-13 11:06:03 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #前端

web前端同时被 3 个专栏收录

79 篇文章

订阅专栏

JavaScript

64 篇文章

订阅专栏

小程序

4 篇文章

订阅专栏

这篇文章展示了如何在微信开发者工具中处理支付功能。当用户点击支付按钮时，程序通过异步函数调用后端接口获取支付参数，然后使用这些参数调用封装好的`wxPayMethod`进行微信支付。支付成功或失败时，都有对应的回调处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图，微信开发者工具示例

在这里插入图片描述

调用后端接口获取支付参数
使用获取的参数唤起微信支付组件

// 支付按钮点击事件
  async handlePay() {
    let openId = wx.getStorageSync('openid')
    // 在这里请求后端接口获取支付参数
    let res = await orderApply({
      openId,
      orderId: this.data.orderId,
      payType: 6,
      payAmount: this.data.orderAmount
    })
    // 这里使用 try catch 的作用就是接收Promise的回调 如果 reject 会直接进入 catch 中
    try {
    // 调用封装的支付方法
      await wxPayMethod(res.data)
      // 成功后执行的事件
      let res_redirect = await checkOrderStatus({ id: this.data.orderId })
      if (res_redirect.code != 200) return wx.showToast({ title: res_redirect.message, icon: 'none' })
      return wx.navigateTo({ url: '/pages/addpatient/index?type=4' })
    } catch (err) {
      wx.showToast({ title: err, icon: 'none' })
    }
},

wxPay.js

export const wxPayMethod = data => {
  return new Promise((reslove, reject) => {
    if (!data) return reject('缺少支付参数')
    let paymentM = { timeStamp: '', nonceStr: '', package: '', signType: '', paySign: '' }
    for (let key in paymentM) {
      if (data[key]) {
        paymentM[key] = data[key]
      }
    }
    wx.requestPayment(
      {
        timeStamp: data.timeStamp,
        nonceStr: data.nonceStr,
        package: data.package,
        signType: data.signType,
        paySign: data.paySign,
        success: res => {
         // 支付成功回调
          return reslove(res)
        },
        fail: err => {
          // 支付失败回调
          return reject(err || '支付失败')
        }
      }
    )
  })
}