微信小程序 前端 支付流程

支付流程

最近在写两个小程序的项目，一个是外卖配送类项目，再有一个就是商城类项目，无一例外，免不了，两个项目都需要用到微信支付功能，那么这个时候，如何取实现支付的流程呢？

其实总的来说，关于支付的话，我们主要还是要配合后端来写，前端并不需要去刻意的做一些什么东西，只需要将对应的值传递给后端即可。

上干货

  async clickshow() {
    const res = await getApp().post('/v1/pay/get_pay_fee', {
      openId: wx.getStorageSync('openid'),
      userId: wx.getStorageSync('userid'),
      mobile: this.data.mobile,
      payFee: this.data.payFee
    })
    if (res.code !== 200) {
      wx.showToast({
        title: res.msg,
        icon: 'none'
      })
      return
    } else {
      wx.requestPayment({
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        package: res.data.package,
        signType: res.data.signType,
        paySign: res.data.paySign,
        success(res) {
          wx.showToast({
            title: "成功",
            icon: 'none'
          })
          setTimeout(() => {
						wx.switchTab({
							url: '/pages/myall/myindex/myindex',
						})
          }, 1000);
        },
        fail(res) {
          wx.showToast({
            title: "失败",
            icon: 'none'
          })
        }
      })
    }
    console.log(res)
  },

这个时候我们可以大体的看一下返回数据

其实你完全 可以不用知道这些对应的数据都是什么意思，只需要在微信支付吊起时，将对应后端处理好的接口返还给你的数据用
wx.requestPayment 发起支付请求即可，将对应的数据填进去，即可成功实现支付的功能

      wx.requestPayment({
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        package: res.data.package,
        signType: res.data.signType,
        paySign: res.data.paySign,
        success(res) {
          wx.showToast({
            title: "成功",
            icon: 'none'
          })
          setTimeout(() => {
						wx.switchTab({
							url: '/pages/myall/myindex/myindex',
						})
          }, 1000);
        },
        fail(res) {
          wx.showToast({
            title: "失败",
            icon: 'none'
          })
        }
      })

这个时候就可以调用支付了