前言微信小程序為電商類小程序，提供了非常完善、優(yōu)秀、安全的支付功能。在小程序內(nèi)可調(diào)用微信的API完成支付功能，方便、快捷。小程序開發(fā)者在開發(fā)小程序時，支付流程是必然要接觸到，今天我就小程序支付的全流程 ...

|

前言

微信小程序為電商類小程序，提供了非常完善、優(yōu)秀、安全的支付功能。在小程序內(nèi)可調(diào)用微信的API完成支付功能，方便、快捷。小程序開發(fā)者在開發(fā)小程序時，支付流程是必然要接觸到，今天胡哥就小程序支付的全流程為大家一一細說，讓小伙伴能快速得掌握小程序支付能力，避免踩坑！

知己知彼，方能百戰(zhàn)不殆 - 小程序支付流程圖

舉個栗子:chestnut:：
某用戶小明在某電商小程序上購買一塊肥皂，從瀏覽、下單到支付經(jīng)歷了什么樣的過程呢？

1. 打開電商小程序，搜索瀏覽到某雕肥皂，點擊查看詳情后，發(fā)現(xiàn)大小、絲滑程度都很合適，點擊直接下單
2. wx.login獲取用戶臨時登錄憑證code，發(fā)送到后端服務(wù)器換取openId
3. 在下單時，小程序需要將小明購買的商品Id，商品數(shù)量，以及小明這個用戶的openId傳送到服務(wù)器
4. 服務(wù)器在接收到商品Id、商品數(shù)量、openId后，生成服務(wù)期訂單數(shù)據(jù)，同時經(jīng)過一定的簽名算法，向微信支付發(fā)送請求，獲取預(yù)付單信息(prepay_id)，同時將獲取的數(shù)據(jù)再次進行相應(yīng)規(guī)則的簽名，向小程序端響應(yīng)必要的信息(必須字段信息將在下文進行詳細說明)
5. 小程序端在獲取對應(yīng)的參數(shù)后，調(diào)用wx.requestPayment()發(fā)起微信支付，喚醒支付工作臺，進行支付

小結(jié)
進行微信支付，在小程序端我們主要做三件事：
注：服務(wù)端調(diào)用統(tǒng)一下單API、簽名算法不再本次分享討論范圍內(nèi)。

1.使用 wx.login 獲取臨時登錄憑證code,發(fā)送到后端獲取openId

wx.login({
  success (res) {
    if (res.code) {
      // 發(fā)起請求，換取openId
      wx.request({
        url: '',
        data: {
          code: res.code
        }
      })
    }
  }
})

2.將 openId 以及相應(yīng)需要的商品信息發(fā)送到后端，換取服務(wù)端進行的簽名等信息

wx.request({
  url: '',
  data: {
    openId: '',
    num: 1,
    id: '111'
  }
})

3.接收返回的信息（必須要包含發(fā)起微信支付 wx.requestPayment的參數(shù) ），發(fā)起微信支付

wx.requestPayment({
  // 時間戳
  timeStamp: '',
  // 隨機字符串
  nonceStr: '',
  // 統(tǒng)一下單接口返回的 prepay_id 參數(shù)值
  package: '',
  // 簽名類型
  signType: '',
  // 簽名
  paySign: '',
  // 調(diào)用成功回調(diào)
  success () {},
  // 失敗回調(diào)
  fail () {},
  // 接口調(diào)用結(jié)束回調(diào)
  complete () {}
})

注意：以上信息中 timeStamp 、 nonceStr 、 prepay_id 、 signType 、 paySign 各參數(shù)均建議必須都由服務(wù)端返回（這樣會盡最大可能性保證簽名數(shù)據(jù)一致性），小程序端不做任何處理

基于Taro的微信支付實例

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首頁'
  }

  componentWillMount () { }

  async componentDidMount () { 
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  /**
   * sendOrderInfo()
   * @description 提交訂單信息，獲取支付憑證，喚起支付
   */
  async sendOrderInfo () {
    // 獲取臨時登錄憑證code
    let codeData = await Taro.login()
    // 換取openId
    let openId = ''
    if (codeData.code) {
      let res = await Taro.request({
        // 定義的后端換取openId的接口
        url: 'https://www.justbecoder.com/getLogin',
        data: {
          code: codeData.code
        }
      })
      if (res && res.code === 0) {
        openId = res.openId
      }
    }
    // 發(fā)送openId以及對應(yīng)的商品信息
    let data = await Taro.requrest({
      url: 'https://www.justbecoder.com/createdOrder',
      data: {
        openId,
        // 實際情況的商品數(shù)量
        num: 1,
        // 實際情況的商品Id
        id: 111,
      }
    })
    // code === 0 表示提交訂單成功，返回需要的簽名信息等
    if (data && data.code === 0) {
      let {
        timeStamp,
        nonceStr,
        prepay_id,
        signType,
        paySign
      } = data.payInfo
      // 喚起支付，按小程序要求格式發(fā)送參數(shù)
      let payData = await Taro.requestPayment({
        timeStamp,
        nonceStr,
        package: 'prepay_id=' + prepay_id,
        signType,
        paySign
      })
      if (payData && payData.errMsg === 'requestPayment:ok') {
        Taro.showModal({
          title: '操作提示',
          content: '支付成功',
          showCancel: false,
          confirmText: '確定'
        })
      } else {
        Taro.showModal({
          title: '操作提示',
          content: '支付失敗，請重新嘗試',
          showCancel: false,
          confirmText: '確定'
        })
      }
    }
  }

  render () {
    return (
      <View className='index'>
        <Button onClick={this.sendOrderInfo}>立即下單</Button>
      </View>
    )
  }
}

結(jié)語
在實際項目操作中，大家把接口換成自己的可用接口即可。