微信小程序支付功能講解

前言：雖然小程序做過很多，但是一直覺得微信支付功能很是神秘，現在終於有機會接觸心里還是有點小激動的，經過一番折騰發現支付也不過如此，在此記錄下支付功能的實現過程

小程序的官方文檔介紹到發起微信支付即調用API wx.requestPayment(Object object)

wx.requestPayment({
  timeStamp: '', nonceStr: '', package: '', signType: 'MD5', paySign: '', success(res) { }, fail(res) { } })

看到這是不是一臉懵逼，這些參數從何而來？

那么先來看一下官方給出的業務流程時序圖，小程序支付交互如下圖：

 

根據實現過程，我將它划分成如下六個模塊進行講解，

 1、下單：

這里是用戶與頁面交互，例如點擊付款按鈕，觸發支付交互

2、向后端發出支付請求

通過接口請求給后端系統提供參數：商品ID，總價totalPrice

3、后端系統與微信服務進行交互,換取參數

后端系統得到微信返回的相關數據后，經過解密處理返回前端需要的相關參數，即wx.requestPayment()需要的相關參數

4、發起微信支付

5、微信服務返回支付的結果 

 根據微信返回的結果（成功或失敗），前端做出對應的提示

6、微信服務把支付結果通知給后端系統

這里就是后端的事情了，和前端不相干

最后附上代碼思路如下

　　/**
     * 
     * @param {string|number} id 訂單ID
     * @param {string|number} totalPrice 訂單總價
     */
    pay(id,totalPrice){
        wx.request({
            url: 'https://xxxxxxxxx',
            data: {
              orderId: id,
              orderPrice:totalPrice
            },
            success:res => {
                wx.requestPayment({
                    timeStamp: res.data.timeStamp,
                    nonceStr: res.data.paySign,
                    package: res.data.paySign,
                    signType: 'MD5',
                    paySign: res.data.paySign,
                    success(res) {
                        console.log('支付成功')
                    },
                    fail(res) { 
                        console.log('支付失敗')
                    }
                })
                
            },
            fail:err => {
                console.log('接口請求出錯')
            }
        })
    }