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

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

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

// 支付按钮点击事件
  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 || '支付失败')
        }
      }
    )
  })
}