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

小程式的官方文件介紹到發起微信支付即呼叫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('介面請求出錯')
            }
        })
    }